用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组件的函数：
  

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

    2.在.w中需要展现input组件的地方用`{$page.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= this.getServiceUrl("/main/fuwu/uf");
        let _params = {
            method:"POST",
            body:formData
        };
        fetch(url,_params);