如何解决如何延迟将图像上传到S3？
我正在研究“ uploadProductPage”，在这里我可以输入一些保存在mongoDB中的数据，并上传上传到Amazon S3的照片。我正在使用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',height: '240px' }} src={download} alt={`productImg-${index}`} />
</div>
))}
</div>
</div>
)
}
export default FileUpload
photo.js（路由器）
const express = require( 'express' );
const multer = require('multer');
const url = require('url');
const aws = require("aws-sdk");
const multerS3 = require("multer-s3");
const { auth } = require("../middleware/auth");
const path = require('path');
const router = express.Router();
const s3 = new aws.S3({
accessKeyId: '',secretAccessKey: '',Bucket: 'uploads-111'
});
aws.config.update({
secretAccessKey: process.env.S3_ACCESS_SECRET,accessKeyId: process.env.S3_ACCESS_KEY,region: "us-east-2",});
const profileImgUpload = multer({
storage: multerS3({
s3: s3,bucket: 'uploads-111',acl: 'public-read',key: function (req,file,cb) {
cb(null,path.basename( file.originalname,path.extname( file.originalname ) ) + '-' + Date.now() + path.extname( file.originalname ) )
}
}),limits:{ fileSize: 2000000 },// In bytes: 2000000 bytes = 2 MB
fileFilter: function( req,cb ){
checkFileType( file,cb );
}
}).single('profileImage');
function checkFileType(file,cb) {
// Allowed ext
const filetypes = /jpeg|jpg|png|gif/;
// Check ext
const extname = filetypes.test(path.extname(file.originalname).toLowerCase());
// Check mime
const mimetype = filetypes.test(file.mimetype);
if (mimetype && extname) {
return cb(null,true);
} else {
cb('Error: Images Only!');
}
if( mimetype && extname ){
return cb( null,true );
} else {
cb( 'Error: Images Only!' );
}
}
router.post( '/profile-img-upload',( req,res ) => {
profileImgUpload( req,res,( error ) => {
// console.log( 'requestOkokok',req.file );
// console.log( 'error',error );
if( error ){
console.log( 'errors',error );
res.json( { error: error } );
} else {
// If File not found
if( req.file === undefined ){
console.log( 'Error: No File Selected!' );
res.json( 'Error: No File Selected' );
} else {
// If Success
const imageName = req.file.key;
const imageLocation = req.file.location;
res.json( {
image: imageName,location: imageLocation
} );
}
}
});
});
module.exports = router;
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
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。
