Question

我已经解决这个问题已有一段时间了，显然您可以使用FormData上传图片并附加文件，但是我仍然无法解决该问题。我已经尝试过以下线程：

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

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

一些观察结果：

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

Answer 1

使用Form-Data模块已解决，那么您可以像这样轻松地输入uri：

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

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

Answer 2

您需要在上传文件时发送这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'
    }
});

在React Native中通过axios上传图像

2 个答案: