需求是上传文件,文件里面是一些ID,用来批量添加店铺。
<el-upload
ref="upload"
accept=".xlsx"
action="#"
style="display: inline-block"
:auto-upload="false"
:limit="1"
:on-change="onUploadChange"
:before-upload="beforeAvatarUpload"
>
<el-button size="medium" type="primary">批量导入店铺</el-button>
</el-upload>
是用按钮触发文件上传的,但是我设置了:auto-upload=“false”,就不会自动发送请求,只有点确定了才会发送请求。
onUploadChange (file) {
//获取文件
this.uploadFile = file
},
// 阻止默认上传,解决控制台报错
beforeAvatarUpload (file) {
return false // 屏蔽了action的默认上传
}
// 点击确定发送请求 接口要求传fromdata类型的数据
addRelation(){
let formData = new FormData()
formData.append('config_id', this.addRelationConfigId)
formData.append('is_affirmed', 0)
//在onUploadChange里拿到了文件存到data里,这里取出来,记得要取文件的raw
formData.append('files', this.uploadFile.raw)
axios({
url: `你要传的地址`,
method: 'post',
// 添加headers说明数据类型
headers: {
'Content-Type': 'multipart/form-data'
},
params: {
// query参数,token是全局变量,直接从localStorage里取
access_token: localStorage.getItem('token')
},
data: formData
}).then(res=>{
// 收到返回后的处理
console.log(res)
})
}