vue2+element实现自定义上传

upload上传样式

 <el-form-item class="selectFile" label="导入模板:">
<el-upload
ref="upload"
class="upload-demo"
action="customize"
:file-list="fileList"
:auto-upload="false"
:http-request="uploadFile"
:before-upload="beforeUpload"
>
<el-button size="small" type="success" icon="el-icon-upload"
>将填好的Excel文件上传</el-button
>
</el-upload>
</el-form-item>
<div slot="footer" class="dialog-footer">
<el-button size="small" @click="closeDialog">取消</el-button>
<el-button
size="small"
type="primary"
:loading="loading"
class="title"
@click="submitUpload"
>确认上传
</el-button>
</div>

自定义上传方法

uploadFile(params) {
let file = new FormData();
file.append("file", params.file);
importRecord(file).then((res) => {
if (res.status == 200) {
this.$message.success(res.message);
this.importFormVisible = false;
}
});
},
submitUpload() {
this.$refs.upload.submit();
},

注意

1、http-request：覆盖默认的上传行为，可以自定义上传的实现—前面要写冒号
2、同时要写:auto-upload=“false”–选取文件后不立即进行上传
3、一定别忘了写 ref=“upload”，不然submitUpload（）方法会报错submit未定义

最后

以上就是贪玩人生为你收集整理的vue2+element实现自定义上传vue2+element实现自定义上传的全部内容，希望文章能够帮你解决vue2+element实现自定义上传vue2+element实现自定义上传所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。