jQuery 上传文件,以及springmvc后台接收处理保存

avatar

jQuery默认的post方法就支持上传,只是没有上传进度,不过也够用了,如果想要上传进度支持,建议使用 axios ,这里说一下jQuery上传文件的使用方法

$("#file").change(function() {
  var fd = new FormData();
  // 如果有多张图片一块上传,下面直接使用fd.append()继续追加即可
  fd.append("file", document.getElementById("file").files[0]);
  $.post({
    url: "/uploadAvatar",
    data: fd,
    dataType: 'json',
    processData: false,
    contentType: false,
    success: function(data) {
      if(data.code === 200) {
        console.log(data);
      } else {
        alert(data.description);
      }
    }
  })
});

springmvc后台接收保存

// 上传头像
@PostMapping("/uploadAvatar")
public Result uploadAvatar(@RequestParam("file") MultipartFile file) {
    try {
        long size = file.getSize();
        int uploadAvatarSizeLimit = 2; // 假如最大上传的图片限制在2MB以内,下面可以做个判断,当然这里也可以通过spring的配置文件限制,但那样异常不太好处理
        if (size > uploadAvatarSizeLimit * 1024 * 1024) return error("文件太大了,请上传文件大小在 " + uploadAvatarSizeLimit + "MB 以内");
        String fileName = UUID.randomUUID().toString();
        String suffix = "." + file.getContentType().split("/")[1];
        // 这里以保存到桌面上为例
        String localPath = "/Users/hh/Desktop/" + fileName + "/" + suffix;
        // 上传文件
        BufferedOutputStream stream = new BufferedOutputStream(new FileOutputStream(new File(localPath)));
        stream.write(file.getBytes());
        stream.close();
        return success(url);
    } catch (IOException e) {
        log.error(e.getMessage());
        return error(e.getMessage());
    }
}

注意事项

  1. jQuery 的post方法里的两个参数一个都不能少,其实我也不知道它们都是干啥的。。processData: false contentType: false
  2. springmvc 接收的参数名要跟FormData里的追加的名字保持一致 @RequestParam("file") fd.append("file", document.getElementById("file").files[0]);

最后,大家都会关心兼容性,查了一下,主流浏览器都支持 FormData 可以放心使用

目前还没有回答,快来帮帮TA吧!
添加一条评论 请尽量发布对他人有帮助的评论

登录后可发布评论

登录 | Github登录