Axios upload excel file All In One
Axios upload excel file All In One
post
application/x-www-form-urlencoded
multipart/form-data
post formData
axios.post( '/single-file', formData, {
headers: {
'Content-Type': 'multipart/form-data'
},
},
).then(function(){
console.log('SUCCESS!!');
})
.catch(function(){
console.log('FAILURE!!');
});
upload component
https://zzk.cnblogs.com/my/s/blogpost-p?Keywords=upload+excel
postUploadExcel(blob) {
const {
name,
type,
size,
lastModified,
lastModifiedDate,
webkitRelativePath,
} = blob;
// const types = [".xlsx", ".xls", ".csv"];
const types = ["application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"];
const littleSize = Math.ceil(size / 1000) <= 500 ? true : false;
const supportType = types.includes(type) ? true : false;
const seatMapTemplateId = this.templateId;
if (supportType) {
this.isShowWarning = false;
const formData = new FormData();
formData.append('file', blob);
// 😂 不需要 Content-Type, new FormData(), 已经自带了 `multipart/form-data`
fetch(`/opapi/v2/seatMap/template/${seatMapTemplateId}/seatData`, {
method: 'POST',
// headers: {
// 'Content-Type': 'application/x-www-form-urlencoded',
// },
// mode: 'cors',// no-cors
// credentials: 'include',
body: formData,
})
.then(res => res.json())
.then(data => {
const {
data: url,
success,
errorHint,
errorCode,
} = data;
if(success) {
this.$message({
message: '上传成功',
type: 'success'
});
this.updateURL(url || ``);
} else {
this.$message({
message: `上传错误: ${errorCode}_${errorHint}`,
type: 'error'
});
}
})
.catch(error => {
this.$message({
message: '上传错误',
type: 'error'
});
console.error(error);
});
} else {
this.isShowWarning = true;
this.$message({
type: 'info',
message: '上传失败,请检查文件大小和类型!'
});
}
},
https://element.eleme.io/#/zh-CN/component/upload
demos
(🐞 反爬虫测试!打击盗版⚠️)如果你看到这个信息, 说明这是一篇剽窃的文章,请访问 https://www.cnblogs.com/xgqfrms/ 查看原创文章!
refs
https://github.com/axios/axios/issues/1660
https://stackoverflow.com/questions/52521274/use-axios-to-get-and-save-an-excel-file
https://serversideup.net/uploading-files-vuejs-axios/
https://www.pluralsight.com/guides/asynchronous-file-upload-react
©xgqfrms 2012-2021
www.cnblogs.com/xgqfrms 发布文章使用:只允许注册用户才可以访问!
原创文章,版权所有©️xgqfrms, 禁止转载 🈲️,侵权必究⚠️!
本文首发于博客园,作者:xgqfrms,原文链接:https://www.cnblogs.com/xgqfrms/p/12456836.html
未经授权禁止转载,违者必究!