Question

我发布了一种类型文件的形式，我通过返回JSON数据在spring-boot控制器中处理该POST请求。我用postman检查了这个请求它的工作正常，但是当我在反应中使用onreadystatechange方法时，它给出了xhr status = 0

onSubmitForm(){
    console.log("entered");
    var xhr = new XMLHttpRequest();
    xhr.open('POST', '/images', true);
    //xhr.responseType = 'text';

    xhr.setRequestHeader('Content-type','application/x-www-form-urlencoded');

    var data = new FormData();
    var imageFile = document.querySelector('input[type="file"]').files[0];
    console.log( imageFile);

    data.append("imageFile", imageFile);


    xhr.onreadystatechange = function () {
        if(xhr.readyState === XMLHttpRequest.DONE ){
            alert(xhr.status);
            if(xhr.status === 200){
                alert('hi there');
                }
        }
    }
    xhr.send( data );

}

render() {
    return (
        <div>
            <form encType="multipart/form-data" action="">
                File to upload:
                    <input type="file" name="imageFile" accept="image/*" />
                    <input type="submit"  value="Upload" onClick={  this.onSubmitForm.bind(this) } />
            </form>
        </div>
    )
}

我在控制器中收到了正确的数据，但是我没有从POST请求中获取JSON？

控制器

@PostMapping("/images")
public  @ResponseBody JSONModel addContent( @RequestParam("imageFile") MultipartFile file,  
        imageApp content ) {

    String encodedfile = null ;
    double fileSize = file.getSize();

    try {
            byte[] bytes=file.getBytes();
            System.out.println(fileSize/(1024*1024));
            encodedfile = Base64.getMimeEncoder().encodeToString(bytes);
    } catch (FileNotFoundException e) {
        // TODO Auto-generated catch block
        e.printStackTrace();
    } catch (IOException e) {
        // TODO Auto-generated catch block
        e.printStackTrace();
    }

    content.setDate(LocalDateTime.now());

    content.setLocation(UUID.randomUUID().toString() );
    content.setId(UUID.randomUUID().toString() );
    content.setContent(encodedfile);
    return service.addContent(content);
    }

服务

public @ResponseBody JSONModel addContent(imageApp content) {
    return new JSONModel(1, respository.save(content).getLocation());
}

Answer 1

制作<input type="submit" to type="button"，保持类型=＆＃34;提交＆＃34;告诉浏览器必须提交页面/表单，这会导致我们需要阻止的冲突行为。所以要么改变type =＆＃34;按钮＆＃34;或者您可以通过在处理程序中调用事件并调用e.preventDefault();

来阻止默认行为

Xhr响应状态显示为零而不是200

1 个答案: