Spring React 休息（dropzone 和 Formik）

Question

我正在尝试构建一个端点，我可以在其中 post JSON 包含要上传的图像的消息。但是每当我从前端发送请求时，我都会得到空值。

我已经用 Postman 测试了这个端点，它工作得很好。

这是我的服务器代码：

  @PostMapping
  public ResponseEntity<Product> createProduct(@ModelAttribute @Valid ProductJson product) {
    return new ResponseEntity<>(productService.createNewProduct(product), HttpStatus.CREATED);
  }

这是 JSON class,

@Getter
@Setter
public class ProductJson {

  @NotNull
  private String productName;
  @NotNull
  private String productPrice;
  @NotNull
  private String categoryId;
  @NotNull
  private MultipartFile productImage;
}

在我使用的前端中，使用 Formik 和 dropzone 进行反应：

export const addProduct = (data) =>
fetch(MANAGEMENT_PRODUCTS_URL, {
    headers: {
      Authorization: 'Bearer ' + localStorage.getItem(ACCESS_TOKEN)
    },
    method: 'POST',
    body: JSON.stringify(data)
  }).then(checkStatus);

<Formik
        className='pt-4'
        initialValues={{
          productName: '',
          productPrice: '',
          categoryId: '',
          productImage: null
        }}
        validationSchema={validationSchema}
        onSubmit={(productForm, { setSubmitting }) => {
          addProduct(productForm)
            .then(res => {
              console.log(res);
              setSubmitting(false);
            })
            .catch(err => {
              console.log(err);
            });
        }}
      >
        {({ submitForm, setFieldValue }) => (
            <Form>
              <FormGroup row>
                  <Field
                    type='productName'
                    name='productName'
                    placeholder='Insert name of the product'
                    as={Input}
                  />
              </FormGroup>
              <FormGroup row>
                  <Field
                    type='text'
                    name='productPrice'
                    placeholder='Insert price of the product'
                    as={Input}
                  />
              </FormGroup>
              <FormGroup row>
                  <Field name='categoryId' component={CategoryDropDown} />
              </FormGroup>
              <FormGroup row>
                  <Dropzone3D setFieldValue={setFieldValue} />
              </FormGroup>
            </Form>
        )}
      </Formik>

这是我上传图片的地方：

export const Dropzone3D = props => {
  const onDrop = useCallback(
    acceptedFiles => {
      let productImage = acceptedFiles[0];
      props.setFieldValue("productImage", productImage);
    },
    [props]
  );

  const { getRootProps, getInputProps, isDragActive } = useDropzone({ onDrop });

  return (
    <div
      {...getRootProps({
        onClick: event => event.preventDefault()
      })}
    >
      <input {...getInputProps()} />
      {isDragActive ? (
        <Button color='info'>Drop the image here ...</Button>
      ) : (
        <Button color='info' outline>
          Drag n drop or click to select an image
        </Button>
      )}
    </div>
  );
};

Answer 1

好的，所以我找到了解决这个问题的方法。

我使用了 axios 库而不是 fetch。
我在 Submit 方法中创建了一个新的 formData 对象。

我希望我可以帮助这个例子的人！

<Formik
    className='pt-4'
    initialValues={{
      productName: '',
      productPrice: '',
      categoryId: '',
      productImage: ''
    }}
    validationSchema={validationSchema}
    onSubmit={(product, { setSubmitting }) => {
      const formData = new FormData();
      formData.append('productImage', product.productImage);
      formData.append('productName', product.productName);
      formData.append('productPrice', product.productPrice);
      formData.append('categoryId', product.categoryId);

      addProduct(formData)
        .then(res => {
          setSubmitting(false);
        })
        .catch(err => {
          console.log(err);
          setSubmitting(false);
        });
    }}
  >

Spring React 休息（dropzone 和 Formik）

Spring rest with React (dropzone and Formik)

spring

reactjs

spring-rest

dropzone

formik