springboot+element ui 怎么实现多文件上传

springboot+element ui 怎么实现多文件本地上传

需求分析

   用户可以一次拖拉多张图片进行上传，上传的文件根据上传的时间存放在本地指定位置，并按天数放在同一文件夹，用户上传错误的图片可以进行撤销。

前端

<template>
  <div>
    <el-upload
      class="upload-demo"
      name="pictures"
      drag
      :action="imageAction"
      :on-success="handleAvatarSuccess"
      :before-upload="beforeAvatarUpload"
      :on-remove="handleRemove"
      :before-remove="beforeRemove"
      multiple>
      <i class="el-icon-upload"></i>
      <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
      <div class="el-upload__tip" slot="tip">只能上传jpg/png文件，且不超过500KB</div>
    </el-upload>
  </div>
</template>
<script>
export default {
        data() {
        return {
        // 后端调用的地址，填自己实际的
          imageAction: this.$http.adornUrl(`/pictures/upload`),
          fileList: []
  }
  },
  methods: {
  // 选择文件改变
  handleChange(file, fileList) {
  this.fileList = fileList
  },
  // 移除文件
  handleRemove(file, fileList) {
  this.fileList = fileList
    var name
    name=file.name
    this.$http({
      url: this.$http.adornUrl('/delete'),
      method: 'post',
      data: this.$http.adornData(name, false)
    }).then(({data}) => {
      if (data && data.code === 0) {
        this.$message({
          message: '操作成功',
          type: 'success',
          duration: 1500
        })
      } else {
        this.$message.error(data.msg)
      }
    })
  },
    // 上传成功
    handleAvatarSuccess (res, file) {
      this.imageUrl = common.imgadress + res.msg
      this.dataForm.imgUrl = res.msg
      console.log(this.imageUrl)
 
    },
    beforeRemove(file, fileList) {
      return this.$confirm(`确定移除 ${ file.name }？`);
    },
    // 上传图片之前校验图片格式
    beforeAvatarUpload (file) {
      var isJPG = false
      if (file.type === 'image/jpeg' || file.type === 'image/png') {
        isJPG = true
      }
      const isLt2M = file.size / 1024  < 500
      if (!isJPG) {
        this.$message.error('上传图片只能是 JPG/PNG 格式!')
      }
      if (!isLt2M) {
        this.$message.error('上传图片大小不能超过 500K!')
      }
      return isJPG && isLt2M
    }
  }

}
  </script>
 <style>
   .l-s {
     background-color: #fff;
     padding: 20px;
     padding-top: 1px;
   }

   .d-z {
     text-align: center;
     position: absolute;
     top: 0;
     bottom: 0;
     left: 0;
     right: 0;
     background-color: rgba(255, 255, 255, 0.5);
     z-index: 1000;
   }

 </style>

后端

Controller

@RestController
public class UploadDownController {
    /**
     * 文件上传
     *
     * @param pictures
     * @param request
     * @return
     */
    @RequestMapping("/pictures/upload")
    public R upload(@RequestParam("pictures") MultipartFile[] pictures, HttpServletRequest request) throws IOException {
        //前端传过来的是一个MultipartFile[],可实现多文件上传
        //获取文件在服务器的储存位置
        // String path = request.getSession().getServletContext().getRealPath("/upload");
        // windows 下注意路径的斜杠
        String path = "C:\\Users\\Administrator\\Desktop\\upload";
        //以当前时间创建文件夹
        Date d = new Date();
        SimpleDateFormat sdf2 = new SimpleDateFormat("yyyy-MM-dd");
        String date = sdf2.format(d);
        path = path + "\\" + date;
        File filePath = new File(path);
        if (!filePath.exists() && !filePath.isDirectory()) {
            System.out.println("目录不存在，创建目录:" + filePath);
            filePath.mkdirs();
        }
        //循环上传图片
        //获取原始文件名称(包含格式)

        for (MultipartFile picture : pictures) {
            String originalFileName = picture.getOriginalFilename();
//        //获取文件类型，以最后一个`.`为标识
//        String type = originalFileName.substring(originalFileName.lastIndexOf(".") + 1);
//        System.out.println("文件类型：" + type);
//        //获取文件名称（不包含格式）
//        String name = originalFileName.substring(0, originalFileName.lastIndexOf("."));
//
//        //设置文件新名称: 当前时间+文件名称（不包含格式）
//        SimpleDateFormat sdf = new SimpleDateFormat("yyyyMMddHHmmss");
//        String date = sdf.format(d);
//        String fileName = date + name + "." + type;
//        System.out.println("新文件名称：" + fileName);
            //在指定路径下创建一个文件
            File targetFile = new File(path, originalFileName);
            //将文件保存到服务器指定位置
            try {
                picture.transferTo(targetFile);
            } catch (IOException e) {
                e.printStackTrace();
                return R.error(500, originalFileName + "上传失败");
            }
        }
// 返回结果，根据自己的封装结果进行返回
        return R.ok("上传成功");
    }

    /**
     * 删除
     * 前端上传文件默认自动上传
     * 列表中点击叉号可以删掉上传错误的文件
     */
    @RequestMapping("/delete")
    public R delete(@RequestBody String name) {
        String path = "C:\\Users\\Administrator\\Desktop\\upload";
        //以当前时间创建文件夹
        Date d = new Date();
        SimpleDateFormat sdf2 = new SimpleDateFormat("yyyy-MM-dd");
        String date = sdf2.format(d);
         path = path + "\\" + date;
         //前端传过来的文件名称可能会带\,将这个去掉，与自己在服务器中的名字保持一致
        name=name.replaceAll("\"","");
        path = path +"\\"+ name;
        try {
            File targetFile = new File(path);
            targetFile.delete();
        } catch (Exception e) {
            e.printStackTrace();
            return R.error("删除失败");
        }
        return R.ok("删除成功");
    }
}