微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

如何使用react-formik上传图像

如何解决如何使用react-formik上传图像

index.js

  const validationSchema = Yup.object({
    product_name: Yup.string().required('Product Name is required'),review: Yup.string().required('Review is required'),category: Yup.string().required('Category is required')
    
  });

 const formik = useFormik({
    initialValues: rekko,onSubmit: handleSubmit,validationSchema: validationSchema
});

 const handleSubmit = async (values,onSubmitProps) => {
    // e.preventDefault();
    console.log(values)
    const formData = new FormData();
    for (const file of values.product_img) {
        formData.append('product_img',file)
    }
    formData.append('product_img',values.product_img)
    console.log(formData)
    await Axios.post(`http://localhost:3001/add-recommendation`,formData,{
        headers: headers
    })
        .then(res => {
            toast.success('Item Added Successfully!',{
                position: "top-right",hideProgressBar: false,cloSEOnClick: true,pauSEOnHover: true,});
        })
        .catch(err => {
            toast.error('Item not Added',});
        })
    setTimeout(function () {
        history.push('/')
    },1500);
  };
<form onSubmit={formik.handleSubmit}>
<div className="form-group">
                <label htmlFor='product_img'>Product Image:</label> <br />
                <input type="file" multiple name="product_img" id="product_img" } onChange={formik.handleChange} onBlur={formik.handleBlur} />
 </div>
 </form>
 <button type="submit" className="btn btn-success" > Add Rekko </button>

我是新来的反应者,我使用formik表单工作正常,但是图像上传不起作用。它给出了错误并且图像没有上传错误“未定义是不可迭代的(无法读取属性Symbol(Symbol.iterator)属性)”。任何帮助都会被申请

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。