这个是为了文件导入弄的,内部运维人员使用的 目前还没做删除文件的交互
bash
<el-upload
class="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,
bash
##获取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
},
bash
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;
},