尝试使用 axios post 请求上传文件

Question

我正在尝试使用以下代码使用axios.post请求上传文件：

export const create = (data) => {
    api.post("/api/v1/redacao", { tema: data.tema }).then(postResponse => {
        const resp = api.patch("/api/v1/redacao/" + postResponse.data.redacao.id, { titulo: data.titulo, texto: data.conteudo }).then(patchResponse => {
            if (patchResponse.status === 200) {
                if (data.file) {
                    const formData = new FormData();
                    formData.append('file', data.file)
                    const config = {
                        headers: {
                            'content-type': 'multipart/form-data'
                        }
                    }
                    return api.post("/api/v1/redacao/uploadRedacao/" + postResponse.data.redacao.id, formData, config)
                }
                return false;
            }
            return null
        })
        if (resp) {
            resp.then((response) => { console.log(response) })
        }
        return false;
    })
}

但是当我在 Chrome 开发工具中查看负载数据时，负载是空的。 如果我使用没有链接的 post 请求，它的请求工作正常。

任何人都知道FormData有什么问题？

Answer 1

我创建了一个模块调用 api，它创建了一个 axios 实例，我使用它是因为授权标头、baseUrls 和拦截器。 我再次导入 axios 并制作其他实例来提出这个特定的请求并且它现在正在工作

export const create = (data) => {
api.post("/api/v1/redacao", { tema: data.tema }).then(postResponse => {
    if (data.file) {
        let formData = new FormData()
        formData.append('file', data.file)
        buildUploadFileHeader().then(headers => {
            axios.post(REACT_APP_BACKEND_URL + '/api/v1/redacao/uploadRedacao/' + postResponse.data.redacao.id, formData, { headers }).then(uploadResponse => {
                if (uploadResponse.status === 201) {
                    return false
                }
            })
        })
    }
    else {
        api.patch("/api/v1/redacao/" + postResponse.data.redacao.id, { titulo: data.titulo, texto: data.conteudo }).then(patchResponse => {
            if (patchResponse.status === 200) {
                return false;
            }
            return null
        })
    }
    return true;
})

}