当前位置：首页 > news >正文

vue限定类型上传文件最简单实践（单个可文件、可图片）

news 2025/7/6 23:00:42

这个是为了文件导入弄的，内部运维人员使用的目前还没做删除文件的交互

<el-uploadclass="upload-demo"ref="upload":before-upload="handleBeforeUpload"action="#"accept=".xls,.xlsx":limit="1"><el-button slot="trigger" size="small" type="primary">选取文件</el-button><div slot="tip" class="el-upload__tip">请上传 大小不超过 10MB 格式为 xls/xlsx 的文件</div>##简单展示 未做删除交互<li v-if="this.file != null">{{this.file.name}}</li></el-upload>data() 内新增属性file:null,

##获取file对象handleBeforeUpload(file) {this.file =file;},
##表单提交submitFormImport(){this.$refs["forms"].validate(valid => {let formData = new FormData();formData.append('file',this.file);##属性类型formData.append('taskId',this.taksForip.taskId);console.log(formData);importForCode(formData).then(response => {this.$modal.msgSuccess(response.msg);this.opens = false;});});},
## (@RequestParam("file") MultipartFile file  后台属性

延伸代码再次限制类型与大小 fileSizewei
fileSize: {
type: Number,
default: 5 ##5M
},

   handleBeforeUpload(file) {// 校检文件类型if (this.fileType) {const fileName = file.name.split(".");const fileExt = fileName[fileName.length - 1];const isTypeOk = this.fileType.indexOf(fileExt) >= 0;if (!isTypeOk) {this.$modal.msgError(`文件格式不正确, 请上传${this.fileType.join("/")}格式文件!`);return false;}}// 校检文件大小if (this.fileSize) {const isLt = file.size / 1024 / 1024   < this.fileSize;if (!isLt) {this.$modal.msgError(`上传文件大小不能超过 ${this.fileSize} MB!`);return false;}}this.$modal.loading("正在上传文件，请稍候...");this.number++;return true;},