Vue文件上传问题合集

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上传文件,文件是必填项的验证 - 吃的快不吐骨头 - 博客园

<template><div v-loading="loading" ref="fileUpload"><el-form-item label="文件上传" ref="fileUpload" prop="filepath" :rules="rules.file"> // 必填项以及规则<el-uploadv-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 = "";      // 删除文件时清空文件地址},
}