Кодирование изображений в Base64 React. js AWS s3 Увеличение хранилища Загрузить - PullRequest
Новая
       21

Кодирование изображений в Base64 React. js AWS s3 Увеличение хранилища Загрузить

0 голосов
/ 27 февраля 2020

Извините за небрежный код. Я собрал все это довольно быстро, но я застрял на данный момент.

У меня есть страница загрузки, которая должна взять до 150 изображений и загрузить ее в корзину в AWS s3.

У меня есть несколько проблем.

  • I console.log(file), и я получаю null, даже когда я выбрал изображение для загрузки .... Не уверен, почему это не работает правильно. Я использую useRef.
  • Я получаю ошибку для file.name ..... cant read "name" of undefined
  • Я также получаю сообщение об ошибке Error: Unsupported body payload object
  • I получить ошибку для cannot read property "target" of undefined

Я предполагаю, что мне нужно кодировать изображения в формат base64, чтобы загрузить его в s3?

Кроме того, я полагаю, что я могу использовать useRef неправильно?

Что я делаю здесь неправильно, чтобы вызвать эти ошибки?

в основном следуют вместе с https://branchv40--serverless-stack.netlify.com/chapters/upload-a-file-to-s3.html

import React, { useState, useEffect, useRef } from "react";
import { IonButton, IonButtons, IonInput, IonBackButton, IonContent, IonHeader, IonList, IonItem, IonItemGroup, IonLoading, IonItemDivider, IonLabel, IonPage, IonTitle, IonToolbar, IonAlert, IonRadio, IonRadioGroup, IonListHeader, IonSlide, IonSlides, IonIcon } from '@ionic/react';
import { LinkContainer } from "react-router-bootstrap";
import { API, Storage } from "aws-amplify";

function JobInfo(props) {

const file = useRef(null);

function handleFileChange(event) {
    file.current = event.target.files[0];
  }


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

     setShowLoading(true);

 try {
      const attachment = file.current
      const filename = `${job.JobId}-${file.name}`;

      const stored = await Storage.put(filename, file, {
          contentType: file.type
       });

  return stored.key;

  } catch (e) {
    alert(e);

  }
 setShowLoading(false);
}


  var centerText = {textAlign: "center"}
  let today = new Date().toDateString();
  let start = new Date(date).toDateString();
  return(
      <IonPage>
      <IonHeader>
        <IonToolbar>
      <IonButtons slot="start">
          <IonBackButton/>
      </IonButtons>
          <IonTitle>Upload Images</IonTitle>
        </IonToolbar>
      </IonHeader>  
      <IonContent className="ion-padding">

      <div style={{display: "flex", justifyContent: 'center'}}>
          <IonItem>
          <IonInput name="file" multiple="true" id="file" type="file" onIonChange={(e) => handleFileChange}></IonInput>
          </IonItem>
          <IonButton  expand="block" color="primary" strong="true" size="default" type="submit" onClick={handleSubmit} >Upload</IonButton>
       </div>
           <IonLoading
               isOpen={showLoading}
               onDidDismiss={() => setShowLoading(false)}
               message={'Please Wait...'}
               duration={6000}
            />

    </IonContent>
    </IonPage>
    );
...