element upload 上传方式、传参、token
2020-11-12 本文已影响0人
撑船的摆渡人
整理一下关于Element-UI中关于 上传组件使用的一些小技巧
可以分为使用action默认方式 和 不使用 action
使用默认 action 方式上传
// html
<el-upload
class="upload-demo"
drag
:data="myData"
:headers="myHeaders"
:on-remove="handleRemove"
:on-success="handleSuccess"
:on-error="handleError"
:before-upload="beforeUpload"
action="fileUpload">
// script
data() {
return {
fileUpload: process.env.VUE_APP_BASE_API + '/upload/import', // 文件上传地址
myHeaders: { Authorization: getToken() }, // 传token
myData: { type:params.type } // 传参数
}
},
不使用 默认 action 方式上传
// html
<el-upload
class="upload-demo"
drag
:on-remove="handleRemove"
:on-success="handleSuccess"
:on-error="handleError"
:before-upload="beforeUpload"
:http-request="handleUploadFile"
action="#">
// script
methods: {
handleUploadFile(params) {
const fd = new FormData()
fd.append('file', params.file)
fd.append('type', this.params.type)
uploadFile(fd).then(res => {
console.log(res, 'sucess')
}).catch(err => {
console.log(err, 'error')
})
}
}