若依前后端分离删除上传图片

若依前后端图片上传组件,没有图片删除功能。有时间把这个功能完善下。
在这里插入图片描述
添加一个删除文件接口

import request from '@/utils/request'

// 删除图片
export function deleteImage(data) {
  return request({
    url: '/common/delete',
    method: 'post',
    data: data
  })
}

在对应图片上传组件ImageUpload进行修改
在这里插入图片描述

  var fileName = file.name.replace(this.baseUrl, "");
        deleteFile({fileName: fileName}).then(res => {
        }).catch(() => {
        });
 /**
     * 通用图片删除请求(单个)
     */
    @PostMapping("/delete")
    public AjaxResult delete(@RequestBody FileInfo fileInfo){
        Long userId = SecurityUtils.getUserId();
        if (ObjectUtils.isEmpty(userId)) {
            throw new BaseException("没有删除权限!");
        }
        //文件磁盘路径 /Users/wei/temp/traing/uploadPath
        String filePath = RuoYiConfig.getProfile();
        // 映射路径 /profile/upload/2023/02/21/QQ截图20230221113347_20230221113355A001.png
        String fileName = fileInfo.getFileName();
        // /Users/wei/temp/traing/uploadPath/upload/2023/02/21/QQ截图20230221113347_20230221113355A001.png
        String deletaPath = filePath + StringUtils.substringAfter(fileName, Constants.RESOURCE_PREFIX);

        if (FileUtils.deleteFile(deletaPath)) {
            return AjaxResult.success();
        }
        return AjaxResult.error();
    }
前后端分离实现大文件切片上传返回上传url的实现过程如下: 1. 前端将大文件切成多个小文件,并将每个小文件按照一定的顺序进行上传,同时携带必要的参数,如文件名、文件大小、文件类型等。 2. 后端接收到每个小文件的上传请求,将其保存到临时文件夹中,并记录文件名、文件大小、文件类型等信息。 3. 当所有小文件上传完成后,后端将这些小文件按照一定的顺序合并成一个完整的大文件,并生成一个唯一的文件ID。 4. 后端将文件ID和文件下载URL返回给前端,前端可以通过这个URL进行文件下载。 下面是Java代码实现: 前端代码: ```javascript // 定义一个方法来上传文件 function uploadFile(file) { // 每个分片的大小 var chunkSize = 10 * 1024 * 1024; // 10MB // 文件分片 var chunks = Math.ceil(file.size / chunkSize); // 当前分片 var currentChunk = 0; // 文件唯一标识 var fileId = Math.random().toString(36).substr(2); // 文件上传URL var uploadUrl = 'http://localhost:8080/upload'; // 开始上传 uploadNextChunk(); // 上传下一个分片 function uploadNextChunk() { var start = currentChunk * chunkSize; var end = Math.min(start + chunkSize, file.size); var formData = new FormData(); formData.append('fileId', fileId); formData.append('chunk', currentChunk); formData.append('chunks', chunks); formData.append('file', file.slice(start, end)); $.ajax({ url: uploadUrl, type: 'POST', data: formData, processData: false, contentType: false, success: function (response) { if (currentChunk < chunks - 1) { // 继续上传下一个分片 currentChunk++; uploadNextChunk(); } else { // 所有分片上传完成,合并文件 mergeFile(); } }, error: function (error) { console.error(error); } }); } // 合并文件 function mergeFile() { $.ajax({ url: 'http://localhost:8080/merge', type: 'POST', data: { fileId: fileId }, success: function (response) { // 文件上传成功,返回文件下载URL console.log(response); }, error: function (error) { console.error(error); } }); } } ``` 后端代码: ```java @RestController public class FileController { // 临时文件夹路径 private static final String TEMP_FOLDER = "/temp"; // 文件上传路径 private static final String UPLOAD_FOLDER = "/uploads"; // 文件分片大小 private static final int CHUNK_SIZE = 10 * 1024 * 1024; // 10MB // 上传分片接口 @PostMapping("/upload") public void upload(@RequestParam("fileId") String fileId, @RequestParam("chunk") int chunk, @RequestParam("chunks") int chunks, @RequestParam("file") MultipartFile file) throws IOException { // 检查临时文件夹是否存在 File tempFolder = new File(TEMP_FOLDER); if (!tempFolder.exists()) { tempFolder.mkdirs(); } // 保存分片文件到临时文件夹中 String tempFileName = fileId + "-" + chunk; File tempFile = new File(tempFolder, tempFileName); file.transferTo(tempFile); // 如果所有分片都上传完成,开始合并文件 if (chunk == chunks - 1) { mergeFile(fileId, chunks); } } // 合并文件接口 @PostMapping("/merge") public String merge(@RequestParam("fileId") String fileId) throws IOException { // 检查上传文件夹是否存在 File uploadFolder = new File(UPLOAD_FOLDER); if (!uploadFolder.exists()) { uploadFolder.mkdirs(); } // 获取所有分片文件,并按照文件名排序 File tempFolder = new File(TEMP_FOLDER); File[] files = tempFolder.listFiles((dir, name) -> name.startsWith(fileId)); Arrays.sort(files, Comparator.comparing(File::getName)); // 合并文件 String fileName = files[0].getName().split("-")[0]; File outputFile = new File(uploadFolder, fileName); try (FileOutputStream fos = new FileOutputStream(outputFile)) { for (File file : files) { Files.copy(file.toPath(), fos); } } // 删除临时文件 for (File file : files) { file.delete(); } // 返回文件下载URL String downloadUrl = "http://localhost:8080/download/" + fileName; return downloadUrl; } // 文件下载接口 @GetMapping("/download/{fileName}") public ResponseEntity<Resource> download(@PathVariable("fileName") String fileName) throws IOException { File file = new File(UPLOAD_FOLDER, fileName); Path path = file.toPath(); Resource resource = new UrlResource(path.toUri()); HttpHeaders headers = new HttpHeaders(); headers.add(HttpHeaders.CONTENT_DISPOSITION, "attachment; filename=\"" + file.getName() + "\""); return ResponseEntity.ok() .headers(headers) .contentLength(file.length()) .contentType(MediaType.APPLICATION_OCTET_STREAM) .body(resource); } // 合并文件 private void mergeFile(String fileId, int chunks) throws IOException { // 获取所有分片文件,并按照文件名排序 File tempFolder = new File(TEMP_FOLDER); File[] files = tempFolder.listFiles((dir, name) -> name.startsWith(fileId)); Arrays.sort(files, Comparator.comparing(File::getName)); // 如果分片数量不足,说明有分片上传失败,删除所有分片文件 if (files.length < chunks) { for (File file : files) { file.delete(); } return; } // 合并文件 String fileName = files[0].getName().split("-")[0]; File outputFile = new File(UPLOAD_FOLDER, fileName); try (FileOutputStream fos = new FileOutputStream(outputFile)) { for (File file : files) { Files.copy(file.toPath(), fos); } } // 删除临时文件 for (File file : files) { file.delete(); } } } ``` 以上代码实现了大文件切片上传,文件合并和文件下载功能。注意,为了节省服务器空间,我们需要定期删除一些过期的临时文件和上传文件。
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值