axios文件上传

前台页面：

引入axios js文件

<script src="https://unpkg.com/axios/dist/axios.min.js"></script> 

HTML:

<input type="file" name="img"/>
<br>
<span onclick="upload()">上传图片</span>

JS:

function upload() {
    alert("上传")
    let file = document.getElementsByName('img')[0].files[0];

    let formData = new FormData();
    formData.append("uploadFile",file,file.name);

    const config = {
        headers: { "Content-Type": "multipart/form-data;boundary="+new Date().getTime() }
    };

    axios
        .post("/file/upload",formData,config)
        .then(function (response) {
            console.log(response);
        })
        .catch(function (error) {
            console.log(error);
        });
}

后台接收：

@PostMapping(value = "/upload")
public String upload(HttpServletRequest request){
    logger.info("开始上传……");

    MultipartHttpServletRequest servletRequest = (MultipartHttpServletRequest) request;
    Map<String, MultipartFile> fileMap = servletRequest.getFileMap();
    for (Map.Entry entry : fileMap.entrySet()) {
        logger.info("name : {}",entry.getKey());
        MultipartFile multipartFile = (MultipartFile) entry.getValue();
        try {
            FileUtil.writeFile(multipartFile.getInputStream(),path+"/12_"+multipartFile.getOriginalFilename());
        } catch (IOException e) {
            e.printStackTrace();
        }
    }
    return "{'result':'OK'}";
}


@RequestMapping(value = "/uploadII")
public String uploadII(@RequestParam("uploadFile") MultipartFile uploadFile){
    logger.info("upload : {}",uploadFile);
    try {
        InputStream inputStream = uploadFile.getInputStream();
        String originalFilename = uploadFile.getOriginalFilename();
        logger.info("file : {}",originalFilename);
        FileUtil.writeFile(inputStream,path+"/"+originalFilename);
    } catch (IOException e) {
        e.printStackTrace();
    }
    return "{'result':'OK'}";
}

 

------------------------------------下面的貌似用不到------------------------------------

pox.xml:

<!--    文件上传    -->
<dependency>
    <groupId>commons-fileupload</groupId>
    <artifactId>commons-fileupload</artifactId>
    <version>1.3</version>
</dependency>

注入CommonsMultipartResolver:

@Bean
public CommonsMultipartResolver initCommonsMultipartResolver(){
    CommonsMultipartResolver resolver = new CommonsMultipartResolver();
    resolver.setMaxUploadSize(104857600);
    resolver.setMaxInMemorySize(4096);
    return resolver;
}

GitHub:https://github.com/PointJia/cloudDemo/tree/dubbo/axios