Springboot与vue axios 实现文件上传问题

Question

毕业设计，菜鸡真的老大难了。工具模块涉及压缩文件的上传。

如图前台，间距太大，上俩张：

问题出现的环境背景及自己尝试过哪些方法

Springboot + vue + axios 实现的上传，百度很多大家一般大家采用的使用form表单，
我想尝试用axios，想想也差不了多少，但手残加基础差。

相关代码

**前台，贴主要代码：**

<div id\="categoryInfo" style\="width:100%;height:700px;"\>  
   
    <!-- 新增 \-->  
    <div class\="m-container-small m-padded-tb-tiny"\>  
        <div class\="ui container"\>  
             <form class\="ui form"\>  
                <div class\="field"\>  
                    <div class\="ui left labeled input"\>  
                        <label class\="ui teal basic label"\>工具名称：</label\>  
                        <input v-model.trim\="bean.name" type\="text" placeholder\="不超过10字"\>  
                    </div\>  
                    <div style\="margin-top: 10px;"\></div\>  
                    <div class\="ui left labeled input"\>  
                        <label class\="ui teal basic label"\>简介信息：</label\>  
                        <input v-model.trim\="bean.description" type\="text" placeholder\="不超过50字"\></div\>  
                    <div style\="margin-top: 10px;"\></div\>  
                    <div class\="ui left labeled input"\>  
                        <label class\="ui teal basic label"\>下载次数：</label\>  
                        <input v-model.trim\="bean.downloadTimes" type\="text" placeholder\="初始为0"\></div\>  
                    <div style\="margin-top: 10px;"\></div\>  
                    <div class\="ui left labeled input"\>  
                        <label class\="ui teal basic label"\>工具状态：</label\>  
 <input v-model.trim\="bean.flag" type\="text" placeholder\="转载 或 原创"\></div\>  
                    <div style\="margin-top: 10px;"\></div\>  
                    <div class\="ui left labeled input"\>  
                        <label class\="ui teal basic label"\>更新时间：</label\>  
                        <input v-model.trim\="bean.updateTime" type\="text" placeholder\="yyyy-MM-dd 格式"\>  
                    </div\>
                   -----------------快速定位上传------------------------ 
                    <div style\="margin-top: 10px;"\></div\>  
                    <div class\="ui left labeled input"\>  
                        <label class\="ui teal basic label"\>上传文件：</label\>  
                        <input accept\="value" type\="file" name\="files" @change\="getFile($event)" />  
                    </div\>  
                    -----------------快速定位上传-----------------------
                </div\>  
                <div class\="ui right aligned container"\>  
                    <button type\="button" class\="ui teal button mini" onclick\="window.history.go(-1)" \><i class\="arrow left icon"\></i\>返回</button\>  
                    <a href\="#nowhere" @click\="add" class\="ui orange button mini"\><i class\="send icon"\></i\>提交</a\>  
                </div\>  
            </form\>  
        </div\>  
    </div\>
</div\>

js

$(function(){  
    var cid \= getUrlParms("cid"); //获取当前分类id
    var data1 \=  {  
    uri:'kits',  
    beans: \[\],  
    bean: { id: 0, name: '',description:'',downloadTimes:'',flag:'',updateTime:'',category:{'id':0}},  
    pagination:{},  
    category:'',  
    file: null  
  };       
 //vueModel  
    var vue \= new Vue({  
        el: '#categoryInfo',  
        data: data1,  
        mounted: function() {  
            this.getCategory(cid);  
        },  
        methods: {
            add: function () {  
              var url \= this.uri;  
              this.bean.category.id \= cid;  
              var formData \= new FormData();  
              formData.append("name", this.bean.name);  
              formData.append("description", this.bean.description);  
              formData.append("downloadTimes",this.bean.downloadTimes);  
              formData.append("flag", this.bean.flag);  
              formData.append("updateTime", this.bean.updateTime);  
              formData.append("file", this.file);  
              alert(formData.get("name"));  
              axios.post(url,formData,{headers:{'Content-Type':'multipart/form-data'}}).then(function(response){  
                vue.list(0);   //重新查询工具列表
                vue.bean \=  {id: 0, name: '',description:'',downloadTimes:'',flag:'',updateTime:'',category:{'id':0}};  
              });  //重置bean
     }，
    //将前台操作的文件保存在data1对象上
    getFile: function (event) {  
        this.file \= event.target.files\[0\];  
    },

后台代码：

@PostMapping("/kits")  
public Object add(@RequestBody Kit bean,MultipartFile files, HttpServletRequest request) throws IOException {  
  bean.setCreateTime(new Date());  
  kitService.add(bean);  
  saveOrUpdateFile(bean,files,request);  
  return bean;  
}

public String saveOrUpdateFile(Kit bean,MultipartFile files, HttpServletRequest request) throws IOException {  
  // 获取原始名字  
  String fileName \= files.getOriginalFilename();  
  // 文件保存路径  
  String filePath \= "d:/upload/";  
  // 文件重命名，防止重复  
  fileName \= filePath \+ UUID.randomUUID() + fileName;  
  // 文件对象  
  File dest \= new File(fileName);  
  // 判断路径是否存在，如果不存在则创建  
  if(!dest.getParentFile().exists()) {  
  dest.getParentFile().mkdirs();  
  // 保存到服务器中  
  files.transferTo(dest);  
  return "上传成功";  
 }  return "上传失败";  
}

你期待的结果是什么？实际看到的错误信息又是什么？

跪求大佬求个解决办法
错误信息：Resolved exception caused by Handler execution: org.springframework.web.HttpMediaTypeNotSupportedException: Content type 'multipart/form-data;boundary=----WebKitFormBoundaryl99gxLnGtA5lhWBV;charset=UTF-8' not supported，

总体问题就是，上传一个压缩文件。前台使用axios如何处理，springboot后台如何处理

Answer 1

request 本身已经包涵了文件上传的内容

Answer 2

springboot代码：

@PostMapping("upload")
    @ResponseBody
    @CrossOrigin
    public String upload(MultipartFile file, @RequestParam String extraParam1, @RequestParam String extraParam2) throws IOException {
        System.out.println("extraParam1:" + extraParam1);
        System.out.println("extraParam2:" + extraParam2);
        System.out.println("文件名称：" + file.getOriginalFilename());
        String tempPath = "C:/static/" + file.getOriginalFilename();
        file.transferTo(Paths.get(tempPath));
        return "ok";
    }

js代码：

<input type="file" @change="change">

change(e) {
                let file = e.target.files[0]
                let param = new FormData()
                
                let selfFilename = '这是自己另外取得文件名'
                
                //这样的文件名称就是selfFilename
                param.append('file', file, selfFilename)
                
                //这样的文件名称就是上传时的名称
                //param.append('file', file)
                
                //也可以用RequestParam根据键名去取额外参数
                param.append('extraParam1', "额外参数1")
                param.append('extraParam2', "额外参数2")
                axios.post('http://localhost:8080/test/upload', param, {headers: {"Content-Type": "multipart/form-data"}})
                    .then(({data}) => alert(data))
            }