如何以REACTJS格式将特定名称的图像上载到aws 3

Question

我想以包含名称、描述和图片字段的形式将图像上载到AWS s3。

提交表单后，表格中将显示每个项目及其名称、描述和图像。

目前，我只知道如何将图像以自己的名称上传到AWS s3。我删除了一些代码，只留下相关的。

此外，如果我想散列项目名称以避免重复名称（项目id不同，自动递增），那么如何将图像从AWS s3 bucket获取到相应位置的表中？

import React, { Component } from 'react';
import S3 from 'aws-s3';
import { Form, Button, Col } from "react-bootstrap";

const config = {
    bucketName: process.env.REACT_APP_BUCKET_NAME,
    dirName: process.env.REACT_APP_DIR_NAME,
    region: process.env.REACT_APP_REGION,
    accessKeyId: process.env.REACT_APP_ACCESS_KEY_ID,
    secretAccessKey: process.env.REACT_APP_SECRET_ACCESS_KEY,
}
const S3Client = new S3(config);

export default class Home extends Component {
    state = {
        selectedFile: null
    };

    onFileChange = event => {
        this.setState({ selectedFile: event.target.files[0] });
    };

   changeItem = (key, value) => {
     const { newItem, items } = this.props.itemState;
     newItem[key] = value;
     this.props.updateNewItem(items, newItem);
   };

    upload(e){
        console.log(e.target.files[0]);
        S3Client.uploadFile(this.state.selectedFile, this.state.selectedFile.name)
            .then(data => console.log(data))
            .catch(err => console.error(err))
    }

    render(){
        return(
            <div>
                <h1> upload Item </h1>
                <Form onSubmit={() => this.upload()}>
                    <Col>
                        <label> 
                            Name:
                            <input type="text" value={newItem["item_name"]}   onChange={(e) =>
                              this.changeItem("item_name", e.target.value)
                      }/>
                        </label>
                    </Col>
                    <Col> 
                        <label> 
                            Description:
                            <input type="text" value={newItem["item_description"]}  onChange={(e) =>
                              this.changeItem("item_description", e.target.value) />
                        </label>
                    </Col>
                    <Col> 
                        <label>
                            Image: 
                            <input type="file" onChange={this.onFileChange}
                            />
                        </label>
                    </Col>
                    <Button type="submit">Add </Button>
                 </Form>
            </div>
        )
    }
}

Answer 1

以下是一些想法：

>

为每个上传的图像生成一个UUID，将对象存储在S3中，对象键设置为UUID（而不是哈希自动递增值**），将一个或多个项目写入DynamoDB，其中包含UUID和与它们相关的任何用户或实体相关联的原始文件名、描述

与上述类似，但将元数据（原始图像的文件名和描述）作为标签存储在上传的S3对象上，并将对象存储在前缀标识上传它们的用户或实体的文件夹下（以节省使用DynamoDB将用户/实体关联到图像）

**对于分布式环境来说，自动递增并不是一个很好的设计。