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
            })
        }
上一篇下一篇

猜你喜欢

热点阅读