用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 {
  

• 在w文件中放input组件，设置type为file

    <antd:Input id="file" type="file"/>
  

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

    let input = document.getElementById("file");
    let file = input.files[0];
  
    let formData = new FormData();
    formData.append("userfile",file);
    formData.append("storeFileName","aa");
  
    let url= "https://testzx02286-zx0228-ide.c.xcaas.net/main/fuwu/uf";
    let _params = {
        method:"POST",
        body:formData
    };
    fetch(url,_params);