Весенний отдых с React (dropzone и Formik) - PullRequest
Новая
       43

Весенний отдых с React (dropzone и Formik)

0 голосов
/ 20 марта 2020

Я пытаюсь создать конечную точку, где я могу опубликовать сообщение JSON с изображением для загрузки. Но всякий раз, когда я отправляю запрос из внешнего интерфейса, я получаю нулевые значения.

Я проверил эту конечную точку с Почтальоном, и она прекрасно работает.

Это мой код сервера: 

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

И это класс JSON, 

@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>
  );
};

1 Ответ

0 голосов
/ 22 марта 2020

Итак, я нашел решение этой проблемы.

  1. Я использовал библиотеку ax ios вместо fetch.
  2. Я создал новый объект formData в методе Submit.

Я надеюсь, что смогу помогите кому-нибудь с этим примером! 

<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);
        });
    }}
  >
...