1、html部分
html
<el-upload class="upload-demo" action="https://192.168.1.55:8080/dataManagement_importMsg"
:on-preview="handlePreview" :on-remove="handleRemove" :before-remove="beforeRemove" multiple
:limit="1" :on-exceed="handleExceed" :file-list="node.fileList" :before-upload="handleBeforeUpload"
:auto-upload="false" :on-change="handleChange" accept=".xlsx" ref="modeUpload">
<div class="uploadsc">
<el-button icon="el-icon-upload2" size="mini">上传文件</el-button>
</div>
</el-upload>
2、接口定义
javascript
export function uploadTemplate(data) {
return request.post("/uploadTemplate", data,{
headers: {
'Content-Type': 'multipart/form-data',
}
});
}
3、js部分(接口导入)
javascript
import { uploadTemplate } from "@/api/flow";
4、js部分(参数定义)
javascript
node: {
// file: '',
// fileList: [],
},
5、js部分(方法)
javascript
handlePreview(file) {
console.log(file);
},
handleRemove(file, fileList) {
console.log(file, fileList);
this.node.file = null;
this.node.fileList = [];
},
beforeRemove(file, fileList) {
return this.$confirm(`确定移除 ${file.name}?`);
},
handleExceed(files, fileList) {
// this.$message.warning(
// `当前限制选择 1个文件,本次选择了 ${files.length} 个文件,共选择了 ${
// files.length + fileList.length
// } 个文件`
// );
this.$message.warning(`已选择一个文件,请删除后重新选择。`);
},
handleBeforeUpload(file) {
this.file = file;
console.log(file);
this.node.fileList.push(file);
console.log("文件上菜弄成");
},
async handleChange(file, fileList) {
if (file.size > 90 * 1024 * 10240000) {
this.$message.error("文件过大,无法上传");
this.$refs.modeUpload.clearFiles();
return;
} else {
console.log("文件状态改变:", file, fileList);
this.node.fileList = fileList;
this.node.file = file.raw;
const formData = new FormData();
formData.append("file", this.node.file);
formData.append("id", this.node.id);
let result = await uploadTemplate(formData);
if (result.code == 200) {
this.$message({
message: result.message,
type: "success",
});
} else {
this.$message({
message: result.message,
type: "error",
});
}
}
},