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-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 = "";		// 删除文件时清空文件地址
	},
}