vue el-upload一次介面上傳多張圖片

公孫元二發表於2020-12-10
                  <el-form-item label="圖片上傳:">
                    <el-upload
                      ref="upload"
                      action="#"
                      list-type="picture-card"
                      :file-list="fileList"
                      accept="bmp, jpg, png, gif, jpeg"
                      :http-request="modeUpload"
                      :on-change="handleChange"
                      :limit="3"
                      multiple
                      size="mini"
                      :on-exceed="exceedHandle"
                      :auto-upload="false
                    >
                      <i slot="default" class="el-icon-plus"></i>
                      <div slot="file" slot-scope="{file}">
                        <img
                          class="el-upload-list__item-thumbnail"
                          :src="file.url"
                          alt=""
                        />
                        <span class="el-upload-list__item-actions">
                          <span
                            class="el-upload-list__item-preview"
                            @click="handlePictureCardPreview(file)"
                          >
                            <i class="el-icon-zoom-in"></i>
                          </span>
                          <span
                            v-if="!disabled"
                            class="el-upload-list__item-delete"
                            @click="handleRemove(file)"
                          >
                            <i class="el-icon-delete"></i>
                          </span>
                        </span>
                      </div>
                    </el-upload>
                    <el-dialog :visible.sync="dialogVisible">
                      <img width="100%" :src="dialogImageUrl" alt="" />
                    </el-dialog>
                  </el-form-item>
<div slot="footer" class="dialog-footer">
        <el-button icon="el-icon-collection" @click="confirmationReceipt">提交</el-button>
        <el-button icon="el-icon-close" @click="receiptconfirmationDialog = false">取消</el-button>
      </div>
return {
      fileList_now: [], // 儲存圖片列表
// 檔案狀態改變時的鉤子,新增檔案、上傳成功和上傳失敗時都會被呼叫
    handleChange(file, fileList) {
      this.fileList_now = fileList
    },
// 檔案上傳
    upLoadImg(fileListArr) {
       const fd = new FormData()
       this.fileList_now.forEach( (file) => {// 因為要上傳多個檔案,所以需要遍歷
       fd.append('file', file.raw)
      })
      uploadImgFiles(fd).then((response) => { // 上傳圖片的介面
        this.returnFileNameList = response.data;
      })
    },

PS: upLoadImg方法為點選提交按鈕觸發

// 點選提交按鈕事件
    confirmationReceipt() {
      this.receiptconfirmationDialog = false // 關閉對話方塊
     this.upLoadImg(this.fileItem) // 呼叫檔案上傳方法
     }

相關文章