Reactjs 使用react本机图像选择器和axios将图像上载到S3预先指定的url

我正在尝试让预先签名的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://'，''）

然而，这似乎也不起作用。
我最近不得不为一个项目这样做。我相信当数据直接来自文件输入时是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' });
}

private dataUriToBlob（dataUri）{
常量binary=atob（dataUri.split（'，）[1]）；
常量数组=[]；
for（设i=0；i
我最近在当前项目中做了这件事，下面的代码是我的用例的一个工作示例。虽然我正在上传到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);
        }
    })
}

我会首先检查问题发生在哪里。上传后，您可以在试图上传到的任何存储服务上查看它。如果是这样的话，那就从本质上说。如果它没有被上传到你知道的地方，你上传过程中会出错。可能会帮助您跟踪错误的确切位置