我們先來看下效果圖吧

1604194511.jpg

1604194511(1).jpg

多少張圖片都可以 ，拖進去就可以了，就看服務(wù)器頂不頂?shù)米×?。前面都是拖進去之后的預覽圖，還沒請求接口，也就是還沒上傳到服務(wù)器，下面就正式開始吧！

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 :[]  //最后拿到一組圖片地址的數(shù)組給后臺
}
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)
    },

    // 提交到服務(wù)器
    _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) //這一步是請求后臺的接口把一串圖片地址的數(shù)組返回給后臺
          } else {
            this.$notify({
              title: 'error',
              dangerouslyUseHTMLString: true,
              message: `
                      ${res.msg}
                    `,
              type: 'error'
            })
          }
        })
    },

// 給數(shù)組的每一項增加前綴
    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這個是后臺提供給我的接口，根據(jù)實際情況更改
      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>