本来文件上传是后端的事情，我们前端只是做数据渲染的，但最近公司一位后端小哥辞职了，现在我们公司的状态变成了一个后端对两个前端，后端小哥直呼压力山大。于是文件上传变成了前端的事情。那我在这里分别记录一下前端上传与后端上传吧。
一、前端上传
<el-upload class="upload-demo" action="" :on-change="handleChange" :on-remove="handleRemove" accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet" :auto-upload="false" :show-file-list="false">
<el-button size="small" icon="el-icon-plus" type="primary">批量导入</el-button>
</el-upload>
on-change:监听文件状态改变
on-remove:从文件列表移除触发的钩子函数
auto-upload:是否在选取文件后立即进行上传
show-file-list:是否显示已上传文件列表
accept:前端限制文件类型
.doc application/msword
.docx application/vnd.openxmlformats-officedocument.wordprocessingml.document
.rtf application/rtf
.xls application/vnd.ms-excel application/x-excel
.xlsx application/vnd.openxmlformats-officedocument.spreadsheetml.sheet
.ppt application/vnd.ms-powerpoint
.pptx application/vnd.openxmlformats-officedocument.presentationml.presentation
.pps application/vnd.ms-powerpoint
.ppsx application/vnd.openxmlformats-officedocument.presentationml.slideshow
.pdf application/pdf
.swf application/x-shockwave-flash
.dll application/x-msdownload
.exe application/octet-stream
.msi application/octet-stream
.chm application/octet-stream
.cab application/octet-stream
.ocx application/octet-stream
.rar application/octet-stream
.tar application/x-tar
.tgz application/x-compressed
.zip application/x-zip-compressed
.z application/x-compress
.wav audio/wav
.wma audio/x-ms-wma
.wmv video/x-ms-wmv
.mp3 .mp2 .mpe .mpeg .mpg audio/mpeg
.rm application/vnd.rn-realmedia
.mid .midi .rmi audio/mid
.bmp image/bmp
.gif image/gif
.png image/png
.tif .tiff image/tiff
.jpe .jpeg .jpg image/jpeg
.txt text/plain
.xml text/xml
.html text/html
.css text/css
.js text/javascript
.mht .mhtml message/rfc822
handleChange(file) {
this.fileTemp = file;
console.log(file,'file-------');
if (file) {
if (//判断文件是否符合格式
file.raw.type ==
"application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"
) {
//读取文件(importfxx方法在下面)
this.importfxx(this.fileTemp, false);
} else {
this.$message({
type: "warning",
message: "附件格式错误，请删除后重新上传！",
});
}
} else {
this.$message({
type: "warning",
message: "请上传附件！",
});
}
},
读取文件
importfxx(obj, isRes) {
console.log(obj,'Obj------')//文件对象
console.log(isRes,'isRes-----')//false
let _this = this;
// 通过DOM取文件数据
this.file = obj;
var rABS = false; //是否将文件读取为二进制字符串
var f = this.file.raw;
console.log(this.file, "this.file----------");
var reader = new FileReader();
//if (!FileReader.prototype.readAsBinaryString) {
FileReader.prototype.readAsBinaryString = function (f) {
console.log(f, "f------");
var binary = "";
var rABS = false; //是否将文件读取为二进制字符串
var pt = this;
var wb; //读取完成的数据
var outdata;
var reader = new FileReader();
reader.onload = function (e) {
var bytes = new Uint8Array(reader.result);//8位无符号整型数组
var length = bytes.byteLength;
for (var i = 0; i < length; i++) {
binary += String.fromCharCode(bytes[i]);//将unicode编码转换成一个字符
}
var XLSX = require("xlsx");
if (rABS) {
wb = XLSX.read(btoa(fixdata(binary)), {
//手动转化
type: "base64",
});
} else {
wb = XLSX.read(binary, {
type: "binary",
});
}
outdata = XLSX.utils.sheet_to_json(wb.Sheets[wb.SheetNames[0]]); //outdata就是你想要的东西
console.log(outdata, "outdata-------");//outdata为数据数组
this.da = [...outdata];//拷贝数组
let arr = [];
//匹配字段
this.da.map((v) => {
let obj = {
};
obj.code = v["统一信用编码"];
obj.companyName = v["企业名称"];
arr.push(obj);
});
console.log(arr, "arr=====");
if (isRes) {
_this.$set(_this.form, "content", arr);
} else {
_this.$set(_this.form, "content", arr);
}
};
reader.readAsArrayBuffer(f);
};
console.log(reader);
if (rABS) {
reader.readAsArrayBuffer(f);
} else {
reader.readAsBinaryString(f);
}
},
handleRemove() {
this.fileTemp = null;
},
handleSuccess() {
console.log("111");
this.$notify({
message: "导入成功",
title: "成功了",
type: "success",
});
this.$set(this, "fileLists", []);
// this.getChildList();
this.getlist();
},
handleError(e) {
console.log(e.status);
if (e.status == 404) {
this.$notify({
type: "error",
message: "网络似乎挂掉了，稍后尝试",
title: "失败了",
});
} else if (e.status == 500) {
this.$notify({
type: "error",
message: JSON.parse(e.message).message,
title: "失败了，请重新尝试",
});
}
},
前端的导入需要在前端读取文件，将文件转换成二进制字符串，这样上传成功后显示在前端的表格里，点击保存，调用接口，保存在数据库！！
二、后端上传
<el-upload class="upload-demo" :action="proxy + '/system/texttemp/fileupload'" :on-success="handleSuccess" :on-error="handleError" :data="params" :show-file-list="false" :on-change="handleChange">
<el-button type="primary" size="small">上传附件</el-button>
<el-button type="primary" size="small">下载</el-button>
</el-upload>
action：表示上传路径(后端返回的)
on-success：文件上传成功后的回调函数
on-error：文件上传失败后的回调函数
data：当还另外传递参数的时候，需要用data绑定参数。
show-file-list：是否显示文件列表
on-change:文件状态改变时触发的钩子函数
handleChange(file, filelist) {
if (filelist.length > 0) {
this.fileList = [filelist[filelist.length - 1]];
}
},
handleSuccess(res, file, filelist) {
console.log(res, "res---");
console.log(file, "file---");
console.log(filelist, "filelist---");
this.$notify({
message: `文件${res.nameAtt}上传成功,请点击保存`,
title: "上传成功",
type: "success",
});
this.formInline.templateAttachments[0].nameAtt = res.nameAtt;
this.formInline.templateAttachments[0].sizeAtt = res.sizeAtt;
console.log("上传成功", res);
},
handleError(e) {
console.log(e.status);
if (e.status == 404) {
this.$notify({
type: "error",
message: "网络似乎挂掉了，稍后尝试",
title: "失败了",
});
} else if (e.status == 500) {
this.$notify({
type: "error",
message: JSON.parse(e.message).message,
title: "失败了，请重新尝试",
});
}
},
大家择需而用吧！！！