VUE实现上传附件(各类都支持)并能删除
通常上传都分为上传图片和文件,那如果要求都能上传,以下的代码一定能帮到你:<div style="padding:20px"><div class="body"><p>请打包上传授信资料清单及各模板资料</p><br><div><p style="float:left;color:red;font-size:14px"&
·
通常上传都分为上传图片和文件,那如果要求都能上传,以下的代码一定能帮到你:
<div style="padding:20px">
<div class="body">
<p>请打包上传授信资料清单及各模板资料</p>
<br>
<div>
<p style="float:left;color:red;font-size:14px">*</p>
<p style="float:left;font-size:14px">申请授信资料上传</p>
<br>
</div>
<br>
<el-upload
class="upload-demo"
ref="classZip"
action="action"
:data="{ taskId: helloTaskId }"
:on-preview="handlePreview"
name="classZip"
:on-remove="handleRemove"
:on-error="handleError"
:on-success="handleSuccess"
multiple
:on-exceed="handleExceed"
:before-upload="beforeAvatarUpload"
:limit="1"
:on-change="handleChange"
:auto-upload="false"
>
<el-button slot="trigger" size="small" type="primary"
>选取文件</el-button
>
<div slot="tip" class="el-upload__tip" style="color: red;">
{{ message }}
</div>
</el-upload>
<!-- <button
class="helloSubmitBtn"
@click="submitUpload"
:class="
helloTaskId != '' && wordFlag == true
? 'subMitError'
: 'subMitSuccess'
"
>
提交
</button> -->
</div>
</div>
export default {
data() {
return {
sunmitShow: false,
helloTaskId: "",
imgFlag: false,
message: "",
Wordmessage: "", //输入不能为空提示
fileNmae: "",
wordFlag: false
};
},
methods: {
handleChange() {
this.wordFlag = true;
},
handleExceed(files, fileList) {
// console.log(files,fileList,"文件超出个数限制时的钩子");
this.message = "只允许上传一个文件";
},
upload() {},
beforeAvatarUpload(file) {
var FileExt = file.name.replace(/.+\./, "");
if (["zip", "rar", "gz", ".apk"].indexOf(FileExt.toLowerCase()) === -1) {
this.message = "文件格式有误,请重新上传";
return false;
}
this.message = "上传中,请稍等";
},
handleError(err, file, fileList) {
// console.log(err, file, fileList,"失败")
this.message = "上传失败";
},
handleSuccess(response, file, fileList) {
//console.log(response, file, fileList,"成功")
this.message = "上传成功";
setTimeout(() => {
this.$router.push({
path: "/homePage",
query: {
id: 1
}
});
}, 1000);
},
helloSunmitBtn() {},
submitUpload() {
// console.log(this.$refs.classZip)
if (!this.wordFlag) {
this.message = "请上传文件";
return;
}
if (this.helloTaskId == "") {
this.Wordmessage = "请填写任务ID";
return;
} else {
this.Wordmessage = "";
this.$refs.classZip.submit();
}
},
handleRemove(file, fileList) {
// console.log(file, fileList,"删除");
},
handlePreview(file) {
// console.log(file,"已上传的文件时的钩子");
}
}
};
更多推荐
已为社区贡献1条内容
所有评论(0)