当前位置:   article > 正文

springboot+element-ui多文件一次上传_springboot el-upload多文件上传

springboot el-upload多文件上传

 

前端:

  1. <el-upload
  2. drag
  3. :multiple="true"
  4. :limit="10"
  5. :auto-upload="false"
  6. :file-list="fileList"
  7. ref="fileUpload"
  8. >
  9. <i class="el-icon-upload"></i>
  10. <div class="el-upload__text">
  11. 将文件拖到此处,或<em>点击上传</em>
  12. </div>
  13. <div class="el-upload__tip" slot="tip">
  14. 只能上传{{ fileExt }}文件,且不超过{{ getFileSize() }}
  15. </div>
  16. </el-upload>

定义上传方法:

  1. submitFile() {
  2. const formData = new FormData();
  3. formData.append("bizType", this.bizType);
  4. /**
  5. * 所有选择的文件,放到FormData对象中上传
  6. * fileName[] 属性名根据自身情况定义
  7. */
  8. this.fileList.map(file => {
  9. formData.append("file", file.raw);
  10. });
  11. this.$http.post("/mom/sopFile/upload", formData)
  12. .then(res => {
  13. if (res && res.isSuccess) {
  14. console.log("上传成功");
  15. } else {
  16. console.log(res.msg);
  17. }
  18. });
  19. },

Java上传:

  1. @PostMapping(value = "/upload", headers = "content-type=multipart/form-data")
  2. @SysLog("上传附件")
  3. @ResponseBody
  4. public R<Boolean> upload(@RequestParam(value = "file") List<MultipartFile> files,
  5. @Validated SopFileUploadVO fileUploadVO) {
  6. // 忽略路径字段,只处理文件类型
  7. if (files.size() < 1) {
  8. return R.fail("请上传有效文件");
  9. }
  10. for (MultipartFile file : files) {
  11. //在这里编写上传代码
  12. }
  13. return R.success(true);
  14. }

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/笔触狂放9/article/detail/384047
推荐阅读
相关标签
  

闽ICP备14008679号