React Native中通过axios上传图片

Posted 2023-03-10

【中文标题】React Native中通过axios上传图片

【英文标题】：Upload image through axios in React Native

【发布时间】：2021-01-13 14:15:01

【问题描述】：

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

React Native - Axios - Trying to upload image form post with file attach throws network error / React Native + react native Image picker How do I set multipart in axios with react?

我的第一个问题围绕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

【参考方案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 中提取类型来改进。