vue+element批量上传图片

我们先来看下效果图吧

1604194511.jpg

1604194511(1).jpg

多少张图片都可以 ，拖进去就可以了，就看服务器顶不顶得住了。前面都是拖进去之后的预览图，还没请求接口，也就是还没上传到服务器，下面就正式开始吧！

1604194640(1).jpg

  
          

            已上传{{ fileLength }}张图片
          
          

            
            

              批量将图片拖到此处，或点击上传
            
            

              只能上传jpg/png文件，且不超过500kb
            
          

  
  导入图片

data(){
  importFileUrl: '上传图片的地址',
  fileLength: '',
  fileFormData: '',
  submitLoading: false,
  multipeList :[]  //最后拿到一组图片地址的数组给后台
}
methods: {
    // 改变图片
    handleFormChange(file, fileList) {
      this.fileLength = fileList.length
    },

    // 移除图片
    handleFormRemove(file, fileList) {
      this.fileLength = fileList.length
    },

// http-request上传图片
    submitUploadET(params) {
      this.fileFormData.append('file', params.file)
    },

    // 提交到服务器
    _submitUpload() {
      if (this.fileLength === 0) {
        Message.warning('请先上传图片')
        return
      }
      this.fileFormData = new FormData()
      this.$refs.upload.submit()
      // console.log(...this.fileFormData)
      const config = {
        headers: {
          'Content-Type': 'multipart/form-data'
        }
      }
      axios
        .post(`${this.importFileUrl}`, this.fileFormData, config)
        .then((res) => {
          if (Number(res.data.code) === 0) {
            this.multipeList = this.addFirst(this.httpUrl, res.data.data)
            this._imortAvatar(this.multipeList) //这一步是请求后台的接口把一串图片地址的数组返回给后台
          } else {
            this.$notify({
              title: 'error',
              dangerouslyUseHTMLString: true,
              message: `
                      ${res.msg}
                    `,
              type: 'error'
            })
          }
        })
    },

// 给数组的每一项增加前缀
    addFirst(pre, paramsList) {
      const arr = []
      for (let i = 0; i < paramsList.length; i++) {
        arr.push(pre + paramsList[i])
      }
      return arr
    },

_imortAvatar(arr) {
      this.submitLoading = true
  // importReviewHeadUrlPer这个是后台提供给我的接口，根据实际情况更改
      importReviewHeadUrlPer({ headUrl: arr }).then((res) => {
        this.submitLoading = false
        if (Number(res.code) === 0) {
          Message.success('上传成功')
        } else {
          this.$notify({
            title: 'error',
            dangerouslyUseHTMLString: true,
            message: `
                      ${res.msg}
                    `,
            type: 'error'
          })
        }
      })
    },
}

最后是样式的写入