vue+element批量上传图片

我们先来看下效果图吧

1604194511.jpg

1604194511(1).jpg

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

1604194640(1).jpg

<div class="avatar">
  <el-upload
          ref="upload"
          drag
          multiple
          :on-change="handleFormChange"
          :on-remove="handleFormRemove"
          :action="importFileUrl"
          :auto-upload="false"
          list-type="picture"
          :http-request="submitUploadET"
          accept="image/jpeg, image/jpg, image/png"
        >
          <div v-if="fileLength > 0" class="posCenterTitle">
            已上传<span>{{ fileLength }}</span>张图片
          </div>
          <div v-else>
            <i class="el-icon-upload" />
            <div class="el-upload__text">
              批量将图片拖到此处，或<em>点击上传</em>
            </div>
            <div slot="tip" class="el-upload__tip">
              只能上传jpg/png文件，且不超过500kb
            </div>
          </div>
  </el-upload>
  <el-button
        type="primary"
        style="margin-top: 20px"
        :loading="submitLoading"
        @click="_submitUpload"
      >导入图片</el-button>
<div/>

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'
          })
        }
      })
    },
}

最后是样式的写入

<style scoped>
.avatar >>> .el-upload-list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  border-radius: 4px;
  height: 100%;
}
.avatar >>> .el-upload-list--picture .el-upload-list__item-thumbnail {
  width: 40px;
  height: 40px;
  padding: 0;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  margin: 0;
}
.avatar >>> .el-upload-list--picture .el-upload-list__item {
  width: 40px;
  height: 40px;
  padding: 0;
  position: relative;
  margin: 0;
}
.avatar >>> .el-upload-list--picture .el-upload-list__item-name {
  display: none;
}
.avatar >>> .el-upload-list__item .el-icon-close {
  display: block;
  z-index: 2;
  color: #fff;
  right: 0;
  top: 0;
  background-color: rgba(0, 0, 0, 0.4);
  opacity: 1;
}
</style>

最后编辑于：2020.11.01 10:02:45