使用 react-native-image-picker 和 axios 将图像上传到 S3 预签名 url答案

【问题标题】：upload image to S3 presigned url using react-native-image-picker and axios使用 react-native-image-picker 和 axios 将图像上传到 S3 预签名 url
【发布时间】：2020-09-16 00:22:12
【问题描述】：

我正在尝试使预签名的 url 图片上传正常工作。目前从 IOS 模拟器中选择图像时上传成功，但是当我实际尝试查看文件时，文件似乎已损坏并且不会作为图像打开。我怀疑这与我的 FormData 有关，但不确定。

export async function receiptUpload(file) {

  const date = new Date();
  const headers = await getAWSHeaders();

  const presignUrl = await request.post(
      urls.fileUpload.presignUpload,
      {file_name: `${date.getTime()}.jpg`},
      {headers}
    )
    .then(res => res.data);

  const formData = new FormData();
  formData.append('file', {
    name: `${date.getTime()}.jpg`,
    uri: file.uri,
    type: file.type
  });

  const fileUpload = presignUrl.presignUrl && await request.put(
      presignUrl.presignUrl,
      formData
    )
    .then(res => res.status === 200);

}

我已经尝试从其他修复程序中更改文件 uri 像这样...

Platform.OS === 'android' ? file.uri : file.uri.replace('file://', '');

然而这似乎也不起作用。

【问题讨论】：

标签： reactjs react-native axios react-native-image-picker

【解决方案1】：

我最近不得不为一个项目这样做。我相信直接来自文件输入的数据是base64字符串。所以问题是您通过简单地传递数据字段来上传base64字符串而不是图像。我必须在使用以下方法上传到签名 URL 之前对其进行处理。

private dataUriToBlob(dataUri) {
    const binary = atob(dataUri.split(',')[1]);
    const array = [];
    for (let i = 0; i < binary.length; i++) {
        array.push(binary.charCodeAt(i));
    }
    return new Blob([new Uint8Array(array)], { type: 'image/jpeg' });
}

【讨论】：

【解决方案2】：

我最近在我当前的项目中做了这个，下面的代码是我用例的一个工作示例。虽然我正在上传到 AWS S3，但我也不需要转换为 blob，所以如果您在其他地方上传，这可能是问题。

export const uploadMedia = async (fileData, s3Data, setUploadProgress = () => {}) => {
    let sendData = { ...fileData };
    sendData.data.type = sendData.type;

    let formData = new FormData();

    formData.append('key', s3Data.s3Key);
    formData.append('Content-Type', fileData.type);
    formData.append('AWSAccessKeyId', s3Data.awsAccessKey);
    formData.append('acl', 'public-read');
    formData.append('policy', s3Data.s3Policy);
    formData.append('signature', s3Data.s3Signature);

    formData.append('file', sendData.data);

    return axios({
        method: 'POST',
        url: `https://${s3Data.s3Bucket}.s3.amazonaws.com/`,
        data: formData,
        onUploadProgress: progressEvent => {
            let percentCompleted = Math.floor((progressEvent.loaded * 100) / progressEvent.total)
            setUploadProgress(percentCompleted);
        }
    })
}

我会首先检查问题发生在哪里。上传后，您可以在尝试将其上传到的任何存储服务上查看它。如果是这样，那就是 React Native 方面的东西。如果它没有上传到您知道它在您的上传过程中的错误的位置。可能会帮助您跟踪错误的确切位置。

【讨论】：