Element UI | Upload 使用submit方法手动上传文件

最新推荐文章于 2024-09-14 10:30:18 发布

Igiveufireworks

最新推荐文章于 2024-09-14 10:30:18 发布

阅读量5.5k

点赞数

文章标签： ui vue.js elementui

本文链接：https://blog.csdn.net/igiveufireworks/article/details/130561645

版权

文章描述了一个需求，即点击上传文件按钮后不立即上传，而是在用户点击提交按钮时才调用上传接口。使用了ElementUI的el-upload组件来实现这一功能，通过设置auto-upload为false来阻止自动上传，并在提交表单时判断所有文件是否已成功上传。文件上传成功后，会获取文件ID并用于后续的表单提交操作。

摘要由CSDN通过智能技术生成

一、需求

点击上传文件按钮不立刻进行上传，而是点击提交后再调用上传接口，和表单一起提交。

二、实现

                <table>
                    <tr>
                      <td class="column">材料</td>
                      <td colspan="3">
                        <el-upload
                          ref="fileUpload"
                          :action="`${baseURI}/common/upload`"
                          :headers="headers"
                          :file-list="fileList"
                          :auto-upload="false"
                          :on-success="fileUploadSuccess"
                          :on-preview="filePreview"
                          :on-remove="fileRemove"
                        >
                          <el-button icon="el-icon-upload2">
                            点击上传
                          </el-button>
                          <div slot="tip" class="el-upload__tip">可上传.xlsx、.docx、.doc、.xls...</div>
                        </el-upload>
                      </td>
                  </tr>
              </table>
      <template #footer>
        <el-button type="primary" @click="submitRectification">确定</el-button>
        <el-button @click="showInput = false">取消</el-button>
      </template>

js:

判断文件没有上传即先进行文件上传，上传文件成功后在调用表单上传接口，否则直接调用接口上传表单。submit为element ui内部方法。表单上传接口一般传递文件id。

    submitRectification() {
      if (this.$refs.fileUpload.uploadFiles.some((item) => item.status !== 'success')) {
        this.$refs.fileUpload.submit();
      } else {
        this.write();
      }
    },
    // 材料上传成功回调
    fileUploadSuccess() {
      const finished = this.$refs.fileUpload.uploadFiles.every((item) => item.status === 'success');
      if (finished) {
        this.questionDetail.evidenceName = this.$refs.fileUpload.uploadFiles.map((item) => item?.id || item.response?.id).join(',');
      }
      // 调用表单上传接口
      this.write()
    },