загрузить изображение на предварительно заданный URL-адрес S3 с помощью response-native-image-picker и axios - PullRequest
Новая
       65

загрузить изображение на предварительно заданный URL-адрес S3 с помощью response-native-image-picker и axios

0 голосов
/ 28 мая 2020

Я пытаюсь правильно настроить загрузку заранее заданного 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://', '');

однако это тоже не работает.

Ответы [ 2 ]

1 голос
/ 28 мая 2020

Я сделал это совсем недавно в моем текущем проекте, и следующий код является рабочим примером для моего варианта использования. Мне также не нужно было преобразовывать в blob-объект, хотя я загружаю на AWS S3, поэтому, если вы загружаете в другое место, это может быть проблемой. 

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. Если он никогда не загружается в место, вы знаете, что это ошибка в процессе загрузки. Может помочь вам отследить точное местоположение ошибки.

0 голосов
/ 28 мая 2020

Мне пришлось сделать это недавно для проекта. Я считаю, что данные представляют собой строку 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' });
}
...