Я новичок в 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 вручную через скручивание.
Любая помощь здесь будет высоко оценена.
Заранее спасибо