美文网首页
antd+axios上传文件

antd+axios上传文件

作者: LeslieLiang | 来源:发表于2021-06-22 14:32 被阅读0次

    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
                })
            }
    

    相关文章

      网友评论

          本文标题:antd+axios上传文件

          本文链接:https://www.haomeiwen.com/subject/pytmyltx.html