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

发布者：全栈程序员-站长，转载请注明出处：https://javaforall.net/170635.html原文链接：https://javaforall.net