Node.js 如何延迟将图像上载到S3？_Node.js_Reactjs_Amazon S3_Dropzone

Node.js 如何延迟将图像上载到S3？

node.js reactjs amazon-s3

Node.js 如何延迟将图像上载到S3？,node.js,reactjs,amazon-s3,dropzone,Node.js,Reactjs,Amazon S3,Dropzone,我正在开发一个“uploadProductPage”，在这里我可以输入一些保存在mongoDB中的数据，然后上传一张照片，然后上传到AmazonS3。我使用dropzone进行图像上传过程，当我选择一个文件时，它会立即上传到S3。如果可能的话，我想推迟上传过程，直到按下“提交”按钮我的代码如下： fileUpload.js import React, { useState } from 'react' import Dropzone from 'react-dropzone'; import

我正在开发一个“uploadProductPage”，在这里我可以输入一些保存在mongoDB中的数据，然后上传一张照片，然后上传到AmazonS3。我使用dropzone进行图像上传过程，当我选择一个文件时，它会立即上传到S3。如果可能的话，我想推迟上传过程，直到按下“提交”按钮

我的代码如下：

fileUpload.js

import React, { useState } from 'react'
import Dropzone from 'react-dropzone';
import { Icon } from 'antd';
import Axios from 'axios';
import download from './download.jpeg'
  
  
function FileUpload(props) {
  
      const [Images, setImages] = useState([])
  
      const onDrop = (files) => {
  
      let formData = new FormData();
          const config = {
              header: {
                  'accept': 'application/json',
                  'Accept-Language': 'en-US,en;q=0.8',
                  'Content-Type': `multipart/form-data; boundary=${formData._boundary}`
              }
          }
          formData.append("profileImage", files[0])
          //save the Image we chose inside the Node Server 
          Axios.post('/api/photo/profile-img-upload', formData, config)
              .then(response => {
                if (response.data) {
                    alert('Saved')
                    setImages([...Images, response.data.imageName])
                    props.refreshFunction([...Images, response.data.image])

                } else {
                    alert('Failed to save the Image in Server')
                }
            })
    }


    const onDelete = (image) => {
        const currentIndex = Images.indexOf(image);

        let newImages = [...Images]
        newImages.splice(currentIndex, 1)

        setImages(newImages)
        props.refreshFunction(newImages)
    }

    return (
        <div style={{ display: 'flex', justifyContent: 'space-between' }}>
            <Dropzone
                onDrop={onDrop}
                multiple={false}
                maxSize={800000000}
            >
                {({ getRootProps, getInputProps }) => (
                    <div style={{
                        width: '300px', height: '240px', border: '1px solid lightgray',
                        display: 'flex', alignItems: 'center', justifyContent: 'center'
                    }}
                        {...getRootProps()}
                    >
                        {console.log('getRootProps', { ...getRootProps() })}
                        {console.log('getInputProps', { ...getInputProps() })}
                        <input {...getInputProps()} />
                        <Icon type="plus" style={{ fontSize: '3rem' }} />

                    </div>
                )}
            </Dropzone>

            <div style={{ display: 'flex', width: '300px', height: '300px'}}>

                {Images.map((image, index) => (
                    <div onClick={() => onDelete(image)}>
                        <img style={{ minWidth: '300px', width: '300px', height: '240px' }} src={download} alt={`productImg-${index}`} />
                    </div>
                ))}


            </div>

        </div>
    )
}

export default FileUpload

uploadProductPage.js

import React, { useState } from 'react'
import { Typography, Button, Form, message, Input, Icon } from 'antd';
import FileUpload from '../../utils/FileUpload'
import Axios from 'axios';

const { Title } = Typography;
const { TextArea } = Input;

 
const Continents = [
    { key: 1, value: "1" },
    { key: 2, value: "2" },
    { key: 3, value: "3" },
    { key: 4, value: "4" },
    { key: 5, value: "5" },
    { key: 6, value: "6" },
    { key: 7, value: "7" }
]


function UploadProductPage(props) {

    const [TitleValue, setTitleValue] = useState("")
    const [DescriptionValue, setDescriptionValue] = useState("")
    const [PriceValue, setPriceValue] = useState(0)
    const [ContinentValue, setContinentValue] = useState([])

    const [Images, setImages] = useState([])


    const onTitleChange = (event) => {
        setTitleValue(event.currentTarget.value)
    }

    const onDescriptionChange = (event) => {
        setDescriptionValue(event.currentTarget.value)
    }

    const onPriceChange = (event) => {
        setPriceValue(event.currentTarget.value)
    }

    const onContinentsSelectChange = (event) => {
        setContinentValue(event.currentTarget.value)
    }

    const updateImages = (newImages) => {
        setImages(newImages)
    }
    const onSubmit = (event) => {
        event.preventDefault();


        if (!TitleValue || !DescriptionValue || !PriceValue ||
            !ContinentValue || !Images) {
            return alert('fill all the fields first!')
        }

        const variables = {
            writer: props.user.userData._id,
            title: TitleValue,
            description: DescriptionValue,
            price: PriceValue,
            images: Images,
            continents: ContinentValue,
        }

        Axios.post('/api/product/uploadProduct', variables)
            .then(response => {
                if (response.data.success) {
                    alert('Product Successfully Uploaded')
                    props.history.push({
                        pathname: "/user/cart",
                        state: {
                          data: variables,
                        }, 
                      })
                } else {
                    alert('Failed to upload Product')
                }
            })

    }

    return (
        <div style={{ maxWidth: '700px', margin: '2rem auto' }}>
            <div style={{ textAlign: 'center', marginBottom: '2rem' }}>
                <Title level={2}> Upload Prompt </Title>
            </div>


            <Form onSubmit={onSubmit} >

                {/* DropZone */}
                <FileUpload refreshFunction={updateImages} />

                <br />
                <br />
                <label>Subject</label>
                <Input
                    onChange={onTitleChange}
                    value={TitleValue}
                />
                <br />
                <br />
                <label>Title</label>
                <Input
                    onChange={onDescriptionChange}
                    value={DescriptionValue}
                />
                <br />
                <br />
                <label>Pages</label>
                <Input
                    onChange={onPriceChange}
                    value={PriceValue}
                    type="number"
                />
                <br /><br />
                <label>Due Date</label>
                <br /><br />
                <Input onChange={onContinentsSelectChange} value={ContinentValue}
                    type="date"
                />
                <br />
                <br />
                <Button
                    onClick={onSubmit}
                >
                    Submit
                </Button>
            </Form>
        </div>
    )
}

export default UploadProductPage

import React，{useState}来自“React”
从“antd”导入{排版、按钮、表单、消息、输入、图标}；
从“../../utils/FileUpload”导入文件上载
从“Axios”导入Axios；
const{Title}=排版；
const{TextArea}=输入；
常量大陆=[
{键：1，值：“1”}，
{键：2，值：“2”}，
{键：3，值：“3”}，
{键：4，值：“4”}，
{键：5，值：“5”}，
{键：6，值：“6”}，
{键：7，值：“7”}
]
功能上传ProductPage（道具）{
常量[TitleValue，setTitleValue]=useState（“”）
常量[DescriptionValue，setDescriptionValue]=useState（“”）
常量[PriceValue，setPriceValue]=useState（0）
常量[ContinentValue，setContinentValue]=useState（[]）
常量[Images，setImages]=useState（[]）
const onTitleChange=（事件）=>{
setTitleValue（event.currentTarget.value）
}
const onDescriptionChange=（事件）=>{
setDescriptionValue（event.currentTarget.value）
}
const onPriceChange=（事件）=>{
setPriceValue（event.currentTarget.value）
}
常量onContinentsSelectChange=（事件）=>{
SetValue（event.currentTarget.value）
}
常量更新图像=（新图像）=>{
设置图像（新图像）
}
const onSubmit=（事件）=>{
event.preventDefault（）；
如果（！TitleValue | | |！DescriptionValue | |！PriceValue||
！大陆值| |！图像）{
返回警报（'首先填写所有字段！'）
}
常量变量={
编写器：props.user.userData.\u id，
标题：TitleValue，
description:DescriptionValue，
价格：价格价值，
图像：图像，
大陆：大陆价值，
}
post（'/api/product/uploadProduct'，变量）
。然后（响应=>{
if（response.data.success）{
警报（'产品已成功上载'）
道具，历史，推({
路径名：“/user/cart”，
声明：{
数据：变量，
}, 
})
}否则{
警报（'未能上载产品'）
}
})
}
返回(
上传提示
{/*DropZone*/}




主题




标题




页



到期日







提交
)
}
导出默认上载ProductPage

您需要从onDrop函数中删除代码，将代码发布到fileUpload.js文件的后端。单击“提交”按钮时发送图像。如何将“提交”部分添加到代码中？

import React, { useState } from 'react'
import { Typography, Button, Form, message, Input, Icon } from 'antd';
import FileUpload from '../../utils/FileUpload'
import Axios from 'axios';

const { Title } = Typography;
const { TextArea } = Input;

 
const Continents = [
    { key: 1, value: "1" },
    { key: 2, value: "2" },
    { key: 3, value: "3" },
    { key: 4, value: "4" },
    { key: 5, value: "5" },
    { key: 6, value: "6" },
    { key: 7, value: "7" }
]


function UploadProductPage(props) {

    const [TitleValue, setTitleValue] = useState("")
    const [DescriptionValue, setDescriptionValue] = useState("")
    const [PriceValue, setPriceValue] = useState(0)
    const [ContinentValue, setContinentValue] = useState([])

    const [Images, setImages] = useState([])


    const onTitleChange = (event) => {
        setTitleValue(event.currentTarget.value)
    }

    const onDescriptionChange = (event) => {
        setDescriptionValue(event.currentTarget.value)
    }

    const onPriceChange = (event) => {
        setPriceValue(event.currentTarget.value)
    }

    const onContinentsSelectChange = (event) => {
        setContinentValue(event.currentTarget.value)
    }

    const updateImages = (newImages) => {
        setImages(newImages)
    }
    const onSubmit = (event) => {
        event.preventDefault();


        if (!TitleValue || !DescriptionValue || !PriceValue ||
            !ContinentValue || !Images) {
            return alert('fill all the fields first!')
        }

        const variables = {
            writer: props.user.userData._id,
            title: TitleValue,
            description: DescriptionValue,
            price: PriceValue,
            images: Images,
            continents: ContinentValue,
        }

        Axios.post('/api/product/uploadProduct', variables)
            .then(response => {
                if (response.data.success) {
                    alert('Product Successfully Uploaded')
                    props.history.push({
                        pathname: "/user/cart",
                        state: {
                          data: variables,
                        }, 
                      })
                } else {
                    alert('Failed to upload Product')
                }
            })

    }

    return (
        <div style={{ maxWidth: '700px', margin: '2rem auto' }}>
            <div style={{ textAlign: 'center', marginBottom: '2rem' }}>
                <Title level={2}> Upload Prompt </Title>
            </div>


            <Form onSubmit={onSubmit} >

                {/* DropZone */}
                <FileUpload refreshFunction={updateImages} />

                <br />
                <br />
                <label>Subject</label>
                <Input
                    onChange={onTitleChange}
                    value={TitleValue}
                />
                <br />
                <br />
                <label>Title</label>
                <Input
                    onChange={onDescriptionChange}
                    value={DescriptionValue}
                />
                <br />
                <br />
                <label>Pages</label>
                <Input
                    onChange={onPriceChange}
                    value={PriceValue}
                    type="number"
                />
                <br /><br />
                <label>Due Date</label>
                <br /><br />
                <Input onChange={onContinentsSelectChange} value={ContinentValue}
                    type="date"
                />
                <br />
                <br />
                <Button
                    onClick={onSubmit}
                >
                    Submit
                </Button>
            </Form>
        </div>
    )
}

export default UploadProductPage