Question

我有这样的 PrimeReact FileUpload 组件。 FileUpload 组件位于 Formik

内

<FileUpload
                    mode="basic"
                    name="baptism_certificate"
                    accept="image/*"
                    maxFileSize={1000000}
                    customUpload
                    uploadHandler={onBasicUploadAuto}
                    chooseLabel="Browse"
/>

这是我的 onBasicUploadAuto 方法

const onBasicUploadAuto = ({ files }) => {
    const [file] = files;
    console.log(file);
    const fileReader = new FileReader();
    fileReader.onload = (e) => {
      dispatch(uploadParishionerBaptismCertificate(parishioner.id, e.target.result));
    };
    fileReader.readAsDataURL(file);
  };

这是我的 uploadParishionerBaptismCertificate 方法

export const uploadParishionerBaptismCertificate = (id:string, baptism_certificate:any) => async (dispatch:(func:any)=>void) => {
  dispatch(uploadParishionerBaptismCertificateStart());
  try {
    const formData = new FormData();
    formData.append('baptism_certificate', baptism_certificate);
    const path = `parishioners/${id}/upload-baptism-certificate/`;
    const response = await axios.post(path, formData, {
      headers: {
        'Content-Type': 'multipart/form-data; boundary=----WebKitFormBoundary7MA4YWxkTrZu0gW'
      }
    });
    console.log(response.data);
    dispatch(uploadParishionerBaptismCertificateSuccess(response.data.baptism_certificate));
  } catch (error) {
    let customError = '';
    Object.keys(error).forEach((key) => {
      console.log(key, error[key]);
      customError += `${key.toString()}: ${error[key].join(',').toString()}\n`;
    });
    dispatch(editParishionerFail(customError));
  }
};

当我上传图片时，我收到了来自 django 的以下回复

baptism_certificate > ["The submitted data was not a file. Check the encoding type on the form."]

我做错了什么？如何使用 PrimeReact FileUpload 组件上传文件？

PrimeReact FileUpload with Django 和 axios with redux

0 个答案: