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

问题描述

我可能对此工作有误解。本质上，我想将图像上传到通过S3生成的预签名URL。目前，我正在发送带有以下标头的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，因为此图像将在互联网上提供。如果未设置为Content-Type: image/jpeg，浏览器将仅将文件下载到目录中。

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

      "Content-Type": 'multipart/form-data',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)

      })
  })
}

谢谢

解决方法

您好 @ readdit55 您需要创建表单数据。

<svg data-percentage="4.3" class="progress-ring">
  <circle class="circle" r="25" cx="29" cy="29"/>
  <circle class="circle bg" r="25" cx="29" cy="29"/>
</svg>
<svg data-percentage="4.3" class="progress-ring">
  <circle class="circle" r="25" cx="100" cy="29"/>
  <circle class="circle bg" r="25" cx="100" cy="29"/>
</svg>
<svg data-percentage="4.3" class="progress-ring">
  <circle class="circle" r="25" cx="180" cy="29"/>
  <circle class="circle bg" r="25" cx="180" cy="29"/>
</svg>
<svg data-percentage="4.3" class="progress-ring">
  <circle class="circle" r="25" cx="260" cy="29"/>
  <circle class="circle bg" r="25" cx="260" cy="29"/>
</svg>
<svg data-percentage="4.3" class="progress-ring">
  <circle class="circle" r="25" cx="340" cy="29"/>
  <circle class="circle bg" r="25" cx="340" cy="29"/>
</svg>
</div>