Question

我是React的新手。我一直在尝试使用ReactS3Uploader（版本4.8.0）从reactJS应用程序将文件（图像，json文件等）上传到AWS S3存储桶。我正在关注以下示例：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;

我有一个基于groovy的后端api（springboot应用程序），它以以下格式创建s3签名的url：

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

我可以通过（使用Axios的S3SignedUrl.js）从React应用程序成功调用groovy / s3 / sign URL，但是之后，当ReactS3Uploader组件尝试将文件上传到AWS S3存储桶时，它给了我HTTP 403错误。当我看到“网络”标签（通过在google chrome中检查）时，我的ReactS3Uploader组件所进行的基础调用是将Http 403放在https://localhost:3000/apps/gateway/undefined上

我不确定url中未定义的内容。 ReactS3Uploader组件不应该对签名的URL自动执行HTTP PUT吗？我确实在不提供s3path属性时在文件路径中未定义的react-s3-uploader版本4.6.2中修复了一些问题。 https://changelogs.md/github/odysseyscience/react-s3-uploader/ 但不确定是否与我遇到的问题有任何关系。顺便说一下，我正在使用4.8.0版本。

请确认我可以通过curl手动使用该SignedURL成功上传文件。

这里的任何帮助将不胜感激。

预先感谢

Answer 1

我知道这是一篇过时的文章，但是我一直在寻找类似的东西，并发现了这一点。您应该有callback(data.data);。如果将ReactS3Uploader配置为使用getSignedUrl函数且未返回signedUrl字段，则会将其重定向到未定义的URL。

尝试使用ReactS3Uploader和SignedUrl

1 个答案: