element 取消自定义文件上传_vue+element 实现选取文件，提交上传全部表单信息（同步）...

最新推荐文章于 2022-08-22 22:02:21 发布

anjoema778525

最新推荐文章于 2022-08-22 22:02:21 发布

阅读量553

点赞数

文章标签： element 取消自定义文件上传

本文链接：https://blog.csdn.net/weixin_30604459/article/details/113582085

版权

本文展示了如何使用Vue和Element UI库创建一个自定义文件上传组件，支持选择.apk文件，限制上传数量，并在上传成功后清除表单数据。组件包括上传前的文件验证、文件超出限制提示、文件移除、表单重置等功能。通过调用接口进行文件上传，并在上传成功后更新界面状态。

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

代码如下：

<el-form-item label="Android客户端文件：" prop="file" ref="uploadpic">
<el-upload
class="upload-demo"
ref="upload"
:headers="headers"
:action="updateUrl"
:data="addData"
:before-upload="beforeUpload"
:on-exceed="handleExceed"
:on-remove="handleRemove"
:on-success="handleAvatarSuccess"
:on-change="fileChange"
:file-list="fileList"
:limit="1"
:multiple="false"
:auto-upload="false">
<el-button ref="upload" slot="trigger" size="small" type="primary" >选取文件</el-button>
<div slot="tip" class="el-upload__tip">支持扩展名：.apk</div>
</el-upload>
</el-form-item>

data中变量：

接口地址：mounte

处理方法：

onAdd(formName,resetFields) {
if(resetFields=='resetFields'){
this.$refs[formName].resetFields();
this.fileList=[];
}else{
this.$refs[formName].validate((valid) => {
if (valid) {
this.isDisabled=true;
setTimeout(()=>{
this.isDisabled=false;// 上传包文件
this.$refs.upload.submit();
},2000)
} else {
return false;
}
})
}
},//上传成功
handleAvatarSuccess(resp, file, fileList) {
console.log('创建版本~~',resp)
this.$refs['upload'].clearFiles();
if(resp.retCode=="2000"){
}else{
this.tip.successTip=true;
this.tip.tipContent='添加失败';
this.$bus.$emit("tip",this.tip);
}
this.fileList=[];
},
onReset(formName){
this.visible = false;
this.$bus.$emit("visible",this.visible);
this.$refs[formName].resetFields();
this.$refs['upload'].clearFiles();
},
fileChange(file, fileList, name){
console.log(fileList)
this.fileList["file"] = fileList;// 如果上传了就不显示提示图片警告
if (typeof this.fileList.file != "undefined") {
if (this.fileList.file.length > 0) {
this.$refs["uploadpic"].clearValidate();
}
}
},// 文件上传前的钩子(这里可以对文件上传时的后缀进行限制)
beforeUpload(file) {
console.log(file)var FileExt = file.name.replace(/.+./, '')
if (['apk'].indexOf(FileExt) === -1) {
this.$message.warning("请上传后缀名为 apk 的文件！", 2);
return false
}
},
handleExceed(files, fileList) {
this.$message.warning(`当前限制选择 1 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
},
handleRemove(file, fileList) {
console.log(file, fileList);
},