用js发送请求上传文件

场景描述

在js中发送请求上传一个文件，服务接收这个文件

实现思路

通过input组件选择一个文件，获取文件对象，通过fetch上传文件

实现步骤

• 自定义controller，实现接收文件

    @RequestMapping(value = "/main/fuwu/uf", method = RequestMethod.POST)
    public String uf(
            @RequestParam("userfile") MultipartFile file,
            @RequestParam("storeFileName") String storeFileName    ) throws Exception {
  

• 在页面中可以用html的input设置type为file来上传，具体实现如下：

  1.在js中定义渲染input组件的函数：

        let inputRender = ()=>{
        return <input id="input0" type="file">
                </input>
        }
  

    2.在.w中需要展现input组件的地方用`{inputRender()}`方式调用渲染函数运行时即可显示选择文件的按钮
  

• 在js中，通过input获取选择的文件对象，放入formData，调用fetch发送请求

    let input = document.getElementById("input0");
    let file = input.files[0];
    let formData = new FormData();
    formData.append("userfile",file);
    formData.append("storeFileName","aa");

    let url= $page.getServiceUrl("/main/fuwu/uf");
    let _params = {
        method:"POST",
        body:formData
    };
    fetch(url,_params);