springboot2.x文件上传(以及踩坑)

springboot2.x 文件上传

1.使用springmvc的API-MultipartFile—(底层其实用的也是java-IO流)展示核心代码块

• @RequestParam Map map 是为了传递其他参数,实际需求中,不光要上传文件,还有可能上传所需要的参数,就会用到了map

@RequestMapping("/uploadFile")
    public String uploadFile(@RequestParam("file") MultipartFile file, HttpServletRequest request, @RequestParam Map map) {
        //判断文件夹是否存在
        File folder = new File( "需要注意的是:这个路径是绝对路径,如果不是,就会报错,系统找不到....");
        if (!folder.exists()) {
            folder.mkdirs();
        }
        try {
            //直接写入硬盘
            file.transferTo( new File( path + file.getOriginalFilename() ) ); 
            //执行保存数据库操作
            ....map.get(***)
        } catch (IOException e) {
            e.printStackTrace();
        } catch (IllegalStateException e) {
            e.printStackTrace();
        }
        return ResultUtil.success( object, "success", "上传成功" );
    }

application配置文件如下

#禁用thymeleaf缓存
spring.thymeleaf.cache=false
#是否支持批量上传(默认值true)
spring.servlet.multipart.enabled=true
#上传文件的临时目录（一般情况下不用特意修改）
spring.servlet.multipart.location=
#上传文件最大为1M（默认值1M根据自身业务自行控制即可）
spring.servlet.multipart.max-file-size=10MB
#上传请求最大为10M（默认值10M根据自身业务自行控制即可）
spring.servlet.multipart.max-request-size=100MB
#文件大小阈值，当大于这个阈值时将写入到磁盘，否则存在内存中，（默认值0一般情况下不用特意修改）
spring.servlet.multipart.file-size-threshold=0
#判断是否要延迟解析文件（相当于懒加载，一般情况下不用特意修改）
spring.servlet.multipart.resolve-lazily=false

前端代码:

<el-upload
   style="padding-bottom: 2%"
   class="upload-demo"
   name="file"
   ref="upload"
   :on-change="fileChange"
   :action="up_load_file_url"
   :headers="visitor_headers"
   :on-success="voiceSuccessful"
   :onError="voiceUploadError"
   :file-list="fileList"
   :limit="1"
   :beforeUpload="voiceUploadFile"
   :auto-upload="false"
   :show-file-list="false"
   :data="getfileData()"
   :disabled="forbidden">
   <el-button slot="trigger" type="primary" :disabled="forbidden" style="margin-left: 140px;">选取文件
   </el-button>
   <el-button style="margin-left: 10px;" type="success" @click="voiceSubmitUpload">上传文件</el-button>
 </el-upload>

name: file ,需要跟后端代码@RequestParam(“file”)一致
:action:后端地址
:headers=“visitor_headers” : 添加头部信息,实际项目中需要token等.
:data=“getfileData()” :需要上传的参数

//定义方法
  getfileData() {
     var data= {"robot_id": this.robot_id, "voice_name": this.voice.voice_name}
     return data
  },
  fileChange(file) {
      this.voice.voice_name = file.name.split('.')[0]
      this.fileName = file.name
    },
  async voiceSuccessful(response, file, fileList) {
      /**
       * 上传文件成功
       */
      this.dialogUpFile = false//关闭上传文件弹出框
      //提示 上传成功。
      this.$message({
        message: '文件上传成功,已经展示上传数据',
        type: 'success'
      })
      this.$refs.upload.clearFiles();//清除已选的文件
    },
    voiceUploadError() {
      this.$message({
        message: '文件上传失败',
        type: 'warning'
      });
    },
    voiceUploadFile(file) {
      var testmsg = file.name.substring(file.name.lastIndexOf('.') + 1)
      const extension = testmsg === 'wav'
      const isLt2M = file.size / 1024 / 1024 < 10
      if (!extension) {
        this.$message({
          message: '上传文件只能是wav格式!',
          type: 'warning'
        });

      }
      if (!isLt2M) {
        this.$message({
          message: '上传文件大小不能超过 10MB!',
          type: 'warning'
        });
      }
      return extension && isLt2M
    },
    voiceSubmitUpload() {
      this.$refs.upload.submit();
    },

遇到过的bug

• 上传文件大小限制
  在配置文件里面加上配置就解决了
• 使用transferTo()方法写入File时, 系统找不到指定的路径
  改成绝对路径就解决了
• 拒绝访问。
  使用FileOutputStream传入的值,必须要有文件名,而不是只到文件夹为止!!!

以上就是全部内容