ReactNative：使用 Axios 将图像文件上传到服务器不起作用答案

【问题标题】：ReactNative: uploading image file to server using Axios is not workingReactNative：使用 Axios 将图像文件上传到服务器不起作用
【发布时间】：2021-09-18 13:52:10
【问题描述】：

我正在使用 ReactNative 构建一个移动应用程序。我的应用程序需要将图像文件上传到服务器。为此，我正在使用 Axios。但是文件在服务器端总是空的。

这是我的代码。

const makeMultipartFormDataRequest = async ({
    path,
    data = null,
    headers = null
}) => {
    let accessToken = await getAccessToken();
    if (accessToken) {
        if (headers == null) {
            headers = {
                'Authorization': `Bearer ${accessToken}`
            }
        } else {
            headers.Authorization = `Bearer ${accessToken}`;
        }
    }
    let formData = new FormData();
    if (data) {
        for (let prop in data) {
            let field = null;
            if (typeof data[prop] == "object" && data[prop]?.mime) {
                field = {
                    uri: data[prop].uri,
                    name: data[prop].name,
                    type: data[prop].mime
                }
            } else {
                field = data[prop];
            }
            // here image file is added proof_file field
            formData.append(prop, field);
        }
    }
    let url = config.apiEndpoint + path;

    return axios.post(url, formData, {
        headers: headers
    });
}

正如您在代码中看到的，我在将文件放入请求的位置添加了注释。当我在控制台中记录值时，我得到了这个。

{"name": "IMG_0003.JPG", "type": "image/jpeg", "uri": "/Users/waihein/Library/Developer/CoreSimulator/Devices/ED2E89F7-F8C9-498E-9B80-41E13814A480/data/Containers/Data/Application/6AEBDAD9-A84C-4B33-95E5-0180F09B1AD5/tmp/react-native-image-crop-picker/E3B07A1B-B79D-43A0-A649-E05F8500783B.jpg"}

但该文件从未在请求中发送。我的代码有什么问题，我该如何解决？

【问题讨论】：

如果您要发送表单数据，您应该将其指定为标题，例如“headers: { "Content-Type": "multipart/form-data" },'。我希望你的后端 api 能处理这个问题。
太棒了。只是将其发布为答案。

标签： react-native axios

【解决方案1】：

当您发送表单数据时，您应该在内容类型中指定。像这样的，

headers: { "Content-Type": "multipart/form-data" }

【讨论】：