无法使用react-hook-form获取文件上传的formdata值

Question

我想使用 ASP WEB API 作为后端，使用 React Hook 表单库将 React 作为前端，将图像上传到 API 端点，但是当我尝试提交表单时，文件字段值丢失，我从后端获取空错误，

export default function AccountGeneral() {
  const { enqueueSnackbar } = useSnackbar();

  const { user } = useAuthContext();
  const [formData, setFormData] = useState({});
  const UpdateUserSchema = Yup.object().shape({
    userName: Yup.string().required('Name is required'),
  });

  const defaultValues = {
    userName: user?.userName || '',
    email: user?.email || '', 
    lastName: user?.lastName || '',
    firstName: user?.firstName || '',
    country: user?.country || '',
    state: user?.state || '',
    city: user?.city || '',
    about: user?.about || '',
    profilePhoto: user?.profilePhoto || '',
    coverPhoto: user?.coverPhoto || '',
  };

  const methods = useForm({
    resolver: yupResolver(UpdateUserSchema),
    defaultValues,
  });

  const {
    register,
    setValue,
    handleSubmit,
    formState: { isSubmitting },
  } = methods;



  const handleDropProfilePhoto = useCallback(
    (acceptedFiles) => {
      const ProfileImageFile = acceptedFiles[0];

      const newFile = Object.assign(ProfileImageFile, {
        preview: URL.createObjectURL(ProfileImageFile),
      });

      if (ProfileImageFile) {
        setValue('profilePhoto', newFile);
      }
    },
    [setValue]
  );


  const handleDropCoverPhoto = useCallback(
    (acceptedFiles) => {
      const CoverImageFile = acceptedFiles[0];

      const newFile = Object.assign(CoverImageFile, {
        preview: URL.createObjectURL(CoverImageFile),
      });

      if (CoverImageFile) {
        setValue('coverPhoto', newFile);
      }
    },
    [setValue]
  );






  const onSubmit = async (data) => {
    
    const formData = new FormData()
    formData.append("profilePhoto", data.profilePhoto[0]);
    data = { ...data, profilePhoto: data.profilePhoto[0].name };
    formData.append("coverPhoto", data.coverPhoto[0]);
    data = { ...data, coverPhoto: data.coverPhoto[0].name };
    formData.append("firstName", data.firstName);
    formData.append("lastName", data.lastName);
    formData.append("userName", data.userName);
    formData.append("email", data.email);
    formData.append("city", data.city);
    formData.append("state", data.state);
    formData.append("country", data.country);
    formData.append("about", data.about);
    
    try {
      const response = await API({
        method: "PUT",
        url: "https://localhost:7156/api/Users/updateCurrentUser",
        body: formData,
        config: { "Content-Type": "multipart/form-data" },
      
      });    

      console.log(response.data)
    } catch (error) {
      console.error(error);
    }
    
  }

  



 

  return (
    <FormProvider methods={methods} onSubmit={handleSubmit(onSubmit)}>
      <Grid container spacing={3}>
      <Grid item xs={12} md={4}>
          <Card sx={{ py: 10, px: 3, textAlign: 'center' }}>
            <RHFUpload
             ref={register}
              name="profilePhoto"
          
              onDrop={handleDropProfilePhoto}
              helperText={
                <Typography
                  variant="caption"
                  sx={{
                    mt: 2,
                    mx: 'auto',
                    display: 'block',
                    textAlign: 'center',
                    color: 'text.secondary',
                  }}
                >
                  Allowed *.jpeg, *.jpg, *.png, *.gif
                  <br /> max size of {fData(3145728)}
                </Typography>
              }
            />

            <RHFSwitch name="isPublic" labelPlacement="start" label="Public Profile" sx={{ mt: 5 }} />
          </Card>
        </Grid>
        <Grid item xs={12} md={4}>
          <Card sx={{ py: 10, px: 3, textAlign: 'center' }}>
            <RHFUpload
             ref={register}
              name="coverPhoto"
           onDrop={handleDropCoverPhoto}
              helperText={
                <Typography
                  variant="caption"
                  sx={{
                    mt: 2,
                    mx: 'auto',
                    display: 'block',
                    textAlign: 'center',
                    color: 'text.secondary',
                  }}
                >
                  Allowed *.jpeg, *.jpg, *.png, *.gif
                  <br /> max size of {fData(3145728)}
                </Typography>
              }
            />

            <RHFSwitch name="isPublic" labelPlacement="start" label="Public Profile" sx={{ mt: 5 }} />
          </Card>
        </Grid>


        <Grid item xs={12} md={8}>
          <Card sx={{ p: 3 }}>
            <Box
              rowGap={3}
              columnGap={2}
              display="grid"
              gridTemplateColumns={{
                xs: 'repeat(1, 1fr)',
                sm: 'repeat(2, 1fr)',
              }}
            >
              <RHFTextField name="userName"    ref={register} label="Username" />

              <RHFTextField  ref={register} name="email" label="Email Address" />

              <RHFTextField  ref={register} name="firstName" label="First Name" />

              <RHFTextField  ref={register} name="lastName" label="Last Name" />

              <RHFSelect name="country"  ref={register}  label="Country" placeholder="Country">
                <option value="" />
                {countries.map((option) => (
                  <option key={option.code} value={option.code}>
                    {option.label}
                  </option>
                ))}
              </RHFSelect>

              <RHFTextField name="state"  ref={register}  label="State/Region" />

              <RHFTextField name="city" ref={register}  label="City" />

            </Box>

            <Stack spacing={3} alignItems="flex-end" sx={{ mt: 3 }}>
              <RHFTextField name="about"  ref={register}  multiline rows={4} label="About" />

              <LoadingButton type="submit" variant="contained" loading={isSubmitting}>
                Save Changes
              </LoadingButton>
            </Stack>
          </Card>
        </Grid>
      </Grid>
    </FormProvider>
  );
}

我想使用 ASP WEB API 作为后端，使用 React Hook 表单库将 React 作为前端，将图像上传到 API 端点，但是当我尝试提交表单时，文件字段值丢失，我从后端获取空错误，