element-ui upload 选择文件后不自动上传

可能我们在使用element-ui 的upload上传组件的时候不希望在选择完文件后就马上上传，而是希望在点击提交后再统一上传，其实element-ui也是支持的。首先设置auto-upload="false"，然后在通过refs手动触发提交操作。

<el-upload

              ref="importRef"

              name="filename"

              :data="{template: userImportModule}"

              :action="baseUrl + '/erm-index-service/roleUser/importUsers'"

              :headers="headers"

              :show-file-list="true"

              :on-success="updateFileSuccess"

              :on-error="updateFileError"

              :file-list="currFileList"

              :limit="1"

              :auto-upload="false">

                <el-button type="primary" plain>选择文件</el-button>

            </el-upload>

手动触发：this.$refs.importRef.submit()

提交前判断是否有选择文件：

if (!this.$refs.importRef.uploadFiles.length) {

          this.$message.warning("请选择文件")

          return false

        }

如果想实现一次只能上传一个文件，并且后一个文件会默认覆盖前一个文件的话，可以将limit =1 去掉，通过on-change事件触发，截取最后一个文件赋值给upload组件

this.$refs.importRef.uploadFiles = this.$refs.importRef.uploadFiles.slice(-1)

本文章由javascript技术分享原创和收集