基于Axios和Jquery的文件上传

最新推荐文章于 2024-08-30 18:03:30 发布

DanceDonkey

最新推荐文章于 2024-08-30 18:03:30 发布

阅读量679

点赞数

分类专栏：前端 Java 文章标签： mysql sql 数据库

本文链接：https://blog.csdn.net/qq_43750656/article/details/121426546

版权

Java 同时被 2 个专栏收录

61 篇文章 0 订阅

订阅专栏

前端

44 篇文章 2 订阅

订阅专栏

Jquery上传

jquery文件时，后端好像并没有经过SpringMVC处理，没有被封装成一个MultiPartFIle对象，可通过原生的Servlet API request.getInputStream()获取。至于为什么没被SpringMVC封装成MultipartFile对象目前还没有研究透彻。可能是请求内容类型没有设置成 multipart/form-data。下面是jquery上传文件的代码示例，文件名，文件大小等参数可通过拼在url后面使用request.getParameter()获取。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<script src="jquery.js"></script>
<script src="axios.js"></script>
<body>

请上传图片：<input type="file" name="file" id="file" onchange="fileChange(this)">
<br>

<button onclick="jqueryUpload()">jquery提交</button>

</body>

<script>

    var file = undefined

    function fileChange(data){
        file = data.files[0]
    }

  function jqueryUpload(){
    $.ajax({
        url:"/jqueryUpload?filename=test.jpg",
        type:"post",
        data:file,
        contentType:false,
        processData:false,
        success(res){
            console.log('上传结果' + res)
        }
    })
  }

</script>

</html>

@PostMapping("jqueryUpload")
    public String jqueryUpload(HttpServletRequest request, MultipartFile file) throws Exception{
        System.out.println(file);
        String fileDesc = "D:\\2022\\" + request.getParameter("filename");
        FileOutputStream outputStream = new FileOutputStream(fileDesc);
        ServletInputStream inputStream = request.getInputStream();
        byte[] bytes = new  byte[1024];
        int line = inputStream.read(bytes);
        while (line != -1){
            outputStream.write(bytes,0,line);
            line = inputStream.read(bytes);
        }
        inputStream.close();
        outputStream.close();
        return "success";
    }

此时后台打印的multipartfile是null。后续会深入研究·······…

Axios上传

axios上传不同于jquery，axios将上传的二进制数据和其他参数封装在了FormData对象中，值得注意的是，此时的内容类型要改为multipart/form-data。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<script src="jquery.js"></script>
<script src="axios.js"></script>
<body>

请上传图片：<input type="file" name="file" id="file" onchange="fileChange(this)">
<br>

<button onclick="jqueryUpload()">jquery提交</button>
<button onclick="axiosUpload()">axios提交</button>

</body>

<script>

    var file = undefined

    function fileChange(data){
        file = data.files[0]
    }


  function axiosUpload(){
    var formData = new FormData();
    formData.append("file",file);
    formData.append("filename","myfile.jpg")
    axios.post("/axiosUpload",formData,{
        headers:{ "Content-Type" : "multipart/form-data" }
    }).then(res => {
        console.log('上传结果' + res)
    })
  }

</script>

</html>

  @PostMapping("axiosUpload")
    public String axiosUpload(HttpServletRequest request,MultipartFile file)throws Exception{
        InputStream inputStream = file.getInputStream();
        String fileDesc = "D:\\2022\\" + request.getParameter("filename");
        FileOutputStream os = new FileOutputStream(fileDesc);
        byte[] bytes = new  byte[1024];
        int line = inputStream.read(bytes);
        while (line != -1){
            os.write(bytes,0,line);
            line = inputStream.read(bytes);
        }
        inputStream.close();
        os.close();

        return "success";
    }