Element Ui 之 文件上传组件的使用 Upload

最近正好学到了Element Ui的文件上传组件，虽然不太难但一个人琢磨还是整了很久

以下是我整理的规范性文件上传组件为例

文件上传组件

前端

    <!--action：设置文件上传路径
        limit：设置图片上传的最大数量
        name:设置文件上传的参数名称
        handleRemove：图片上的删除按钮调用的方法
    -->
    <el-upload
        action="/upload"
        limit="1"
        name="picFile"
        list-type="picture-card"
        :on-preview="handlePictureCardPreview"
        :on-remove="handleRemove">
        <i class="el-icon-plus"></i>
    </el-upload>
    <el-dialog :visible.sync="dialogVisible">
        <img width="100%" :src="dialogImageUrl" alt="">
    </el-dialog>
    <el-button type="success">上传图片</el-button>

后端

此处的String dirPath = "D:/files"可以选取你电脑上的指定位置

@RequestMapping("/upload")
public String upload(MultipartFile picFile){// 参数名需要与组件中制定的name属性名一致
    String fileName = picFile.getOriginalFilename();// 得到文件的初始文件全名
    System.out.println(fileName);
    // 文件数据需要存储到数据库服务器磁盘中
    // 如果使用文件全名容易出现文件重名覆盖问题
    // 使用UUID.randomUUID生成唯一的16进制唯一标识符可避免这中问题
    String suffix = fileName.substring(fileName.lastIndexOf("."));// 截取后缀名
    fileName = UUID.randomUUID()+suffix;
    System.out.println(fileName);
    // 此时生成的文件名是唯一的
    // 如果网站传输数据量过大，将上传的文件都存到一个文件夹中会使文件夹中的文件太多
    // 此时最好给文件做一个分流处理
    // 计划以当前上传事件为节点生成不同的文件目录达到此效果
    String dirPath = "D:/files";// 指定存储位置
    // 准备日期路径：                                  /2023/03/07/文件名
    SimpleDateFormat format = new SimpleDateFormat("/yyyy/MM/dd/");
    String datePath = format.format(new Date());// 得到当前系统使时间
    File dirFile = new File(dirPath+datePath);
    if(!dirFile.exists()){
        dirFile.mkdirs();//如果当前日期的文件夹不存在就创建一个
    }
    System.out.println(dirFile.getPath());// 文件路径为D:\files\2023\03\07
    String filePath = dirPath+datePath+fileName;// 图片地址的全名
    picFile.transferTo(new File(filePath));
    // 将文件的时间路径+文件路径响应给客户端，做其他操作
    return datePath+fileName;
}

接上面

组件之文件删除

// 此时发出删除图片的请求
handleRemove(file, fileList) {
//    组件中handleRemove中传递来的file参数有一个response方法，他是刚才上传图片时返回的时间路径+文件路径
//    调用file.response，以此路径为参数传递到后端做删除操作    
    console.log(file, fileList);
    axios.get("/remove?url="+file.response).then(function (){
        console.log("删除完成！");
    })
}

@RequestMapping("/remove")
public void remove(String url){
    System.out.println("url = " + url);
    // 接收到的路径与不变的文件路径进行拼接获得全路径名做删除操作
    File file = new File("D:/files" + url);
    file.delete();
}

如有错误，欢迎指出