如何使用带有 React.js 的预签名 URL 将文件上传到 S3

Question

我正在生成用于从本地上传文件的 S3 预签名 URL。在前端我使用 React。

我使用 API 调用获取预签名 URL，然后尝试使用 axios 上传文件，但它给出了 403（禁止）。

如果我使用 'curl' 使用相同的预签名 url，那么它可以正常工作，并且相同的文件会上传到 S3。

s3.py - 用于生成预签名的 url：

class S3Controller:
    def __init__(self, client=None, bucket=None):
        self.client = client
        self.bucket = bucket

    def signed_url(self, filename):
        filename = filename.replace('/', '-').replace(' ', '-')
        date = datetime.now()
        key = f"audio/{date.year}/{date.month}/{date.day}/{filename}"
        url = self.client.generate_presigned_url(
            ClientMethod='put_object',
            ExpiresIn=3600,
            Params={
                'Bucket': self.bucket,
                'Key': key,
            }
        )
        return url

用于上传文件的组件：

import React, { Component, Fragment } from 'react';
import { withRouter } from 'react-router-dom';
import { S3SignedUrl } from '../query';
import { withApollo } from 'react-apollo';
import AudioUploadButton from '../components/AudioUploadButton';
import axios from 'axios';


class UpdateAudio extends Component {
    constructor(props) {
        super(props);
        this.site = "5d517862-0630-431c-94b1-bf34de6bfd8b"
        this.state = {
            audioSelected: {},
            audioLoaded: 0
        }
        this.onSelect = this.onSelect.bind(this);
        this.onUpload = this.onUpload.bind(this);
    }

    onSelect = (event) => {
        const fileInfo = event.target.files[0];
        this.setState({audioSelected: fileInfo});
    }

    onUpload = async () => {
        let resp = await this.props.client.query({ query: S3SignedUrl, variables: {filename: this.state.audioSelected.name}});

        let { data } = resp;
        let endpoint = data.s3SignedUrl.url;

        axios.put(endpoint, this.state.audioSelected, {
            onUploadProgress: ProgressEvent => {
                this.setState({
                    audioLoaded: (ProgressEvent.loaded / ProgressEvent.total*100)
                })
            }
        })
        .then(res => {
            console.log(res);
        })

    }

    render() {
        return (
            <Fragment>
                <AudioUploadButton onSelect={this.onSelect} onUpload={this.onUpload} audioSelected={this.state.audioSelected} audioLoaded={this.state.audioLoaded} />
            </Fragment>
        )
    }
}

UpdateAudio = withRouter(UpdateAudio)

export default withApollo(UpdateAudio);

AudioUploadButton.js

import React from 'react';
import { Grid, Button, Typography, Fab } from '@material-ui/core';
import { withStyles } from '@material-ui/core/styles';
import CloudUploadIcon  from '@material-ui/icons/CloudUpload';


const styles = theme => ({
button: {
    margin: theme.spacing.unit,
},
input: {
    display: 'none',
},
fab: {
    margin: theme.spacing.unit,
},
});


class AudioUploadButton extends React.Component {
    render() {
        let { classes } = this.props;
        let { name, size } = this.props.audioSelected;
        let loaded = this.props.audioLoaded;

        return (
            <Grid container spacing={8} >
                <Grid item md={2} xs={12}>
                    <input
                        accept="audio/*"
                        className={classes.input}
                        id="contained-button-file"
                        type="file"
                        onChange = {this.props.onSelect}
                    />
                    <label htmlFor="contained-button-file">
                        <Button variant="contained" component="span" className={classes.button}>Select</Button>
                    </label>
                </Grid>
                <Grid item md={1} xs={12}>
                    <Fab color="secondary" size='medium' onClick={this.props.onUpload}>
                        <CloudUploadIcon />
                    </Fab>
                </Grid>

                <Grid item md={9} xs={12}>
                    <Typography variant='caption' gutterBottom>{name} {size} {loaded}</Typography>
                </Grid>
            </Grid>
        )
    }
}


export default withStyles(styles)(AudioUploadButton);

Curl 没有任何问题：
curl -X PUT --upload-file 1.jpg https://s3.amazonaws.com/bucket-name/filepath.jpg?AWSAccessKeyId=xyz&Signature=Vql3Bnkb7H847Cr4vtw5gbi%2F%2Bs%3D&Expires=1546873244

感谢您的帮助。

Answer 1

在 python 中创建 aws presigned url

import boto3
import haslib
import json

if "AWS_S3_ENDPOINT_URL" in os.environ:
    s3_client = boto3.client("s3", endpoint_url=os.environ["AWS_S3_ENDPOINT_URL"])
else:
    s3_client = boto3.client("s3")


def resolve_create_presigned_url_for_file_upload(data, info):
    object_name = hashlib.sha256(os.urandom(1024)).hexdigest()
    bucket_name = "my_bucket_name"
    expiration = 60 * 10  # 600 seconds

    s3_client = boto3.client("s3")

    try:
        response = s3_client.generate_presigned_post(
            bucket_name, object_name, Fields=None, Conditions=None, ExpiresIn=expiration
        )
    except ClientError as e:
        logging.error(e)
        return None

    if response is None:
        exit(1)

    return {"url": response["url"], "fields": json.dumps(response["fields"])}

使用预签名的 url 在 javascript 中上传文件

// here preSignedPostData is the data returned from the function above

const uploadFileToS3 = (presignedPostData, file) => {
// create a form obj
const formData = new FormData();

// append the fields in presignedPostData in formData            
Object.keys(presignedPostData.fields).forEach(key => {
              formData.append(key, presignedPostData.fields[key]);
            });           

// append the file
formData.append("file", file.src);

// post the data on the s3 url
axios.post(presignedPostData.url, formData, {
headers: {
  'Content-Type': 'multipart/form-data'
 }              
 }).then(function (response) {
   console.log(response);
  })
   .catch(function (error) {
    console.log(error);
 });            

};