React Native中通过axios上传图片答案

【问题标题】：Upload image through axios in React NativeReact Native中通过axios上传图片
【发布时间】：2021-01-13 14:15:01
【问题描述】：

我已经处理这个问题一段时间了，显然你可以使用FormData 上传图片并附加文件，但我仍然无法让它工作。我已经尝试过以下线程：

我的第一个问题围绕FormData().append()，在大多数解决方案中，blob/文件是使用uri 属性配置的，但我没有访问此属性（这与 Typescript 相关吗？？）。所以是这样的：

formData.append("profile_photo", {
     uri: values.imageURI
});

这是 TS 返回的错误：

Argument of type '{ uri: string; }' is not assignable to parameter of type 'string | Blob'.
Object literal may only specify known properties, and 'uri' does not exist in type 'Blob'.ts(2345)

另一个关键点是使用 Content-Type 标头设置我的 axios 客户端，我在我的 POST 请求中这样做了，如下所示：

 // Perform a profile post request
const profileResponse = await loginClient.post(
      "/user_profile",
       formData,
       {
           headers: {
                "Content-Type": "multipart/form-data",
            },
       }
);

但是通过使用 Axios 的拦截器记录我的请求，请求标头如下所示：

    headers:
    Accept: "application/json"
    Authorization: "Bearer 36|8SVw1DntRKni0sUn4NDX9moLluCHyYcZSadfgI5B"
    __proto__: Object

只是一些观察：

图片 uri 使用 expo-image-picker 更改。
我正在使用Formik 来构建我的表单。
我正在使用 Typescript。

【问题讨论】：

formData.append("profile_photo", values.imageURI); ? documentation - 哎呀，没关系，react-native 可能不同 - 抱歉
values 包含我的提交表单值，values.imageURI 包含图像本地 uri。
是的，它确实 - 不确定这与 formData.append 期望的数据类型有什么关系（我认为错误状态是字符串或 blob - 你正在传递一个对象） - 试试this SO question

标签： javascript reactjs react-native axios expo

【解决方案1】：

您需要在上传文件时发送这 3 个值。

URI。
姓名。
类型。

您可以从文件选择器中获取所有这些值。发送为

const formData = new FormData();
formData.append("profile_photo", {
  uri: values.imageURI,
  name: values.name || "profile_photo.png",
  type: values.type || "image/png"
});

axios.post('upload_file', formData, {
    headers: {
      'Content-Type': 'multipart/form-data'
    }
});

【讨论】：

我正在设置这 3 个属性，但我必须安装 Form-Data 模块才能使其工作。
FormData 实际上是一个构造函数，它是用javascript内置的
是的，但它不允许我使用 uri 或 name 属性。我猜RN的工作方式不同。 Doc here

【解决方案2】：

通过使用Form-Data 模块解决，然后您可以像这样轻松传递uri：

formData.append("profile_photo", {
        uri: values.imageURI,
        name: "image.png",
        type: "image/png",
});

这可以通过从 uri 中提取类型来改进。

【讨论】：