antd+axios上传文件
2021-06-22 本文已影响0人
LeslieLiang
HTML部分
<a-upload name="file" list-type="picture-card" :show-upload-list="false"
class="file-uploader" multiple
:custom-request="(data) => onFileUpload(data, 'cjtj')">
<a-icon :type="loading.cjtj ? 'loading' : 'plus'" />
<div class="ant-upload-text">上传文件</div>
</a-upload>
JS部分
onFileUpload ({ file, name }, type) { // 文件上传
this.loading[type] = true
const formData = new FormData()
formData.append('file', file, name)
formData.append('type', type)
const instance = this.$http.create({ withCredentials: true })
instance.post(this.config.apis.fileUpload, formData, {
headers: {
'x-csrftoken': localStorage.getItem('TOKEN')
}
}).then(resp => {
const { code, msg } = resp.data
if (code != 200) {
this.$message.error(`上传失败.${msg}`)
}
}).finally(() => {
this.loading[type] = false
})
}