axios+springboot 文件上传

最新推荐文章于 2025-07-17 11:26:06 发布

原创最新推荐文章于 2025-07-17 11:26:06 发布 · 1.7k 阅读

2 ·

CC 4.0 BY-SA版权

随意转载，但请注明出处。倘若略有收获，望不吝点赞

VUE 同时被 2 个专栏收录

22 篇文章

订阅专栏

java

13 篇文章

订阅专栏

本文介绍了一个前端文件上传的实现方式，并展示了如何通过JavaScript和Vue.js进行文件选择及上传处理。同时，后端使用Spring框架接收上传的文件并将其保存到指定目录。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

前端：

<form action="javascript:void(0);">
              <input type="file" name="upload-file" id="upload-file" @change="uploadFile">
</form>

// 文件上传处理
      uploadFile:function(e){
        var file = e.target.files[0];
        var formdata = new FormData()
        formdata.append("file",file)
        console.log("文件",formdata,this.qs.stringify({'file':file}));
        this.$axios.post(
          '/upload',
          formdata,
          {headers:{'Content-Type':'multipart/form-data'}}
          ).then(function(res){
            console.log(res)
          })
      }

后端：

//文件存储路径
private static String UPLOADED_FOLDER = "/home/zsy/Desktop/课设/Files/";

    @CrossOrigin
    @RequestMapping(value = "/upload",method = RequestMethod.POST)
    public String file(@RequestParam("file") MultipartFile file){

        if (file.isEmpty()) {
            return "文件为空";
        }


        File path = new File(UPLOADED_FOLDER + file.getOriginalFilename());
        try{
            byte[] fileSize = file.getBytes();
            file.transferTo(path);
            return "上传成功";
        }catch (IllegalStateException e) {
            e.printStackTrace();
        } catch (IOException e) {
            e.printStackTrace();
        }
        return "上传失败";



    }

MultipartFile文档：

https://docs.spring.io/spring-framework/docs/current/javadoc-api/org/springframework/web/multipart/MultipartFile.html