媒资管理模块之视频断点续传需求分析

ゞ浴缸里的玫瑰 2024-03-26 08:55 52阅读 0赞

## **5.2 理解断点续传1** ##

### **5.2.1 什么是断点续传** ###

通常视频文件都比较大，所以对于媒资系统上传文件的需求要满足大文件的上传要求。http协议本身对上传文件大小没有限制，但是客户的网络环境质量、电脑硬件环境等参差不齐，如果一个大文件快上传完了网断了没有上传完成，需要客户重新上传，用户体验非常差，所以对于大文件上传的要求最基本的是断点续传。  
什么是断点续传：  
引用百度百科：断点续传指的是在下载或上传时，将下载或上传任务（一个文件或一个压缩包）人为的划分为几个部分，每一个部分采用一个线程进行上传或下载，如果碰到网络故障，可以从已经上传或下载的部分开始继续上传下载未完成的部分，而没有必要从头开始上传下载，断点续传可以提高节省操作时间，提高用户体验性。  
断点续传流程如下图：  
![23bd73460e5b08d941a5221e2125ba9e.png_averageHue_f9f8f8_id_F0Cjl_originHeight_455_originWidth_870_originalType_binary_ratio_1_rotation_0_showTitle_false_status_done_style_none_title][]  
流程如下：  
1、前端上传前先把文件分成块  
2、一块一块的上传，上传中断后重新上传，已上传的分块则不用再上传  
3、各分块上传完成最后在服务端合并文件

### **5.2.2 分块与合并测试** ###

为了更好的理解文件分块上传的原理，下边用java代码测试文件的分块与合并。  
文件分块的流程如下：  
1、获取源文件长度  
2、根据设定的分块文件的大小计算出块数  
3、从源文件读数据依次向每一个块文件写数据。  
测试代码如下：

package com.xuecheng.media;
    
    import org.apache.commons.codec.digest.DigestUtils;
    import org.apache.commons.io.IOUtils;
    import org.junit.jupiter.api.Test;
    
    import java.io.File;
    import java.io.FileInputStream;
    import java.io.IOException;
    import java.io.RandomAccessFile;
    import java.util.*;
    
    /**
     * @author Mr.M
     * @version 1.0
     * @description 大文件处理测试
     * @date 2022/9/13 9:21
     */
    public class BigFileTest {
        
    
    
        //测试文件分块方法
        @Test
        public void testChunk() throws IOException {
        
            File sourceFile = new File("d:/develop/bigfile_test/nacos.avi");
            String chunkPath = "d:/develop/bigfile_test/chunk/";
            File chunkFolder = new File(chunkPath);
            if (!chunkFolder.exists()) {
        
                chunkFolder.mkdirs();
            }
            //分块大小
            long chunkSize = 1024 * 1024 * 1;
            //分块数量
            long chunkNum = (long) Math.ceil(sourceFile.length() * 1.0 / chunkSize);
            System.out.println("分块总数："+chunkNum);
            //缓冲区大小
            byte[] b = new byte[1024];
            //使用RandomAccessFile访问文件
            RandomAccessFile raf_read = new RandomAccessFile(sourceFile, "r");
            //分块
            for (int i = 0; i < chunkNum; i++) {
        
                //创建分块文件
                File file = new File(chunkPath + i);
                if(file.exists()){
        
                    file.delete();
                }
                boolean newFile = file.createNewFile();
                if (newFile) {
        
                    //向分块文件中写数据
                    RandomAccessFile raf_write = new RandomAccessFile(file, "rw");
                    int len = -1;
                    while ((len = raf_read.read(b)) != -1) {
        
                        raf_write.write(b, 0, len);
                        if (file.length() >= chunkSize) {
        
                            break;
                        }
                    }
                    raf_write.close();
                    System.out.println("完成分块"+i);
                }
    
            }
            raf_read.close();
    
        }
    }

文件合并流程：  
1、找到要合并的文件并按文件合并的先后进行排序。  
2、创建合并文件  
3、依次从合并的文件中读取数据向合并文件写入数  
文件合并的测试代码 ：

Java //测试文件合并方法
        @Test
        public void testMerge() throws IOException {
        
            //块文件目录
            File chunkFolder = new File("d:/develop/bigfile_test/chunk/");
            //原始文件
            File originalFile = new File("d:/develop/bigfile_test/nacos.avi");
            //合并文件
            File mergeFile = new File("d:/develop/bigfile_test/nacos01.avi");
            if (mergeFile.exists()) {
        
                mergeFile.delete();
            }
            //创建新的合并文件
            mergeFile.createNewFile();
            //用于写文件
            RandomAccessFile raf_write = new RandomAccessFile(mergeFile, "rw");
            //指针指向文件顶端
            raf_write.seek(0);
            //缓冲区
            byte[] b = new byte[1024];
            //分块列表
            File[] fileArray = chunkFolder.listFiles();
            // 转成集合，便于排序
            List<File> fileList = Arrays.asList(fileArray);
            // 从小到大排序
            Collections.sort(fileList, new Comparator<File>() {
        
                @Override
                public int compare(File o1, File o2) {
        
                    return Integer.parseInt(o1.getName()) - Integer.parseInt(o2.getName());
                }
            });
            //合并文件
            for (File chunkFile : fileList) {
        
                RandomAccessFile raf_read = new RandomAccessFile(chunkFile, "rw");
                int len = -1;
                while ((len = raf_read.read(b)) != -1) {
        
                    raf_write.write(b, 0, len);
    
                }
                raf_read.close();
            }
            raf_write.close();
    
            //校验文件
            try (
    
                    FileInputStream fileInputStream = new FileInputStream(originalFile);
                    FileInputStream mergeFileStream = new FileInputStream(mergeFile);
    
    
            ) {
        
                //取出原始文件的md5
                String originalMd5 = DigestUtils.md5Hex(fileInputStream);
                //取出合并文件的md5进行比较
                String mergeFileMd5 = DigestUtils.md5Hex(mergeFileStream);
                if (originalMd5.equals(mergeFileMd5)) {
        
                    System.out.println("合并文件成功");
                } else {
        
                    System.out.println("合并文件失败");
                }
    
            }
    
    
        }

### **5.2.3 上传视频流程** ###

下图是上传视频的整体流程：  
![6a4028ee9d855e26627017a7da742893.png_averageHue_f9f9f9_id_lM9Ga_originHeight_767_originWidth_1162_originalType_binary_ratio_1_rotation_0_showTitle_false_status_done_style_none_title][]  
1、前端上传文件前请求媒资接口层检查文件是否存在，如果已经存在则不再上传。  
2、如果文件在系统不存在则前端开始上传，首先对视频文件进行分块  
3、前端分块进行上传，上传前首先检查分块是否上传，如已上传则不再上传，如果未上传则开始上传分块。  
4、前端请求媒资管理接口层请求上传分块。  
5、接口层请求服务层上传分块。  
6、服务端将分块信息上传到MinIO。  
7、前端将分块上传完毕请求接口层合并分块。  
8、接口层请求服务层合并分块。  
9、服务层根据文件信息找到MinIO中的分块文件，下载到本地临时目录，将所有分块下载完毕后开始合并 。  
10、合并完成将合并后的文件上传到MinIO。

## **5.3 接口定义** ##

根据上传视频流程，定义接口，与前端的约定是操作成功返回\{code:0\}否则返回\{code:-1\}  
从课程资料中拷贝RestResponse.java类到base工程下的model包下。  
定义接口如下：

Javapackage com.xuecheng.media.api;
    
    import com.j256.simplemagic.ContentInfo;
    import com.j256.simplemagic.ContentInfoUtil;
    import com.xuecheng.base.model.RestResponse;
    import com.xuecheng.media.model.dto.UploadFileParamsDto;
    import com.xuecheng.media.service.MediaFileService;
    import io.swagger.annotations.Api;
    import io.swagger.annotations.ApiOperation;
    import org.springframework.beans.factory.annotation.Autowired;
    import org.springframework.web.bind.annotation.*;
    import org.springframework.web.multipart.MultipartFile;
    
    /**
     * @author Mr.M
     * @version 1.0
     * @description 大文件上传接口
     * @date 2022/9/6 11:29
     */
    @Api(value = "大文件上传接口", tags = "大文件上传接口")
    @RestController
    public class BigFilesController {
        
    
        @Autowired
        MediaFileService mediaFileService;
    
    
        @ApiOperation(value = "文件上传前检查文件")
        @PostMapping("/upload/checkfile")
        public RestResponse<Boolean> checkfile(
                @RequestParam("fileMd5") String fileMd5
        ) throws Exception {
        
            
        }
    
    
        @ApiOperation(value = "分块文件上传前的检测")
        @PostMapping("/upload/checkchunk")
        public RestResponse<Boolean> checkchunk(@RequestParam("fileMd5") String fileMd5,
                                                @RequestParam("chunk") int chunk) throws Exception {
        
           
        }
    
        @ApiOperation(value = "上传分块文件")
        @PostMapping("/upload/uploadchunk")
        public RestResponse uploadchunk(@RequestParam("file") MultipartFile file,
                                        @RequestParam("fileMd5") String fileMd5,
                                        @RequestParam("chunk") int chunk) throws Exception {
        
    
            
        }
    
        @ApiOperation(value = "合并文件")
        @PostMapping("/upload/mergechunks")
        public RestResponse mergechunks(@RequestParam("fileMd5") String fileMd5,
                                        @RequestParam("fileName") String fileName,
                                        @RequestParam("chunkTotal") int chunkTotal) throws Exception {
        
            
    
        }
    
    
    }

## **5.4 接口开发** ##

### **5.4.1 DAO开发** ###

向媒资数据库的文件表插入记录，使用自动生成的Mapper接口即可满足要求。

### **5.4.2 Service开发** ###

#### **5.4.2.1 检查文件和分块** ####

接口完成进行接口实现，首先实现检查文件方法和检查分块方法。  
service接口定义

service接口实现方法：

Java@Override
    public RestResponse<Boolean> checkFile(String fileMd5) {
        
        //查询文件信息
        MediaFiles mediaFiles = mediaFilesMapper.selectById(fileMd5);
        if (mediaFiles != null) {
        
            //桶
            String bucket = mediaFiles.getBucket();
            //存储目录
            String filePath = mediaFiles.getFilePath();
            //文件流
            InputStream stream = null;
            try {
        
                stream = minioClient.getObject(
                        GetObjectArgs.builder()
                                .bucket(bucket)
                                .object(filePath)
                                .build());
    
                if (stream != null) {
        
                    //文件已存在
                    return RestResponse.success(true);
                }
            } catch (Exception e) {
        
               
            }
        }
        //文件不存在
        return RestResponse.success(false);
    }
    
    
    
    @Override
    public RestResponse<Boolean> checkChunk(String fileMd5, int chunkIndex) {
        
    
        //得到分块文件目录
        String chunkFileFolderPath = getChunkFileFolderPath(fileMd5);
        //得到分块文件的路径
        String chunkFilePath = chunkFileFolderPath + chunkIndex;
    
        //文件流
        InputStream fileInputStream = null;
        try {
        
            fileInputStream = minioClient.getObject(
                    GetObjectArgs.builder()
                            .bucket(bucket_videoFiles)
                            .object(chunkFilePath)
                            .build());
    
            if (fileInputStream != null) {
        
                //分块已存在
                return RestResponse.success(true);
            }
        } catch (Exception e) {
        
            
        }
        //分块未存在
        return RestResponse.success(false);
    }
    
    //得到分块文件的目录
    private String getChunkFileFolderPath(String fileMd5) {
        
        return fileMd5.substring(0, 1) + "/" + fileMd5.substring(1, 2) + "/" + fileMd5 + "/" + "chunk" + "/";
    }

#### **5.4.2.2 上传分块** ####

定义service接口

Java/**
     * @description 上传分块
     * @param fileMd5  文件md5
     * @param chunk  分块序号
     * @param bytes  文件字节
     * @return com.xuecheng.base.model.RestResponse
     * @author Mr.M
     * @date 2022/9/13 15:50
    */
    public RestResponse uploadChunk(String fileMd5,int chunk,byte[] bytes);

接口实现：

Java@Override
    public RestResponse uploadChunk(String fileMd5, int chunk, byte[] bytes) {
        
    
    
        //得到分块文件的目录路径
        String chunkFileFolderPath = getChunkFileFolderPath(fileMd5);
        //得到分块文件的路径
        String chunkFilePath = chunkFileFolderPath + chunk;
    
        try {
        
        //将文件存储至minIO
        addMediaFilesToMinIO(bytes, bucket_videoFiles,chunkFilePath);
         return RestResponse.success(true);
        } catch (Exception ex) {
        
            ex.printStackTrace();
            log.debug("上传分块文件:{},失败:{}",chunkFilePath,e.getMessage());
        }
        return RestResponse.validfail(false,"上传分块失败");
    }

#### **5.4.2.3 上传分块测试** ####

完善接口层：

启动前端工程，进入上传视频界面进行测试。

#### **5.4.2.4 合并前下载分块** ####

所有分块文件下载成功后开始合并这些分块文件。  
定义service接口：

Java/**
     * @description 合并分块
     * @param companyId  机构id
     * @param fileMd5  文件md5
     * @param chunkTotal 分块总和
     * @param uploadFileParamsDto 文件信息
     * @return com.xuecheng.base.model.RestResponse
     * @author Mr.M
     * @date 2022/9/13 15:56
    */
    public RestResponse mergechunks(Long companyId,String fileMd5,int chunkTotal,UploadFileParamsDto uploadFileParamsDto);

合并分块前要检查分块文件是否全部上传完成，如果完成则将已经上传的分块文件下载下来，然后再进行合并，如下：

Java@Override
    public RestResponse mergechunks(Long companyId, String fileMd5, int chunkTotal, UploadFileParamsDto uploadFileParamsDto) {
        
    
        //下载所有分块文件
        File[] chunkFiles = checkChunkStatus(fileMd5, chunkTotal);
        ....

下边先实现检查及下载所有分块的方法。

Java//检查所有分块是否上传完毕
    private File[] checkChunkStatus(String fileMd5, int chunkTotal) {
        
        //得到分块文件的目录路径
        String chunkFileFolderPath = getChunkFileFolderPath(fileMd5);
        File[] files = new File[chunkTotal];
        //检查分块文件是否上传完毕
        for (int i = 0; i < chunkTotal; i++) {
        
            String chunkFilePath = chunkFileFolderPath + i;
            //下载文件
            File chunkFile =null;
            try {
        
                chunkFile = File.createTempFile("chunk" + i, null);
            } catch (IOException e) {
        
                e.printStackTrace();
                XueChengPlusException.cast("下载分块时创建临时文件出错");
            }
            downloadFileFromMinIO(chunkFile,bucket_videoFiles,chunkFilePath);
            files[i]=chunkFile;
        }
        return files;
    }
    //得到分块文件的目录
    private String getChunkFileFolderPath(String fileMd5) {
        
        return fileMd5.substring(0, 1) + "/" + fileMd5.substring(1, 2) + "/" + fileMd5 + "/" + "chunk" + "/";
    }
    //根据桶和文件路径从minio下载文件
    public File downloadFileFromMinIO(File file,String bucket,String objectName){
        
        InputStream fileInputStream = null;
        OutputStream fileOutputStream = null;
        try {
        
            fileInputStream = minioClient.getObject(
                    GetObjectArgs.builder()
                            .bucket(bucket)
                            .object(objectName)
                            .build());
            try {
        
                fileOutputStream = new FileOutputStream(file);
                IOUtils.copy(fileInputStream, fileOutputStream);
    
            } catch (IOException e) {
        
                XueChengPlusException.cast("下载文件"+objectName+"出错");
            }
        } catch (Exception e) {
        
            e.printStackTrace();
            XueChengPlusException.cast("文件不存在"+objectName);
        } finally {
        
            if (fileInputStream != null) {
        
                try {
        
                    fileInputStream.close();
                } catch (IOException e) {
        
                    e.printStackTrace();
                }
            }
            if (fileOutputStream != null) {
        
                try {
        
                    fileOutputStream.close();
                } catch (IOException e) {
        
                    e.printStackTrace();
                }
            }
        }
        return file;
    }```
    
    ### **5.4.2.5 合并分块**
    合并分块接口实现如下：
    
    ```java
    Java@Override
    public RestResponse mergechunks(Long companyId, String fileMd5, int chunkTotal, UploadFileParamsDto uploadFileParamsDto) {
        
    
        String fileName = uploadFileParamsDto.getFilename();
        //下载所有分块文件
        File[] chunkFiles = checkChunkStatus(fileMd5, chunkTotal);
        //扩展名
        String extName = fileName.substring(fileName.lastIndexOf("."));
        //创建临时文件作为合并文件
        File mergeFile = null;
        try {
        
            mergeFile = File.createTempFile(fileMd5, extName);
        } catch (IOException e) {
        
            XueChengPlusException.cast("合并文件过程中创建临时文件出错");
        }
    
        try {
        
            //开始合并
            byte[] b = new byte[1024];
            try(RandomAccessFile raf_write = new RandomAccessFile(mergeFile, "rw");) {
        
                for (File chunkFile : chunkFiles) {
        
                    try (FileInputStream chunkFileStream = new FileInputStream(chunkFile);) {
        
                        int len = -1;
                        while ((len = chunkFileStream.read(b)) != -1) {
        
                            //向合并后的文件写
                            raf_write.write(b, 0, len);
                        }
                    }
                }
            } catch (IOException e) {
        
                e.printStackTrace();
                XueChengPlusException.cast("合并文件过程中出错");
            }
            log.debug("合并文件完成{}",mergeFile.getAbsolutePath());
            uploadFileParamsDto.setFileSize(mergeFile.length());
    
            try (InputStream mergeFileInputStream = new FileInputStream(mergeFile);) {
        
                //对文件进行校验，通过比较md5值
                String newFileMd5 = DigestUtils.md5Hex(mergeFileInputStream);
                if (!fileMd5.equalsIgnoreCase(newFileMd5)) {
        
                    //校验失败
                    XueChengPlusException.cast("合并文件校验失败");
                }
                log.debug("合并文件校验通过{}",mergeFile.getAbsolutePath());
            } catch (Exception e) {
        
                e.printStackTrace();
                //校验失败
                XueChengPlusException.cast("合并文件校验异常");
            }
    
            //将临时文件上传至minio
            String mergeFilePath = getFilePathByMd5(fileMd5, extName);
            try {
        
    
                //上传文件到minIO
                addMediaFilesToMinIO(mergeFile.getAbsolutePath(), bucket_videoFiles, mergeFilePath);
                log.debug("合并文件上传MinIO完成{}",mergeFile.getAbsolutePath());
            } catch (Exception e) {
        
                e.printStackTrace();
                XueChengPlusException.cast("合并文件时上传文件出错");
            }
    
            //入数据库
            MediaFiles mediaFiles = currentProxy.addMediaFilesToDb(companyId, fileMd5, uploadFileParamsDto, bucket_videoFiles, mergeFilePath);
            if (mediaFiles == null) {
        
                XueChengPlusException.cast("媒资文件入库出错");
            }
    
            return RestResponse.success();
        } finally {
        
            //删除临时文件
            for (File file : chunkFiles) {
        
                try {
        
                    file.delete();
                } catch (Exception e) {
        
    
                }
            }
            try {
        
                mergeFile.delete();
            } catch (Exception e) {
        
    
            }
        }
    }
    
    
     private String getFilePathByMd5(String fileMd5,String fileExt){
        
        return   fileMd5.substring(0,1) + "/" + fileMd5.substring(1,2) + "/" + fileMd5 + "/" +fileMd5 +fileExt;
    }
    
    
    //将文件上传到minIO，传入文件绝对路径
    public void addMediaFilesToMinIO(String filePath, String bucket, String objectName) {
        
        //扩展名
        String extension = null;
        if(objectName.indexOf(".")>=0){
        
            extension = objectName.substring(objectName.lastIndexOf("."));
        }
        //获取扩展名对应的媒体类型
        String contentType = getMimeTypeByExtension(extension);
        try {
        
            minioClient.uploadObject(
                    UploadObjectArgs.builder()
                            .bucket(bucket)
                            .object(objectName)
                            .filename(filePath)
                            .contentType(contentType)
                            .build());
        } catch (Exception e) {
        
            e.printStackTrace();
            XueChengPlusException.cast("上传文件到文件系统出错");
        }
    }
    
    private String getMimeTypeByExtension(String extension){
        
        String contentType = MediaType.APPLICATION_OCTET_STREAM_VALUE;
        if(StringUtils.isNotEmpty(extension)){
        
            ContentInfo extensionMatch = ContentInfoUtil.findExtensionMatch(extension);
            if(extensionMatch!=null){
        
                contentType = extensionMatch.getMimeType();
            }
        }
        return contentType;
    
    }

#### **5.4.3 接口层完善** ####

下边完善接口层

Java@ApiOperation(value = "文件上传前检查文件")
    @PostMapping("/upload/checkfile")
    public RestResponse<Boolean> checkfile(
            @RequestParam("fileMd5") String fileMd5
    ) throws Exception {
        
        return mediaFileService.checkFile(fileMd5);
    }
    
    
    @ApiOperation(value = "分块文件上传前的检测")
    @PostMapping("/upload/checkchunk")
    public RestResponse<Boolean> checkchunk(@RequestParam("fileMd5") String fileMd5,
                                            @RequestParam("chunk") int chunk) throws Exception {
        
        return mediaFileService.checkChunk(fileMd5,chunk);
    }
    
    @ApiOperation(value = "上传分块文件")
    @PostMapping("/upload/uploadchunk")
    public RestResponse uploadchunk(@RequestParam("file") MultipartFile file,
                                    @RequestParam("fileMd5") String fileMd5,
                                    @RequestParam("chunk") int chunk) throws Exception {
        
    
        return mediaFileService.uploadChunk(fileMd5,chunk,file.getBytes());
    }
    
    @ApiOperation(value = "合并文件")
    @PostMapping("/upload/mergechunks")
    public RestResponse mergechunks(@RequestParam("fileMd5") String fileMd5,
                                    @RequestParam("fileName") String fileName,
                                    @RequestParam("chunkTotal") int chunkTotal) throws Exception {
        
        Long companyId = 1232141425L;
    
        UploadFileParamsDto uploadFileParamsDto = new UploadFileParamsDto();
        uploadFileParamsDto.setFileType("001002");
        uploadFileParamsDto.setTags("课程视频");
        uploadFileParamsDto.setRemark("");
        uploadFileParamsDto.setFilename(fileName);
    
        return mediaFileService.mergechunks(companyId,fileMd5,chunkTotal,uploadFileParamsDto);
    
    }

## **5.5 接口测试** ##

如果是单个接口测试使用httpclient

Java### 检查文件
    POST{
        {
        media_host}}/media/upload/register
    Content-Type: application/x-www-form-urlencoded;
    
    fileMd5=c5c75d70f382e6016d2f506d134eee11
    
    ### 上传分块前检查
    POST {
        {
        media_host}}/media/upload/checkchunk
    Content-Type: application/x-www-form-urlencoded;
    
    fileMd5=c5c75d70f382e6016d2f506d134eee11&chunk=0
    
    ### 上传分块文件
    POST {
        {
        media_host}}/media/upload/uploadchunk?fileMd5=c5c75d70f382e6016d2f506d134eee11&chunk=1
    Content-Type: multipart/form-data; boundary=WebAppBoundary
    
    --WebAppBoundaryContent-Disposition: form-data; name="file"; filename="1"
    Content-Type: application/octet-stream
    
    < E:/ffmpeg_test/chunks/1
    
    
    ### 合并文件
    POST {
        {
        media_host}}/media/upload/mergechunks
    Content-Type: application/x-www-form-urlencoded;
    
    fileMd5=dcb37b85c9c03fc5243e20ab4dfbc1c8&fileName=8.avi&chunkTotal=1

下边介绍采用前后端联调：  
1、首先在每个接口层方法上打开断点  
在前端上传视频，观察接口层是否收到参数。  
2、进入service方法逐行跟踪。  
3、断点续传测试  
上传一部分后，停止刷新浏览器再重新上传，通过浏览器日志发现已经上传过的分块不再重新上传  
![d348f1ec1a90ee9fbc126d1b03a75dcc.png_averageHue_f9f9f9_id_BBmQF_originHeight_182_originWidth_854_originalType_binary_ratio_1_rotation_0_showTitle_false_status_done_style_none_title][]

[23bd73460e5b08d941a5221e2125ba9e.png_averageHue_f9f8f8_id_F0Cjl_originHeight_455_originWidth_870_originalType_binary_ratio_1_rotation_0_showTitle_false_status_done_style_none_title]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/e2fe806bc7614071b585fa454a2d98a2.png
[6a4028ee9d855e26627017a7da742893.png_averageHue_f9f9f9_id_lM9Ga_originHeight_767_originWidth_1162_originalType_binary_ratio_1_rotation_0_showTitle_false_status_done_style_none_title]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/01c6b21818da4e618401a5893c759b9d.png
[d348f1ec1a90ee9fbc126d1b03a75dcc.png_averageHue_f9f9f9_id_BBmQF_originHeight_182_originWidth_854_originalType_binary_ratio_1_rotation_0_showTitle_false_status_done_style_none_title]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/a2ebb314bebb4bad961bce88d0a944b3.png