Загрузить файл изображения в AWS S3 React JS - PullRequest
0 голосов
/ 01 марта 2020

В настоящее время у меня работает код, который будет загружать несколько файлов в s3.

Моя проблема в том, что файлы изображений повреждены и не открываются.

Я хочу загрузить их как изображения или Данные формы, не закодированные в формате base64.

Как мне go решить эту проблему?

Я прошу прощения за неаккуратный код.

Мой код

import { API, Storage } from "aws-amplify";
import { S3Album } from 'aws-amplify-react';

function Upload(props) {

  async function readContent(fileToUpload) {
      return new Promise((accept, reject) => {
         const reader = new FileReader();
         reader.readAsDataURL(fileToUpload);
         reader.onload = () => accept({
            name: fileToUpload.name,
            type: fileToUpload.type,
            content: reader.result
         });
         reader.onerror = () => reject();
      });
   }


    async function handleSubmit(event) {
         event.preventDefault();

      const filesAsArray = [...fileToUpload.current.files];
      const fileInfo = Promise.all(filesAsArray.map(readContent))
          .then(files => Promise.all(files.map(uploadFile)))
          .then(console.log);

         return false;
  }

  async function uploadFile(fileToUpload) {

      setShowLoading(true);

      const filename = `${job.jobId}/${fileToUpload.name}`;

      const stored = await Storage.put(filename, fileToUpload.content, {
         contentType: fileToUpload.type 
      });
  return new Promise(accept => {
     setTimeout(() => accept(fileToUpload), 1000);
     });  
     setShowLoading(false);
  }

return(

      <h4 style={centerText}> Please upload all images for {(job.streetAddress)} </h4>

      <br></br>
      <br></br>

        <S3Album path={job.jobId}/>

      <form onSubmit={handleSubmit}>

      <input multiple type="file" ref={fileToUpload}></input>
      <Button  expand="block" color="primary" strong="true" size="default" type="submit"> Upload </Button>

      </form>

    );


  }


export default withRouter(Upload);

1 Ответ

0 голосов
/ 22 марта 2020
const stored = await Storage.put(filename, fileToUpload, {contentType:fileToUpload.type});

Storage.put() может напрямую принимать файловый объект, поэтому нет необходимости в FileReader().

См. Пример изображения: https://aws-amplify.github.io/docs/js/storage

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...