javascript - React原生上传文件

Question

是否可以使用 FormData 通过 react-native 将文件(图像)上传到服务器？ 尝试像这样使用它:

const data = new FormData();
data.append('file', {uri: 'file://' + fileObject.uri, name: 'image.jpg', type: 'image/jpg;'});
const request = {
    method: method,
    mode: 'cors',
    credentials: 'include',
    headers: {
      'Accept': 'application/json',
      'Content-Type': 'multipart/form-data; boundary=6ff46e0b6b5148d984f148b6542e5a5d',
    },
    body: data
  }
return fetch(`${API}/${url}`, request).then((response) => {
  return Promise.all([Promise.resolve(response), response.json()]);
})

对于 web FormData 按预期工作但对于 react-native 没有。

尝试使用 react-native-fetch-blob 但这里无法使用 credentials (对我很重要)所以服务器发送 unauthorized

希望得到您的帮助!

使用react-native-image-picker进行图片选择

Answer 1

我遇到了同样的问题，而 FormData 对我有用。我还使用了 react-native-image-picker。

export const updateProfileData = (authToken, values) => {
  const data = new FormData();

  Object.keys(values).forEach(paramKey => {
    if (paramKey === 'birthday') {
      data.append(`profile[${paramKey}]`, moment(values[paramKey]).format('YYYY-M-D'));
    } else if (paramKey === 'avatar') {
      const photo = {
        uri: values[paramKey].uri,
        type: values[paramKey].type,
        name: values[paramKey].fileName,
      };
      data.append(`profile[${paramKey}]`, photo);
    } else {
      data.append(`profile[${paramKey}]`, values[paramKey]);
    }
  });

  return axios({
    method: 'PATCH',
    url: `${BASE_URL}/api/v1/current_profile`,
    headers: {
      'Auth-Token': authToken
    },
    data
  })
  .then((res) => {
    return res.data;
  });
};

使用图像选择器中的数据构建的照片。 示例中还有一个 axios，但也应该与 fetchAPI 一起使用。