关于前端:项目图片文件上传

封装 VO 对象

对于上传的图片文件进行回显

@Data
@Accessors(chain = true)
@NoArgsConstructor
@AllArgsConstructor
public class ImageVO implements Serializable {
    private Integer error;
    private String url;// 图片虚构拜访门路
    private Integer width; // 宽度
    private Integer height; // 高度

    //success fail
    public static ImageVO fail(){return new ImageVO(1,null,null,null);
    }

    public static ImageVO success(String url,Integer width,Integer height){return new ImageVO(0, url, width, height);
    }
}

参数剖析

由客户端 JS 以及开发者工具中 Network, 能够失去传递的参数 /url/ 以及须要的返回值即 VO

业务: 实现商品的文件上传操作
url 地址: http://localhost:8091/pic/upload?dir=image
参数: uploadFile 留神字母的大小写
返回值后果: ImageVO 对象.

实现

controller

@RestController
public class FileController {
     /**
     *  MultipartFile 接口作用 次要就是优化了文件上传 API 汇合
     * 1. 文件上传地位???   D:\JT-SOFT\images
     * 2. 判断一下文件目录是否存在
     * 3. 利用 API 实现文件上传.
     */

     /**
     * 业务: 实现商品的文件上传操作
     * url: /pic/upload?dir=image
     * 参数: uploadFile 留神字母大小写
     * 返回值后果:ImageVO
     */
    @Autowired
    private FileService fileService;

    @RequestMapping("/pic/upload")
    public ImageVO upload(MultipartFile uploadFile){
        // 将所有业务操作, 放到 service 层中实现
        return fileService.upload(uploadFile);
  }
}

service

@Service
@PropertySource("classpath:/properties/image.properties")
public class FileServiecImpl implements FileService{@Value("${image.dirPath}")
    private String dirPath;
    @Value("${image.urlPath}")
    private String urlPath;

    // 为了避免 Set 汇合每次都要创立, 则通过 static 代码块的模式负责封装数据
    private static Set<String> imageSet = new HashSet<>();

    static {imageSet.add(".jpg");
        imageSet.add(".png");
        imageSet.add(".gif");
        //....
    }

    /**
     * 文件上传具体步骤:
     *      1. 如何校验用户上传的是图片?    jpg|png
     *      2. 如何拜访用户上传恶意程序     木马.exe.jpg  宽度 * 高度
     *      3. 应该采纳分目录存储的形式     保留数据
     *      4. 上传的文件名称应该尽量避免重名  自定义文件名称...  UUID. 后缀...
     * @param uploadFile
     * @return
     */
    @Override
    public ImageVO upload(MultipartFile uploadFile) {
        //1. 校验图片类型是否正确 jpg|png|gifxxxx  1. 正则表达式判断  2. 筹备汇合之后进行校验 Set< 去重 >
        //1.1 获取上传的图片类型
        String fileName = uploadFile.getOriginalFilename();  // 文件的全名 abc.jpg
        fileName = fileName.toLowerCase();                   // 将所有的字符转化为小写
        int index = fileName.lastIndexOf(".");
        String fileType = fileName.substring(index);  // 含头不含尾
        //1.2 判断是否为图片类型    bug
        if(!imageSet.contains(fileType)){
            // 用户上传的不是图片
            return ImageVO.fail();}

        //2. 上传的数据是否为恶意程序. 高度和宽度是否为 null. 利用图片 API
        try {BufferedImage bufferedImage = ImageIO.read(uploadFile.getInputStream());
            int width = bufferedImage.getWidth();
            int height = bufferedImage.getHeight();
            if(width==0||height==0){return ImageVO.fail();
            }

            //3. 采纳分目录存储的形式
            //String dirPath="C:/soft/images";
            //3.1 分目录存储形式 1 hash 形式 AABBCCDD
            //3.1 分目录存储形式 2 工夫存储形式 2020/09/02
            String dateDir = new SimpleDateFormat("/yyyy/MM/dd/").format(new Date());
            //3.2 筹备文件存储的目录
            String imageDir=dirPath+dateDir;
            File imageFileDir=new File(imageDir);
            if (!imageFileDir.exists()){imageFileDir.mkdirs();
            }

            //4. 实现文件上传
            //4.1 动静拼接文件名称 uuid. 后缀
            String uuid=UUID.randomUUID().toString().replace("-", "");
            String realFileName = uuid+fileType;
            //4.2 筹备文件上传的全门路 磁盘门路地址 + 文件名
            File imageFile = new File(imageDir+realFileName);
            //4.3 实现文件上传
            uploadFile.transferTo(imageFile);

            //5. 动静生成 URL 地址
            // 申请协定:http:// https://(带证书的网址, 安全性更高, 公钥 / 私钥进行加密解密)
            // 向服务器运营商购买域名 com cn org hosts 文件
            // 图片存储的虚拟地址的门路 动态变化的门路
            //http://image.jt.com/2020/09/02/uuid.jpg
            String url = urlPath+dateDir+realFileName;
            return ImageVO.success(url,width,height);
        } catch (IOException e) {e.printStackTrace();
            return ImageVO.fail();}
    }
}

最初增加了一个 properties 配置文件, 增加了 kv, 来动静导入参数 dirPath/urlPath.