京淘项目——文件上传、删除

1.实现文件上传

1.1前端代码

<!-- 实现图片上传 multiple支持多选文件 -->
          <el-tab-pane label="商品图片" name="1">
            <el-upload class="upload-demo" :action="uploadUrl" :on-preview="handlePreview" :on-remove="handleRemove"
              :on-success="handleSuccess" list-type="picture" multiple drag>
              <el-button size="small" type="primary">点击上传</el-button>
              <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
            </el-upload>
          </el-tab-pane>

1.2入门案例

1.2.1编辑ImageVO

package com.jt.vo;

import lombok.AllArgsConstructor;
import lombok.Data;
import lombok.NoArgsConstructor;
import lombok.experimental.Accessors;

@Data
@Accessors(chain = true)
@NoArgsConstructor
@AllArgsConstructor
public class ImageVO {
    private String virtualPath;//图片实际路径
    private String urlPath;//图片url访问地址
    private String fileName;//文件上传后的文件名称
}

1.2.2编辑Controller层

 @PostMapping("/upload")
    public SysResult upload(MultipartFile file) throws IOException {
        //1.获取图片名称
        String fileName=file.getOriginalFilename();
        //2.封装文件上传目录
        String fileDir="D:/images";
        //3.判断目录是否存在
        File dir=new File(fileDir);
        if(!dir.exists()){
            dir.mkdirs();
        }
        //封装文件全路径
        String path=fileDir+"/"+fileName;
        file.transferTo(new File(path));
        return SysResult.success();
    }

1.3实现文件上传

1.3.1编辑Controller层

package com.jt.controller;

import com.jt.service.FileService;
import com.jt.vo.ImageVO;
import com.jt.vo.SysResult;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.CrossOrigin;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;
import org.springframework.web.multipart.MultipartFile;

import java.io.File;
import java.io.FileInputStream;
import java.io.IOException;

@RestController
@CrossOrigin
@RequestMapping("/file")
public class FileController {

    @Autowired
    private FileService fileService;

    /**
     * 需求: 实现文件上传
     * URL地址: "http://localhost:8091/file/upload",
     * 参数: file=xxxx
     * 类型: POST请求
     * 返回值: SysResult(ImageVO)
     * 基础知识:
     *      inputStream,outputStream
     * 高级API: SpringMVC MultipartFile
     * 需求: 接收用户信息,保存到本地磁盘中
     * 控制图片大小: 默认大小1M
     */
    @PostMapping("/upload")
    public SysResult upload(MultipartFile file){

        ImageVO imageVO = fileService.upload(file);
        if(imageVO == null){
            return SysResult.fail();
        }
        return SysResult.success(imageVO);
    }


    //@PostMapping("/upload")
//    public SysResult upload(MultipartFile file) throws IOException {
//        //1.获取图片的名称
//        String fileName = file.getOriginalFilename();
//        //2.封装文件上传目录
//        String fileDir = "E:/images";
//        //3.检查目录是否存在
//        File dir = new File(fileDir);
//        if(!dir.exists()){//如果目录不存在
//            //如果目录不存在,则创建目录
//            dir.mkdirs();
//        }
//        //4.封装文件的全路径
//        String path = fileDir + "/" +fileName;
//        //5.上传文件
//        file.transferTo(new File(path));
//        return SysResult.success();
//    }
}

1.3.2编辑Service层

package com.jt.service;

import com.jt.vo.ImageVO;
import com.sun.org.apache.bcel.internal.generic.NEW;
import org.springframework.stereotype.Service;
import org.springframework.web.multipart.MultipartFile;

import javax.imageio.ImageIO;
import java.awt.image.BufferedImage;
import java.io.File;
import java.io.IOException;
import java.text.SimpleDateFormat;
import java.util.Date;
import java.util.UUID;

@Service
public class FileServiceImpl implements FileService{

    private String localDir = "D:/images";
    private String urlPath="http://image.jt.com";
    /**
     * 考虑的问题:
     *      1. 校验图片类型    xx.jpg
     *      2. 校验是否为恶意程序 xx.exe.jpg
     *      3. 将文件分目录存储.
     *      4. 为了保证图片唯一性 ,自定义文件名称
     * @param file
     * @return
     */
    @Override
    public ImageVO upload(MultipartFile file) {
        //xxxxxx.jpg|png|gif 防止大小写问题,将所有字母转化为小写
        String fileName = file.getOriginalFilename().toLowerCase();
        //利用正则判断是否为图片
        if(!fileName.matches("^.+\\.(jpg|png|gif)$")){
            //如果校验不通过,则终止程序
            return null;
        }
        System.out.println("图片类型正确的!!!!!!");
        //第二步 防止恶意程序 判断图片是否有宽度和高度
        try {
            BufferedImage bufferedImage =
                    ImageIO.read(file.getInputStream());
            int width = bufferedImage.getWidth();
            int height = bufferedImage.getHeight();
            if(width == 0 || height == 0){
                return null;
            }
            System.out.println("用户上传的是图片");

            //第三步: 目录如何划分 yyyy/MM/dd
            String dateDir = new SimpleDateFormat("/yyyy/MM/dd/")
                    .format(new Date());
            // E:/images + /2022/11/11/  拼接目录
            String dirPath = localDir + dateDir;
            File dirFile = new File(dirPath);
            if(!dirFile.exists()){
                //如果目录不存在时, 创建目录
                dirFile.mkdirs();
            }
            //使用UUID生成唯一的文件名称
            //4.1生成UUID
            String uuid=UUID.randomUUID().toString().replace("-", "");
            //截取文件类型
            int index=fileName.lastIndexOf(".");
            String fileType=fileName.substring(index);
            //生成新文件名称
            String newFileName=uuid+fileType;
            //第五步 生成全路径 再上传
            String path=dirPath+ newFileName;
            file.transferTo(new File(path));
            System.out.println("文件上传成功");
            //第六步 返回ImageVO对象
            //6.1 虚拟路径只写动态变化的数据 /2021/11/11/uuid.jpg
            String virtualPath=dateDir+newFileName;
            //6.2真实图片名称
            String fileNameVO=newFileName;
            //6.3网络地址
            String url=urlPath+virtualPath;
            System.out.println(url);
            return new ImageVO(virtualPath, url, fileNameVO);

        } catch (IOException e) {
            e.printStackTrace();
            return null;
        }

    }
}

有关正则表达式

正则表达式百度百科介绍

2.删除文件

2.1业务接口

业务接口文档

2.2编辑Controller层

/*删除文件
    * 请求路径: http://localhost:8091/file/deleteFile
      请求类型: delete
      * 参数 
      * */
    @DeleteMapping("/deleteFile")
    public SysResult deleteFile(String virtualPath){
        fileService.deleteFile(virtualPath);
        return SysResult.success();
    }

2.3编辑Service层

@Override
    public void deleteFile(String virtualPath) {
        String path=localDir+virtualPath;
        File file=new File(path);
        if(file.exists()){
            file.delete();
        }
    }

实现效果

点击上传图片

 查看文件夹是否上传

点击删除文件

 查看文件夹内图片是否删除成功