vue-element多文件上传多次请求接口问题解决办法
element
A Vue.js 2.0 UI Toolkit for Web
项目地址:https://gitcode.com/gh_mirrors/eleme/element
·
element-ui多文件上传请求多次接口解决办法
问题
使用element-ui上传多文件时,发送请求出现多次提交问题,重复上传
警告: 切勿将发送后台请求的
axios方法写在自定义上传方法如:http-request="handleHttpRequest"中,否则将会按文件数量发送,造成多次请求,不符合预期提交一次上传多个文件。
覆盖默认上传,自定义上传:http-request
覆盖默认上传方法,使用自定义上传方法
<el-form-item label="附件" :label-width="formLabelWidth">
<el-upload
class="upload-demo"
ref="upload"
action="/"
:on-change="changeFile"
:on-preview="handlePreview"
:on-remove="handleRemove"
:before-remove="beforeRemove"
multiple
:limit="5"
:on-exceed="handleExceed"
:file-list="fileList"
:http-request="handleHttpRequest"
:auto-upload="false"
list-type="picture-card"
>
<el-button slot="trigger" size="small" type="primary"
>上传附件</el-button
>
<div
slot="tip"
class="el-upload__tip"
style="float: right;color: #E6A23C"
>
只能上传jpg/png/gif文件,且不超过10Mb
</div>
</el-upload>
<el-dialog :visible.sync="dialogVisible" append-to-body>
<img width="100%" :src="dialogImageUrl" alt="" />
</el-dialog>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button @click="handleCancel('add')">取 消</el-button>
<el-button type="primary" @click="handleOk('add')">确 定</el-button>
</div>
上传方法handleHttpRequest
handleHttpRequest(file) {
this.formObj.append("file", file.file);//将文件放入file中
}
提交方法 handleOk
handleOk() {
let vm = this;
vm.formObj = new FormData();
vm.$store
.dispatch("card/addCmPersonalCertAndAttach", vm.formObj)
.then(() => {
vm.form = {};
vm.fileList = [];
vm.$message.success("添加成功");
vm.query();
});
vm.$refs.upload.submit();
vm.addDialog = false;
}
A Vue.js 2.0 UI Toolkit for Web
最近提交(Master分支:2 个月前 )
c345bb45
1 年前
a07f3a59
* Update transition.md
* Update table.md
* Update transition.md
* Update table.md
* Update transition.md
* Update table.md
* Update table.md
* Update transition.md
* Update popover.md 1 年前
新一代开源开发者平台 GitCode,通过集成代码托管服务、代码仓库以及可信赖的开源组件库,让开发者可以在云端进行代码托管和开发。旨在为数千万中国开发者提供一个无缝且高效的云端环境,以支持学习、使用和贡献开源项目。
更多推荐


所有评论(0)