记录一下微服务（意象商场）的图片上传和文件上传

前言

意象商场对于新手来说真的是噩梦（恶心！！！！！！）

文件上传

  <el-upload
              ref="upload"
              :limit="1"
              :before-upload="beforeUpload"
              :auto-upload="true"
              :headers="headers"
              :on-success="handleSuccess"
              :on-error="handleError"
              :action="fileUploadApi + '?name=' + form.epFile"
            >
              <div class="eladmin-upload"><i class="el-icon-upload" /> 添加文件</div>
              <div slot="tip" class="el-upload__tip">可上传任意格式文件，且不超过100M</div>
            </el-upload>

注册token

headers: { 'Authorization': getToken() },
import {getToken} from "@/utils/auth";

 computed: {
      ...mapGetters([
        'baseApi',
        'fileUploadApi'
      ])
    },

 上传方法

 handleSuccess(response, file, fileList) {
        this.form.epFile = response.path
        this.crud.notify('上传成功', CRUD.NOTIFICATION_TYPE.SUCCESS)
        // this.$refs.upload.clearFiles()
        // this.crud.status.add = CRUD.STATUS.NORMAL
        // this.crud.resetForm()
        this.crud.toQuery()
      },
      beforeUpload(file) {
        let isLt2M = true
        isLt2M = file.size / 1024 / 1024 < 100
        if (!isLt2M) {
          this.loading = false
          this.$message.error('上传文件大小不能超过 100MB!')
        }
        console.log(file,"555555")
        this.form.epFile = this.epFile
        return isLt2M
      },
   handleError(e, file, fileList) {
        const msg = JSON.parse(e.message)
        this.$notify({
          title: msg.message,
          type: 'error',
          duration: 2500
        })
        this.loading = false
      },

图片上传

  <el-upload
              :action="imagesUploadApi"
              :headers="headers"
              list-type="picture-card"
              :on-preview="handlePictureCardPreview"
              :on-remove="handleRemove"
              :on-success="handleUploadSuccess"
              :file-list="imageList"
              :before-upload="beforeAvatarUpload"
            >
              <i class="el-icon-plus" />
            </el-upload>

import { getToken } from '@/utils/auth'
import { mapGetters } from 'vuex'

 headers: {
        'Authorization': getToken()
      },
  computed: {
    ...mapGetters([
      'imagesUploadApi'
    ]),
    imageList() {
      const res = []
      if (this.value) {
        const imageArray = this.value.split(',')
        for (let i = 0; i < imageArray.length; i++) {
          res.push({ url: this.resourcesUrl + imageArray[i], response: imageArray[i] })
        }
      }
      this.$emit('input', this.value)
      console.log(res)
      return res
    }
  },

  // 图片上传
    handleUploadSuccess(response, file, fileList) {
      console.log(file,"111")
      console.log(fileList)
      console.log(response)
      this.crud.notify('上传成功', CRUD.NOTIFICATION_TYPE.SUCCESS)
      this.form.ecName = file.url
      // const pics = fileList.map(file => {
      //   if ((typeof file.response) === 'object') {
      //     return file.response.data[0]
      //   } else {
      //     return file.response
      //   }
      // }).join(',')
      // console.log(pics,'1110')

      this.$emit('input', pics)
    },
    // 限制图片上传大小
    beforeAvatarUpload(file) {
      const isLt2M = file.size / 1024 / 1024 < 2
      if (!isLt2M) {
        this.$message.error('上传图片大小不能超过 2MB!')
      }
      return isLt2M
    },
    handlePictureCardPreview(file) {
      console.log(file,'111')
      // this.dialogImageUrl =
      this.form.ecName = file.url
      this.dialogVisible = true
    },
    handleRemove(file, fileList) {
      const pics = fileList.map(file => {
        return file.response
      }).join(',')
      this.$emit('input', pics)
    },
    // 监听上传失败
    handleError(e, file, fileList) {
      const msg = JSON.parse(e.message)
      this.$notify({
        title: msg.message,
        type: 'error',
        duration: 2500
      })
    },