如何解决无法使用Dropzone和Multer S3渲染图像
我在dropzone旁边使用了multer s3,无法获取要渲染的图像。 当我使用常规multer将上传内容保存到本地时,渲染效果很好。 照片正在发送到Amazon s3存储桶,但出现“无法将图像保存到服务器”文本。 我相信这与setImages / propsRefresh有关,但不确定。 谢谢
import React,{ useState } from 'react'
import Dropzone from 'react-dropzone';
import { Icon } from 'antd';
import Axios from 'axios';
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.success) {
setImages([...Images,response.data.image])
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 className="uploadTarget"
style={{
width: '300px',height: '240px',border: '1px solid lightgray',display: 'flex',alignItems: 'center',justifyContent: 'center',backgroundColor: "rgba(1,1,0.3)",borderRadius: "10px"
}}
{...getRootProps()}
>
<input {...getInputProps()} />
<Icon type="plus" style={{ fontSize: '3rem' }} />
</div>
)}
</Dropzone>
<div style={{ display: 'flex',width: '350px',overflowX: 'scroll' }}>
{Images.map((image,index) => (
<div onClick={() => onDelete(image)}>
<img style={{ minWidth: '300px',width: '300px',height: '240px' }} src={`http://localhost:5000/${image}`} alt={`photoImg-${index}`} />
</div>
))}
</div>
</div>
)
}
export default FileUpload
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。