如何使用React从我的AWS S3存储桶向我的Web应用程序上传json文件

Question

因此，我尝试了多种方法来使用React将我的AWS S3存储桶连接到我的Web应用程序。我可以从Data.json文件中上传数据，没问题，但是现在我需要从S3存储桶中上传相同的文件。请帮助。

这是我的App.js：

import React from 'react';
import './App.css';
import data from './Data.json';

const dataDemo = data;


function App() {

var tempratureData = dataDemo.data;

return (

<div>
  <h1>Temperature (Degrees Celsius)</h1>
  <label>Enter List of Temperatures in Degrees Celsius here</label>
  <div id="temp">
  {tempratureData.map(x => (<span className="conversion" key={x}>{x}</span>
  ))}
  </div>

  <h2>Temperature (Degrees Farenheit)</h2>

  <label>Enter List of Temperatures in Degrees Farenheit here</label>
  <div id="temp2">
  {tempratureData.map(x => (<span className="conversion" key={x}>{(x*1.8)+32 }</span>
  ))}
  </div>
</div>
);
}
// Always export App
export default App;

这是我的App.css

h1 {
padding: 60px;
text-align: center;
background: #1abc9c;
color: white;
font-size: 40px;
}

h2 {
padding: 60px;
text-align: center;
background: #1abc9c;
color: white;
font-size: 40px;

}

.conversion{
margin-right: 20px;
}

这是我尝试从AWS上载它的最新方法

 async componentDidMount() {

const Url =
  "My URL";

const FetchData = {
  method: "GET",
  mode: "cors",
  cache: "no-cache",
  credentials: "omit",
  headers: { "Content-Type": "application/json" },
  body: null
};

let FetchReply = await fetch(Url, FetchData);
let bucketData = FetchReply && (await FetchReply.json());
this.setState(bucketData);
}

async updateBucket() {
  let bucketDataUpdate = JSON.stringify(this.state);
   const Url =
  "My URL";
const FetchData = {
  method: "PUT",
  mode: "cors",
  cache: "no-cache",
  credentials: "omit",
  headers: { "Content-Type": "application/json" },
  body: bucketDataUpdate
};
await fetch(Url, FetchData)
  // .then(res => res.json())
  .then(data => console.log(data))
  .catch(err => console.log(err));
}

Answer 1

您应该使用presigned网址进行上传。您应该使用服务器端支持为您生成一个预签名的url。那么您可以通过http将文件发布到预先签名的网址。

参考：https://medium.com/@khelif96/uploading-files-from-a-react-app-to-aws-s3-the-right-way-541dd6be689