<input type="file" id="putfile" ref="inputer" @change="fileUpload" />
//方法:
fileUpload(event) {
console.log(event);
let file = event.target.files;//一个文件流
let formData = new FormData();
formData.append("file", file[0]);
console.log(formData);
// 文件上传
this.$axios({
method: "POST",
url: "/api/device/deviceInfo/createDeviceInfoByExcel",
headers: {
"Content-Type": "multipart/form-data",
token: localStorage.getItem("token"),//token值,根据接口要求传或者不传
},
data: formData,
})
.then((res) => {
console.log(res);
})
.catch((e) => {
alert(e);
});
},
补充:接口要求传其他值如何处理
处理也很简单,只需要把接口要求的字段以及想对应的值,添加到formData对象里即可
fileUpload(event){
let file = event.target.files;//一个文件流
let formData = new FormData();
formData.append("file", file[0]);
formData.append("name", this.formData2.name);
formData.append("msgType", this.formData2.type);
console.log(formData);
this.$axios({
url: "/api/device/message/createMessageFile",
method: "post",
headers: {
"Content-Type": "multipart/form-data",
platform: 0,
token: localStorage.getItem("token"),
},
data: formData,
}).then((res) => {
console.log(res);
});
}
批量上传处理
关键点 input加属性multiple 并且for循环处理
<input class="input-file" multiple type="file" @change="selectFile" />
selectFile(event){
const files = event.target.files;
let formData = new FormData();
for (let i = 0; i < files.length; i++) {
const file = files[i];
let type = file.name.substring(file.name.lastIndexOf(".") + 1);
if(type.indexOf("xls") == -1 && type.indexOf("doc") == -1 && type.indexOf("pp") == -1 && type.indexOf("pd") == -1){
this.$message.error('不支持该格式的文件,请重新上传');//我这里只支持word,excel,ppt,pdf
return
}
let size = file.size / 1024 / 1024 >50
if(size){
this.$message.warning('上传文件大小不能超过50M!')
return
}
formData.append("files", file);
}
this.$axios({
url: "/api/device/message/createMessageFile",
method: "post",
headers: {
"Content-Type": "multipart/form-data",
platform: 0,
token: localStorage.getItem("token"),
},
data: formData,
}).then((res) => {
console.log(res);
});
}
方法二:如果使用的是elementUI的el-upload
上传方式一:http-request 覆盖默认的上传行为,可以自定义上传的实现
<el-upload
class="avatar-uploader"
:action="action"
:http-request="fileUpload"
>
<div class="upload-box">
<el-button type="primary" style="height:40px">点击上传</el-button>
</div>
</el-upload>
//js:
action:'',//上传文件的接口
//上传方法
fileUpload(uploader){
let form = new FormData();
form.append('file',uploader.file);
this.$http({
url: this.$root.axiosPath + "/file/uploadPubFile",
method: "post",
headers: {//请求头,根据自身需求加或者不加
Authorization: "Bearer " + getToken(),
"Content-Type": "multipart/form-data",
},
data: form,
onUploadProgress: progressEvent => {//这一步是展示上传的进度条,不展示也行,根据自身需求决定
let percent=(progressEvent.loaded / progressEvent.total * 100) | 0
uploader.onProgress({percent:percent});//调用uploader的进度回调
}
}).then((res) => {
if (res.data.code == 200) {
this.$message({
message: "上传成功",
type: "success",
});
}else{
this.$message.error('上传失败');
}
}).catch((err)=>{
this.$message.error(err);
})
}
上传方式二:before-upload 上传文件之前的钩子
<el-upload
class="avatar-uploader"
:action="action"
:before-upload="fileUpload"
>
<div class="upload-box">
<el-button type="primary" style="height:40px">点击上传</el-button>
</div>
</el-upload>
//js:
action:'',//上传文件的接口
fileUpload(file) {
//这个方法,再扩展一下 格式和大小限制,没限制的话 可以不加这两个判断
if (["xlsx", "xls"].indexOf(file.type) == -1 //控制格式) {
//如果是视频格式可以为["video/mp4","video/ogg","video/flv","video/avi","video/wmv","video/rmvb","video/mov"]
this.$message.error("请上传正确的文件格式");
return false;
}
var fileSize = file.size / 1024 / 1024 < 50; //控制大小 修改50的值即可
if (!fileSize) {
this.$message.error("文件大小不能超过50MB");
return false;
}
let formData = new FormData();
formData.append("file", file);
this.$http({
url: this.$root.axiosPath + "/file/uploadFile",//上传文件接口
method: "post",
headers: {//请求头,根据自身需求加或者不加
Authorization: "Bearer " + getToken(),
"Content-Type": "multipart/form-data",
},
data: formData,
}).then((res) => {
console.log(res);
if (res.data.code == 200) {
this.$message({
message: "上传成功",
type: "success",
});
}
});
}
总结:
关键点就是要将文件流转成formdata对象,在对象里传接口所需要的值,data直接传formData就行