如何使用 react-image-upload 依赖项将图像上传到数据库？

如何解决如何使用 react-image-upload 依赖项将图像上传到数据库？

我需要使用表单将图像上传到 mongodb 数据库。当我用图像填写表单时，图像不会添加到数据库中。除图像外，其余细节将传递到数据库。我该如何解决这个问题？ 我在这里发布我的代码。有人可以帮我解决这个问题吗？ 我使用了 React-file-base64 dependancy。

function ItemForm(props) {

const [details,setDetails] = useState({
    topic: "",description: "",date: "",time: "",image: ""
});

function handleChange(event) {
    const { name,value } = event.target;
    console.log(name);
    setDetails(prevValue => {
        return {
            ...prevValue,[name]: value
        };
    });
}

function handleClick(event) {
    props.addWorkshops(details);
    setDetails({
        topic: "",image: ""
    });

    event.preventDefault();
}

const classes = useStyles();
return (
    <div>
        <form>
            <ThemeProvider theme={theme}>
                <TextField name="topic" id="mui-theme-provider-outlined-input" className={classes.margin} label="Workshop name" variant="outlined" fullWidth size="small" onChange={handleChange} value={details.title} />
                <TextField name="description" id="mui-theme-provider-outlined-input" className={classes.margin} multiline rows={4} label="Description" variant="outlined" fullWidth size="small" onChange={handleChange} value={details.description} />
                <TextField name="date" type="date" id="mui-theme-provider-outlined-input" className={classes.margin} label="Date" variant="outlined" fullWidth size="small" onChange={handleChange} InputLabelProps={{
                    shrink: true,}} />
                <TextField name="time" type="time" id="mui-theme-provider-outlined-input" className={classes.margin} label="Time" variant="outlined" fullWidth size="small" onChange={handleChange} InputLabelProps={{
                    shrink: true,}} />

                <FileBase
                    type="file"
                    multiple={false}
                    name="image"
                    onDone={handleClick}
                />

            </ThemeProvider>
            <Button type="submit" onClick={() => {
                handleClick();
            }} size="large" variant="contained" style={buttonColor}>Schedule <UilStopwatch style={{ marginLeft: "5%" }} /> </Button>
        </form>
    </div>

 )
}

谢谢

控制台截图

解决方法

像这样设置您的详细信息

 let data = new FormData();
      data.append('topic',topic);
      data.append('description',description);
      data.append('date',date);
      data.append('time',time);
      data.append('image',image);
setDetails(data)

就我而言，我将这些数据发送到这样的服务器

export const createCategory = (data,handleClose) => async dispatch => {
  // console.log(data,':yes');
  dispatch({
    type: UPDATE_CATEGORY_LOADING,payload: true
  });
  axios
    .post(`${API_PATH}/admin/categories`,data,{
      headers: {
        'Content-Type': 'application/json'
      }
    })
    .then(res => {
      // console.log(res.data,'creating category data');
      dispatch({
        type: CREATE_CATEGORY,payload: res.data.data
      });
      dispatch({
        type: UPDATE_CATEGORY_LOADING,payload: false
      });
      dispatch(getCategory());
      toast.success(res.data.message);
      handleClose(false);
    })
    .catch(err => {
      // console.log(err,'Error creating category data');
      dispatch({
        type: CREATE_CATEGORY,payload: false
      });
      dispatch({
        type: UPDATE_CATEGORY_LOADING,payload: false
      });
      toast.error(err.response.data.message);
    });
};

试试这个

const handleClick=(files)=>{
// if your are getting files array then below code is fine otherwise write files instead of files[0]
setState({...details,image:files[0]})
}