注意:form表单的请求头有两种:application/x-www-form-urlencoded 和 multipart/form-data
如果没有type=file的控件,用默认的application/x-www-form-urlencoded就可以了。 但是如果有type=file的话,就要用到multipart/form-data了。浏览器会把整个表单以控件为单位分割,并为每个部分加上Content-Disposition(form-data或者file),Content-Type(默认为text/plain),name(控件name)等信息,并加上分割符(boundary)。
// 文件上传
upLoads(e){
if((e.target.files[0].size/1024).toFixed(0) > 10240){
VUE.$message.error('导入文件不能超过10M')
return
}
let name = e.target.files[0].name
let token = JSON.parse(localStorage.shop).token
if(name.indexOf(".csv")!= -1 || name.indexOf(".xls")!= -1 || name.indexOf(".xlsx")!= -1){
let fromData = new FormData()
fromData.append('token', token)
fromData.append('file', e.target.files[0])
let config = {
headers: {
'Content-Type': 'multipart/form-data'
}
}
// form表单提交
// file:导入的文件,限制大小2M
Axios.post('/shop/qiguan/import_user/import', fromData, config).then( res => {
let data = res.data
if(data.code == 0){
if(data.data.error == 0){
// 导入成功
this.errorShow = false
}else {
// 导入失败,模板件内容有误
this.errorShow = true
this.errorList = data.data.errors
}
}else {
VUE.$message.error(res.msg || '导入失败')
}
}).catch( res => {
VUE.$message.error(res.msg || '导入失败')
})
}else {
VUE.$message.error('只支持CSV、XLS、XLSX格式的文件')
}
},