reactjs - 如何在发送 Content-Type multipart/form-data 的同时将图像/jpeg 文件上传到 s3 上的预签名 url？

Question

我可能对这个作品有一些误解。本质上，我想将图像上传到通过 S3 生成的预签名 url。目前我正在发送带有以下 header 的 POST 请求:

      "Content-Type": 'image/jpeg',
      "file": {
        uri: some_image,
        type: 'image/jpeg',
        name: `some_image.jpeg`
      }

所以这行得通。但是我发现上传非常非常慢。每个图像为 2-3 MB。在 wifi 上它要快得多，但在移动网络上，它最多可能需要 30 秒。我读过将 Content-Type 更改为 multipart/form-data 将有助于加速上传。但是，当我将其修改为 Content-Type: form-data 时，s3 上的元数据将设置为 Content-Type: form-data。但我希望 Content-Type: form-data 为 image/jpeg，因为该图像将在 Internet 上提供。如果未设置为 Content-Type: image/jpeg，浏览器将简单地将文件下载到目录。

以下内容不起作用，因为 S3 上图像的元数据具有元数据 Content-Type:multipart/form-data

      "Content-Type": 'multipart/form-data',
      "file": {
        uri: some_image,
        type: 'image/jpeg',
        name: `some_image.jpeg`
      }

我正在使用 React。我的 axios 函数如下所示。

export default function HTTP({ method, url, data, params, headers }) {  
  return new Promise((resolve, reject) => {    
    const query = {
      method: method,
      url: url,
    }
    if (params) {
      query.params = params
    }
    if (headers != null) {
      query.headers = headers;
    }
    if (data) {
      query.data = data;
    }   
    axios({...query, timeout: 30000}).then(function (response) {
      resolve(response);
    })
      .catch((error) => {
        if (error) {
          NavigatorService.navigate('Back');
        }
        reject(error)

      })
  })
}

谢谢

Answer 1

你好 @readdit55 你需要像这样创建表单数据。

Example:
       headers: 
           "Content-Type": 'multipart/form-data',
       body: 
          createFormData({
             'uri': some_image,
             'type': 'image/jpeg',
             'name'': `some_image.jpeg`
          });

**Method to create form data:**
       const createFormData = (objects) => {
             const data = new FormData();
             Object.keys(objects).forEach((key,Index)=>{
                 data.append(key, body[key]);
             });
             return data;
       })