vue el-upload一次接口上传多张图片

                  <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) // 调用文件上传方法
     }
  • 3
    点赞
  • 22
    收藏
    觉得还不错? 一键收藏
  • 3
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值