©2020-2024 ioDraw All rights reserved
前端在新增数据时，需要将附件和表单数据一起上传，此时需要将文件转换成二进制流传给后端。记录将文件转换成二进制流
ref="uploadProduct"
class="upload-demo"
:auto-upload="false"
:limit="1"
:on-exceed="handleExceed"
:file-list="fileListProduct"
:data="uploadFormProduct"
:on-success="onSuccess"
:on-error="onError"
:on-change="onChangeProduct"
:before-remove="handleRemoveProduct"
name="enterprise_product_file"
>
选取文件
export default {
data() {
return {
// 上传附件(产品概况)
fileListProduct: []
};
},
methods: {
// 上传
handleExceed(files, fileList) {
this.$message.warning(
`当前限制选择 1 个文件，本次选择了 ${
files.length
} 个文件，共选择了 ${files.length + fileList.length} 个文件`
);
},
onSuccess(files, fileList) {
this.$parent.findAllEnterprise();
this.$message({
message: "成功",
type: "success"
});
this.handlerClose();
},
onError() {
this.$message({
message: "网络错误",
type: "warning"
});
},
handleRemoveProduct(file, fileList) {
return this.$confirm(`确定移除 ${file.name}？`).then(() => {
// this.isUploadFileProduct = false
this.fileListProduct.pop(file);
});
},
handlePreview(file) {
console.log(file);
},
onChangeProduct(file, fileList) {
// console.log(file)
if (/.(txt)$/.test(file.name)) {
this.$message({
message: "不允许上传以txt结尾的文件",
type: "warning"
});
this.$refs.uploadProduct.clearFiles();
return
}
// 当选择好上传文件时，将这个文件的信息push到数组中去
this.fileListProduct.push(file);
},
// 新增
addEnterprise() {
// 将上传的文件附件转成二进制转给后台 this.form就是表单输入框的内容
const formData = new FormData();
Object.keys(this.form).forEach(key => {
if (key === "enterprise_product_file") {
// 判断是否是产品概况的字段，是的话将刚刚push进fileListProduct转换成二进制给后台
// 注意，需要的是写到raw，否则传给后端就是"[object, object]"
formData.append(key, this.fileListProduct[0].raw);
} else {
// 若是表单中的字段，则直接append进去
formData.append(key, this.form[key]);
}
});
// 调用vuex中的方法，将formData传给后端。此时上传的附件已经转换成二进制流
this.addEnterpriseCustomers(formData)
.then(() => {
this.$message({
type: "success",
message: "保存成功!"
});
this.$parent.findAllEnterprise();
this.handlerClose();
})
.catch(() => {
this.$message({
type: "warning",
message: "网络异常"
});
});
},
// 修改
updateEnterprise() {
const formData = new FormData();
Object.keys(this.form).forEach(key => {
if (
key === "enterprise_product_file" &&
this.fileListProduct.length !== 0
) {
formData.append(key, this.fileListProduct[0].raw);
} else if (
key === "enterprise_introduct_file" &&
this.fileListIndoc.length !== 0
) {
formData.append(key, this.fileListIndoc[0].raw);
} else {
formData.append(key, this.form[key]);
}
});
const params = {
id: this.form.enterprise_pk_id,
form: formData
};
// delete params.form.enterprise_pk_id
this.updateEnterpriseCustomers(params)
.then(() => {
this.$message({
message: "修改成功",
type: "success"
});
this.handlerClose();
this.$parent.findAllEnterprise();
})
.catch(() => {
this.$message({
message: "网络错误",
type: "warning"
});
});
}
}
};