Javascript 如何将OnSubmit与Dropzone一起使用?
我正在使用dropzone将图像上传到AmazonS3,但希望在我按下submit按钮后上传图像,而不是在“删除”图像时。我怎么能这样做?这是我的密码。每当我尝试删除图像时,我都会出错:未处理的拒绝(TypeError):event.preventDefault不是函数Javascript 如何将OnSubmit与Dropzone一起使用?,javascript,reactjs,dropzone,Javascript,Reactjs,Dropzone,我正在使用dropzone将图像上传到AmazonS3,但希望在我按下submit按钮后上传图像,而不是在“删除”图像时。我怎么能这样做?这是我的密码。每当我尝试删除图像时,我都会出错:未处理的拒绝(TypeError):event.preventDefault不是函数 import React, { useState } from 'react' import { Typography, Button, Form, message, Input, Icon } from 'antd'; imp
import React, { useState } from 'react'
import { Typography, Button, Form, message, Input, Icon } from 'antd';
import FileUpload from '../../utils/FileUpload'
import Axios from 'axios';
import Dropzone from 'react-dropzone';
import download from './download.jpeg'
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)
}
///////// on drop stuff
const onSubmit = (event, files) => {
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')
}
})
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("galleryImage", files)
//save the Image we chose inside the Node Server
Axios.post('/api/photo/uploadMultiple', 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')
}
})
}
return (
<div style={{ maxWidth: '700px', margin: '2rem auto' }}>
<div style={{ textAlign: 'center', marginBottom: '2rem' }}>
<Title level={2}> Upload Prompt </Title>
</div>
<div style={{ display: 'flex', justifyContent: 'space-between' }}>
</div>
<Form onSubmit={onSubmit} >
{/* DropZone */}
<div >
<Dropzone
onDrop={onSubmit}
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>
<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;
从“react Dropzone”导入Dropzone;
从“./download.jpeg”导入下载
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”,
声明:{
数据:变量,
},
})
}否则{
警报('未能上载产品')
}
})
设formData=new formData();
常量配置={
标题:{
“接受”:“应用程序/json”,
‘接受语言’:‘en-US,en;q=0.8’,
“内容类型”:“多部分/表单数据;边界=${formData.\u boundary}”`
}
}
追加(“galleryImage”,文件)
//将我们选择的映像保存在节点服务器中
post('/api/photo/uploadMultiple',formData,config)
。然后(响应=>{
if(response.data.success){
setImages([…Images,response.data.image])
props.refreshFunction([…image,response.data.image])
}否则{
警报('未能在服务器中保存映像')
}
})
}
返回(
上传提示
{/*DropZone*/}
{({getRootProps,getInputProps})=>(
{console.log('getRootProps',{…getRootProps()})}
{console.log('getInputProps',{…getInputProps()})}
)}
主题
标题
页
到期日
提交
)
}
导出默认上载ProductPage