使用axios一次上传多张图片,自带上传进度

引入JS

国内就用 https://bootcdn.cn 上找一下axios的链接就可以了

用法

<input type="file" multiple accept="image/jpeg,image/png," name="multipleFile" id="multipleFile"/>

//上传方法

$(function() {
  $("#multipleFile").change(function(){
    var formData = new FormData();
    var files = this.files;
    for(var i = 0; i < files.length; i++) {
      formData.append('files[]', files[i]);
    }
    axios.post('/upload', formData, {
      method: 'post',
      headers: {
        'Content-Type': 'multipart/form-data'
      },
      transformRequest: [function(data) {
        return data
      }],
      onUploadProgress: function(e) {
        var percentage = Math.round((e.loaded * 100) / e.total) || 0;
        if (percentage < 100) {
          console.log(percentage + '%');  // 上传进度
        }
      }
    }).then(function(resp) {
      console.log(resp.data); // {code: 200, description: "", detail: null}
    })
  })
})

// 接收方法

@PostMapping("/upload")
@ResponseBody
public Result upload(@RequestParam("files[]") MultipartFile[] files) {
  if (files != null && files.length > 0) {
    List<String> list = new ArrayList<>();
    for (MultipartFile file : files) {
      if (!file.isEmpty()) {
        String saveDir = DateUtil.formatDateTime(new Date(), "yyyyMMdd");
        String requestPath = uploadFile(file, saveDir);
        list.add(requestPath);
      }
    }
    return Result.success(list);
  } else {
    return Result.error("请选择要上传的文件");
  }
}

public String uploadFile(MultipartFile file, String saveDir) {
  String suffix = "." + file.getContentType().split("/")[1];
  String fileName = UUID.randomUUID().toString() + suffix;
  // 判断要上传的文件夹是否存在,不存在则创建
  File localPathDir = new File(siteConfig.getUploadPath() + saveDir);
  if (!localPathDir.exists()) localPathDir.mkdirs();

  String localPath = siteConfig.getUploadPath() + saveDir + File.separator + fileName;
  String requestUrl = siteConfig.getStaticUrl() + saveDir + File.separator + fileName;

  // 上传文件
  try {
    @Cleanup BufferedOutputStream stream = new BufferedOutputStream(
        new FileOutputStream(new File(localPath))
    );
    stream.write(file.getBytes());
  } catch (IOException e) {
    e.printStackTrace();
    log.info("上传图片失败");
    return null;
  }

  return requestUrl;
}

兼容性

axios 兼容性:IE8+ 参见:https://github.com/axios/axios#browser-support

但FormData在IE11里才支持

所以这种方法的兼容性是IE11+,至于Chrome,Firefox都是支持的

兼容性查询可以访问:https://caniuse.com/

原文链接:

原文 

https://tomoya92.github.io/2018/04/16/axios-upload/

本站部分文章源于互联网,本着传播知识、有益学习和研究的目的进行的转载,为网友免费提供。如有著作权人或出版方提出异议,本站将立即删除。如果您对文章转载有任何疑问请告之我们,以便我们及时纠正。

PS:推荐一个微信公众号: askHarries 或者qq群:474807195,里面会分享一些资深架构师录制的视频录像:有Spring,MyBatis,Netty源码分析,高并发、高性能、分布式、微服务架构的原理,JVM性能优化这些成为架构师必备的知识体系。还能领取免费的学习资源,目前受益良多

转载请注明原文出处:Harries Blog™ » 使用axios一次上传多张图片,自带上传进度

赞 (0)
分享到:更多 ()

评论 0

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址