element-ui实现图片上传功能(后台部分)

文章目录

  • 前言
  • 一、 文件路径的设置
  • 二、上传


前言

这个项目的上传流程为:将选中图片的二进制信息传到线上-》前台将二进制信息传给后台-》后台将二进制文件写入到服务器中。(也就是本地硬盘)

一、 文件路径的设置

  1. 在yml中设置profile的内容
    在这里插入图片描述

element-ui实现图片上传功能(后台部分)_第1张图片
这里当Bean被实例化时(因为有@Component),@ConfigurationProperties会将对应前缀的后面的属性与Bean对象的属性匹配。符合条件则进行赋值。
此时profile=E:\niuadata\uploadPath
element-ui实现图片上传功能(后台部分)_第2张图片
element-ui实现图片上传功能(后台部分)_第3张图片

二、上传

element-ui实现图片上传功能(后台部分)_第4张图片
将上传文件的绝对路径以及前台传来的二进制文件,传给FileUploadUtils.upload方法

FileUploadUtils.upload:
element-ui实现图片上传功能(后台部分)_第5张图片
baseDir:上传文件的绝对路径
file :前台传过来的二进制文件
DEFAULT_ALLOWED_EXTENSION:默认允许上传文件的扩展名,起到校验的功能,需要自己定义类去设置
element-ui实现图片上传功能(后台部分)_第6张图片
upload:
调用同类中定义的另一各upload方法,传入上传路径、二进制文件和允许上传文件的扩展名
element-ui实现图片上传功能(后台部分)_第7张图片
element-ui实现图片上传功能(后台部分)_第8张图片
element-ui实现图片上传功能(后台部分)_第9张图片
这块代码起到了检验上传文件的文件名是否过长
file.getOriginalFilename():得到上传文件的文件名
在FileUploadUtils类中,定义了默认的文件名的最大长度
element-ui实现图片上传功能(后台部分)_第10张图片

assertAllowed:检验文件的大小是否默认的文件大小以及文件是否符合上传类型。

extractFilename:编码文件名
①一个文件夹中放的文件特别多,查找起来很慢。所以图片的保存路径由当前的时间构成。②两次上传的图片是同一张图片。如果不起别名,文件会被覆盖掉。因为UUID在特定的范围内重复的可能性极小,所以这里图片的别名为生成的UUID。
element-ui实现图片上传功能(后台部分)_第11张图片
获取上传文件的文件类型
element-ui实现图片上传功能(后台部分)_第12张图片
dataPath():

public class DateUtils extends org.apache.commons.lang3.time.DateUtils{
/**
     * 日期路径 即年/月/日 如2018/08/08
     */
    public static final String datePath()
    {
        Date now = new Date();
        return DateFormatUtils.format(now, "yyyy/MM/dd");
    }
}

extractFilename中fastUUID:
element-ui实现图片上传功能(后台部分)_第13张图片
UUID:

public class UUID implements java.io.Serializable, Comparable<UUID>{
	private static class Holder
    {
        static final SecureRandom numberGenerator = getSecureRandom();
    }
    public static SecureRandom getSecureRandom()
    {
        try
        {
            return SecureRandom.getInstance("SHA1PRNG");
        }
        catch (NoSuchAlgorithmException e)
        {
            throw new UtilException(e);
        }
    }

 /**
     * 获取类型 4(伪随机生成的)UUID 的静态工厂。 使用加密的本地线程伪随机数生成器生成该 UUID。
     *
     * @return 随机生成的 {@code UUID}
     */
    public static UUID fastUUID()
    {
        return randomUUID(false);
    }

    /**
     * 获取类型 4(伪随机生成的)UUID 的静态工厂。 使用加密的强伪随机数生成器生成该 UUID。
     *
     * @param isSecure 是否使用{@link SecureRandom}如果是可以获得更安全的随机码,否则可以得到更好的性能
     * @return 随机生成的 {@code UUID}
     */
    public static UUID randomUUID(boolean isSecure)
    {
        final Random ng = isSecure ? Holder.numberGenerator : getRandom();

        byte[] randomBytes = new byte[16];
        ng.nextBytes(randomBytes);
        randomBytes[6] &= 0x0f; /* clear version */
        randomBytes[6] |= 0x40; /* set to version 4 */
        randomBytes[8] &= 0x3f; /* clear variant */
        randomBytes[8] |= 0x80; /* set to IETF variant */
        return new UUID(randomBytes);
    }
/**
     * 获取随机数生成器对象
* ThreadLocalRandom是JDK 7之后提供并发产生随机数,能够解决多个线程发生的竞争争夺。 * * @return {@link ThreadLocalRandom} */
public static ThreadLocalRandom getRandom() { return ThreadLocalRandom.current(); }

upload中getAbsoluteFile:
不确定存放目录是否存在,如果不存在则创建目录;
如果文件不存在,则创建该文件。
element-ui实现图片上传功能(后台部分)_第14张图片
file.transferTo(desc):将二进制文件写入指定文件夹
到此,文件的上传就完成了。


getPathFileName:组装新的文件名
element-ui实现图片上传功能(后台部分)_第15张图片
StringUtils.substring:

public class StringUtils extends org.apache.commons.lang3.StringUtils {
    /** 空字符串 */
    private static final String NULLSTR = "";
    /**
     * 截取字符串
     *
     * @param str 字符串
     * @param start 开始
     * @return 结果
     */
    public static String substring(final String str, int start)
    {
        if (str == null)
        {
            return NULLSTR;
        }

        if (start < 0)
        {
            start = str.length() + start;
        }

        if (start < 0)
        {
            start = 0;
        }
        if (start > str.length())
        {
            return NULLSTR;
        }

        return str.substring(start);
    }
}

serverConfig.getUrl():
element-ui实现图片上传功能(后台部分)_第16张图片
以上就是后台将前台传递的二进制文件存入到本地服务器的全部过程。

你可能感兴趣的:(java,后端)