<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) // 调用文件上传方法
     }
Logo

前往低代码交流专区

更多推荐