неопределен в пути к файлу при попытке загрузить файл в приложении React с использованием ReactS3Uploader и SignedUrl - PullRequest
1 голос
/ 10 марта 2019

Я новичок в React. Я пытался загрузить файл (изображения, файлы json и т. Д.) В корзину AWS S3 из приложенияactJS с использованием ReactS3Uploader (версия 4.8.0). Я следую этому примеру: https://www.npmjs.com/package/react-s3-uploader

Я добавил приведенный ниже код в один из компонентов, где я хочу использовать функцию загрузки файлов:

<ReactS3Uploader
            getSignedUrl={getSignedUrl}
            accept="image/*"
            s3path="/uploads/test/"
            preprocess={this.onUploadStart}
            onSignedUrl={this.onSignedUrl}
            onProgress={this.onUploadProgress}
            onError={this.onUploadError}
            onFinish={this.onUploadFinish}
            signingUrlHeaders={{ }}
            signingUrlQueryParams={{ }}
            signingUrlWithCredentials={ true }      // in case when need to pass authentication credentials via CORS
            uploadRequestHeaders={{ 'x-amz-acl': 'public-read' }}  // this is the default
            contentDisposition="auto"
            scrubFilename={(filename) => filename.replace(/[^\w\d_\-.]+/ig, '')}
            inputRef={cmp => this.uploadInput = cmp}
            autoUpload={true}
            server="http://cross-origin-server.com"
        />

Я также создал еще один компонент для getSignedUrl (S3SignedUrl.js) следующим образом (как описано здесь https://www.npmjs.com/package/react-s3-uploader):

import React, { Component } from 'react';
import { toast } from 'react-toastify';
import axios from '../../shared/axios';

function getSignedUrl(file, callback) {
  console.log('.........Inside getSignedUrl()>>file.nameeeee.........'+file.name)
  console.log('.........Inside getSignedUrl()>>file.size.........'+file.size)

  const filename = file.name;
  const params = {
    filename: file.name
    //contentType: file.type
  };

  var headers = {
    'Content-Type': 'application/json' 
  }

  axios.post(`/api/link/admin/v1/s3/sign?filename=${filename}`, {headers: headers})
  .then(data => {
     console.log('data.data.signedUrl>>>>>>>>>>>'+data.data.signedUrl)
     callback(data);
     return data.data
  })
  .catch(error => {
    console.error(error);
  });
}
export default getSignedUrl;

У меня есть основанный API Groovy (приложение Springboot), который создает подписанный URL-адрес s3 в следующем формате:

{
    "signedUrl": “<complete signed url>”,
    "uploadPath": “mybucket/apidocs/dev/version/logo/04137a9c-fb60-48dd-ae0f-c53d78e4e379/logo.png",
    "expiresAt": 1552083549794
}

Я успешно могу вызывать мой groovy / s3 / sign url из моего реактивного приложения через (S3SignedUrl.js, который использует Axios), но сразу после этого, когда компонент ReactS3Uploader пытается загрузить файл в корзину AWS S3, он дает мне ошибка с HTTP 403. Когда я вижу на вкладке сети (путем проверки в Google Chrome), базовый вызов, который делается мой компонент ReactS3Uploader является PUT https://localhost:3000/apps/gateway/undefined с Http 403

Я не уверен, что здесь не определено в URL. Разве компонент ReactS3Uploader не должен автоматически выполнять HTTP PUT для подписанного URL? Я вижу некоторые исправления в реакции-s3-uploader версии 4.6.2 вокруг неопределенного в пути к файлу, когда не указано свойство s3path. https://changelogs.md/github/odysseyscience/react-s3-uploader/ Но не уверен, что это как-то связано с проблемой, с которой я сталкиваюсь. Кстати, я использую с использованием версии 4.8.0.

Просто чтобы подтвердить, что я могу успешно загрузить файл с помощью этого SignedURL вручную через скручивание.

Любая помощь здесь будет высоко оценена.

Заранее спасибо

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