关于使用axios上传文件springboot接收问题

最新推荐文章于 2024-02-01 07:15:00 发布

coderping

最新推荐文章于 2024-02-01 07:15:00 发布

阅读量1.6k

点赞数 2

分类专栏： Springboot axios 文章标签： springboot axios

本文链接：https://blog.csdn.net/coderping/article/details/99649744

版权

Springboot 同时被 2 个专栏收录

17 篇文章 0 订阅

订阅专栏

axios

5 篇文章 0 订阅

订阅专栏

1.关于Content-type

application/x-www-form-urlencoded：数据格式为"key1=value1&key2=value2"
multipart/form-data：用于传输文件
application/json：数据格式为json格式，有的服务器语言不支持（比如PHP，需要从php://input里获得原始输入流，再json_decode成对象。）
text/plain：纯文本传输，用得少

在上传文件的时候，需要把content-type设置为multipart/form-data。

前端代码

<body>
    <input type="file" id="file">
    <button onclick="sendfile()"></button>
    <button type="button"  onclick="openUrl()" class="btn btn-primary">1_Unique_eCATT</button>
<script>
    function sendfile() {
        let file =  document.getElementById('file').files[0];//获取id上传的file
        let param = new FormData();
        param.append("file",file);
        param.append("name","name")
        axios({
            url:'/demo/upload',
            method:'post',
            data:param,
            headers: {'Content-Type': 'multipart/form-data'}
        }).then((res)=>{console.log(res)})
    }
</script>
</body>

后端利用springboot接收

  @RequestMapping(value = "/upload",method = RequestMethod.POST)
    @ResponseBody
    public void upload(
            @RequestParam("file") MultipartFile file,
                       @RequestParam("name") String name) throws IOException {
        System.out.println(file.getOriginalFilename());
        System.out.println(name);
    }

后端接收的是MultipartFile，需要转化。

附上转化的demo，仅供参考

getOriginalFilename（）是为了获取multipartfile的名称

File file = null;
            InputStream ins = null;
            try {
                ins = multipartFile.getInputStream();
                file = new File("src/main/resources/static/lips/"+multipartFile.getOriginalFilename());
                OutputStream os = new FileOutputStream(file);
                int bytesRead = 0;
                byte[] buffer = new byte[8192];
                while ((bytesRead = ins.read(buffer, 0, 8192)) != -1) {
                    os.write(buffer, 0, bytesRead);
                }
                os.close();
                ins.close();
            } catch (IOException e) {
                e.printStackTrace();
            }

coderping

关注

2
点赞
踩
6

收藏

觉得还不错? 一键收藏
1
评论
关于使用axios上传文件springboot接收问题

1.关于Content-typeapplication/x-www-form-urlencoded：数据格式为"key1=value1&key2=value2" multipart/form-data：用于传输文件 application/json：数据格式为json格式，有的服务器语言不支持（比如PHP，需要从php://input里获得原始输入流，再json_decode成对象...
复制链接

扫一扫