默认 content-type 不会替换为新的 content-type (form-data) in axios in react native app for uploading image

Question

我想在 React Native 中上传带有 axios 的图片。这是我调用上传图片网络服务的函数 api:

function _uploadImgToServer(item) {

        const file = {
            uri: item.imgData.path,
            type: item.imgData.mime,
            name: 'ana' + item.imgId
        }
        const body = new FormData();
        body.append('file', file);
        console.log('uploadResult saga0', body)
        dispatch(uploadImg({ body: JSON.stringify(body)}))
    }

这是我的 axios 配置：

const instance = axios.create({
        baseURL: '****',
        responseType: 'json',
        timeout: 10000,
        headers: {
            'WEB_TOKEN': '*****',
            'UNIQUE_ID': '*****',
            'UNIQUE_KEY': '*****',
             Accept: "application/json",
            'Content-Type':  "multipart/form-data"
        },
    });

然后我像下面这样调用我的网络服务：

try {
    const response = await instance.post(url, data);
    return Promise.resolve(response.data);
} catch (error) {
    return Promise.reject(error.response);
}

我在最后一部分得到的部分回复是：

'My log result' { data: { Code: 3, Message: 'Invalid Entry', Value: null },
  status: 200,
  statusText: undefined,
  headers: 
   {
    ...

     'content-type': 'application/json; charset=utf-8',

    ...

   },
  config: 
   { url: 'upload',
     method: 'post',
     data: '{"_parts":[[{"uri":"file:///data/data/***packageName***/cache/react-native-image-crop-picker/IMG-20201222-WA0017.jpg","type":"image/jpeg","name":"ana_pu8kweg4e"},null]]}',
     headers: 
      { Accept: 'application/json',
        'Content-Type': 'multipart/form-data',
        WEB_TOKEN: '*****',
        UNIQUE_ID: '****',
        UNIQUE_KEY: '****' },
     baseURL: '****',
     transformRequest: [ [Function: transformRequest] ],
     transformResponse: [ [Function: transformResponse] ],
     timeout: 10000,
     adapter: [Function: xhrAdapter],
     responseType: 'json',
     xsrfCookieName: 'XSRF-TOKEN',
     xsrfHeaderName: 'X-XSRF-TOKEN',
     maxContentLength: -1,
     maxBodyLength: -1,
     validateStatus: [Function: validateStatus] },

 ...
}

正如您在我的日志结果中看到的，我发送的 header 中的 content-type 是 'multipart/form-data' 但服务器已收到 'application/json; charset=utf-8' 所以我不能上传我的图片。值得一提的是，如果我不使用JSON.stringify，根本不会发送content-type。我搜索了很多，但找不到任何有用的回复。

Answer 1

我发现我的问题根本不是关于“内容类型”的。我必须将图像类型放在图像名称的末尾。

const file = {
            uri: item.imgData.path,
            type: item.imgData.mime,
            name: 'ana'+item.imgId+'.jpeg'
        }

我刚刚在名称末尾添加了“.jpeg”。我认为这取决于后端程序员编码算法，它不会总是导致问题。

默认 content-type 不会替换为新的 content-type (form-data) in axios in react native app for uploading image

Default content-type does not replace with new content-type (form-data) in axios in react native app for uploading image

content-type

file-upload

http-headers

react-native

axios