大家好，又见面了，我是你们的朋友全栈君。
目录
1.背景
2.环境
3.问题集
1）文件上传完成后，文件名的回显
2）文件上传完成前的加载状态
3）文件上传作为必填项
1.背景
在使用Vue ElementUI进行前端工程开发中，遇到一些文件上传的问题，包括上传、回显、等待等。这里做一些记录，方便以后查看
2.环境
npm | 6.14.12 |
|---|---|
vue-admin-template | 4.4.0 |
axios | 0.18.1 |
element-ui | 2.13.2 |
3.问题集
1）文件上传完成后，文件名的回显
关键属性el-upload中 :file-list, :show-file-list
详细代码请往后看~~
参考：
https://www.jb51.net/article/183328.htm
vue elementUI上传图片/文件，编辑时回显文件名_LBJSagiri的博客-CSDN博客
elementUI上传图片回显在编辑 – 写手在作画 – 博客园
根据elementui中的上传组件upload，手写一个编辑时回显上传文件以及继续新增文件的功能 – 简书
element-ui Upload 上传文件再编辑显示的两种方式_liaoxuewu的博客-CSDN博客
2）文件上传完成前的加载状态
关键属性v-loading和el-upload中：on-progress。
详细代码请往后看~~
参考：
vue自定义指令v-loading_伴个人993的博客-CSDN博客
【转】Vue v-loading实现加载效果 – 花影疏帘 – 博客园
vue element-ui中上传文件使用Progress自定义实时更新进度条 – 简书
vue element-ui 上传文件的 :on-progress钩子无法触发的原因及报错原因 – 嘉煠 – 博客园
3）文件上传作为必填项
关键属性 el-form中定义prop和:rules。上传后，必填提示清除
详细代码请往后看~~
参考：
【vue】vue表单必填项前面添加红色*_小朋友的博客-CSDN博客
vue上传文件,文件是必填项的验证 – 吃的快不吐骨头 – 博客园
代码语言：javascript复制<template>
<div v-loading="loading" ref="fileUpload">
<el-form-item label="文件上传" ref="fileUpload" prop="filepath" :rules="rules.file"> // 必填项以及规则
<el-upload
v-model="item.filepath"
:on-success="handleFileSuccess"
:on-remove="handleFileRemove"
:before-remove="beforeFileRemove"
:on-exceed="handleUploadExceed"
:file-list="fileList" // 文件列表
:show-file-list="isShow" // 文件回显标记
:action="'/myService/file/upload'"
:limit="1"
class="upload-demo"
>
<el-button size="small" type="primary">上传文件</el-button>
<el-tooltip placement="right-end">
<div slot="content">只能上传txt文件，且不超过2MB</div>
<i class="el-icon-question" />
</el-tooltip>
</el-upload>
</el-form-item>
</div>
</template>
export default {
data() {
return {
loading: false,
item: {
filepath: "",
},
// 必填项规则
rules: [
file: {required: true, message:"文件必须上传", trigger: "change"}
]
}
},
handleFileSuccess(response) {
this.item.filepath = response.data.items.filepath; // 后端返回的对象key为items，其中文件链接存放在变量filepath中
if (this.item.filepath != null) {
this.isShow = true;
this.$message({
showClose: true,
message: "上传成功!",
type: "success",
});
(this.rules.file = []), this.$refs.fileUpload.clearValidate(); // 动态删除文件上传必填的提示信息
} else {
this.isShow = false;
this.fileList = [];
this.$message({
showClose: true,
message: "上传失败!",
type: "error",
});
}
this.loading = false; // 上传完成后loading状态清楚
},
handleUploadExceed() {
this.$message.warning("想要重新上传文件，请先删除已上传的文件");
},
beforeFileRemove(file, fileList) {
return this.$confirm(`确定删除 ${file.name}`);
},
handleFileRemove() {
this.item.filepath = ""; // 删除文件时清空文件地址
},
}发布者：全栈程序员栈长，转载请注明出处：https://javaforall.cn/170635.html原文链接：https://javaforall.cn
