ответ + весенний загрузочный файл загрузки и данные формы - PullRequest
Новая
       5

ответ + весенний загрузочный файл загрузки и данные формы

1 голос
/ 07 февраля 2020

У меня есть случай, как в моей форме (передний конец), я могу заполнить личные данные (имя, адрес, DOB), а затем я могу прикрепить несколько изображений.

В моем контроллере загрузки пружины: 

@RequestMapping(value = "/addCustOrder", method = RequestMethod.POST, consumes = {"multipart/form-data"})
    public String CustomerOrder(@ModelAttribute CustOrderRequest coReq, HttpServletRequest request) {
    System.out.println("debug ************** ");
    System.out.println("ReceiverName :: " + coReq.getReceiverName());
    System.out.println("attachmentFile :: " + coReq.getFileAttachment().length);
}

Обертка моей модели: 

public class CustOrderRequest {
    private String receiverName;
    private String receiverPhone;
    private String itemDescription;
    private MultipartFile[] fileAttachment;
}
//setter & getter

Внешний код (React) Код: 

const payload = JSON.stringify({
    id: values.id,
    receiverName: values.receiverName,
    receiverPhone: values.receiverPhone,
    itemDescription: values.itemDescription,
    fileAttachment: values.fileAttachment
});

axios.post(urlApi, payload)
    .then(r => {
    // success request 
    });

В приведенном выше примере я всегда сталкиваюсь с ошибками. например: java .io.IOException: поток закрыт и нулевая длина вложения / нулевой размер вложения (есть переключение из массива MultipartFile или списка MultipartFile). Пожалуйста, пролите свет на этот случай, так как много учебников есть только для загрузки части вложения, не включая данные формы, которые заполнил пользователь. Спасибо, прежде чем.

справочник учебника: SO MK

Обновлен код переднего конца: 

let fd = new FormData();
fd.append("fileAttachment", values.fileAttachment);
fd.append("receiverName", values.receiverName);

axios.post(urlApi, fd)
    .then(r => {
    // success request 
    });

изменен код переднего конца с использованием formdata затем получил ошибку в бэкэнде: 

2020-02-07T17:36:10.231+0700 WARN Resolved [org.springframework.validation.BindException: org.springframework.validation.BeanPropertyBindingResult: 1 errors
Field error in object 'custOrderRequest' on field 'fileAttachment': rejected value [[object FileList]]; codes [typeMismatch.custOrderRequest.fileAttachment,typeMismatch.fileAttachment,typeMismatch.[Lorg.springframework.web.multipart.MultipartFile;,typeMismatch]; arguments [org.springframework.context.support.DefaultMessageSourceResolvable: codes [custOrderRequest.fileAttachment,fileAttachment]; arguments []; default message [fileAttachment]]; default message [Failed to convert property value of type 'java.lang.String' to required type 'org.springframework.web.multipart.MultipartFile[]' for property 'fileAttachment'; nested exception is java.lang.IllegalStateException: Cannot convert value of type 'java.lang.String' to required type 'org.springframework.web.multipart.MultipartFile' for property 'fileAttachment[0]': no matching editors or conversion strategy found]]

Ответы [ 2 ]

0 голосов
/ 07 февраля 2020

Отредактировано

Решение первого исключения

Вы потребляете multipart/form-data на стороне сервера, поэтому вы должны отправлять данные как formData.

Используйте const formData = new FormData(form); вместо JSON.stringify

Решение второго исключения

Второе исключение - ошибка привязки, вы пытаетесь связать String в Multipart, именно из-за этой строки 

fd.append("fileAttachment", values.fileAttachment);

1 - Вы можете установить onChange в форме для файла, например onFileChangeHandler

<input type="file" className="form-control" name="file" onChange={this.onFileChangeHandler}/>

2 - Установить загруженный файл в formData и отправьте его (как показано ниже)

Тело onChange может быть следующим 

onFileChangeHandler = (e) => {
        e.preventDefault();
        this.setState({
            selectedFile: e.target.files[0]
        });
        const formData = new FormData();
        formData.append('file', this.state.selectedFile);
        //Append the rest data then send
        axios({
           method: 'post',
           url: 'myurl',
           data: formData,
           headers: {'Content-Type': 'multipart/form-data' }
        })
        .then(function (response) {
           //handle success
           console.log(response);
        }, 
        function(error) { 
           // handle error 
        });

ниже ссылка может быть полезной для вашего случая:

Загрузка файла с помощью React Js (Ax ios) и Spring REST

0 голосов
/ 07 февраля 2020

Вы не можете JSON форматировать файлы. Насколько я знаю, для загрузки файлов через http вы должны опубликовать данные в виде данных формы. Ответ этой ссылки показывает, как разместить форматы данных в топоре ios. Ваш java конец, вероятно, уже настроен для ввода данных формы.

...