网站首页 > 知识剖析正文

JAVA全栈CMS系统vue图片/视频上传组件，多图上传及删除功能11

nixiaole 2024-11-27 18:39:02 知识剖析 18 ℃

1.上一期文件头像上传的file表借鉴

# 12.文件资源管理表
DROP TABLE IF EXISTS `file`;
CREATE TABLE `file`(
	`uni_id` CHAR(8) NOT NULL DEFAULT '' COMMENT '唯一ID',
	`name` VARCHAR(100) NOT NULL COMMENT '文件名',
	`path` VARCHAR(100) NOT NULL COMMENT '文件相对路径',
	`module_id` CHAR(8) COMMENT '模块ID',
	`user_id` CHAR(8) COMMENT '上传用户ID',
	`suffix` VARCHAR(100) COMMENT '文件后缀',
	`size` INT COMMENT '大小|字节B',
	`content_type` VARCHAR(100) COMMENT '文件上传类型',
	`type_id` int(11) NOT NULL DEFAULT '0' COMMENT '资源类型',
	`use_type` CHAR(1) COMMENT '应用场景|P公共资源|I私有资源|D公司宣传资料|A公司活动资料|C公司产品资料|T其他',
	`is_show` int DEFAULT '1' COMMENT '显示1 || 不显示0',
	`create_time` datetime(3) DEFAULT NULL COMMENT '创建时间',
  `update_time` datetime(3) DEFAULT NULL COMMENT '修改时间',
	PRIMARY KEY (`uni_id`),
	UNIQUE KEY `path_unique` (`path`)
)ENGINE=INNODB DEFAULT charset=utf8mb4 COMMENT='文件资源管理表';

本期功能实现预览

2.更新上传文件，自动创建递归二级目录：根据use_type创建一级目录，根据日期创建二级目录

Controller更新后端递归新增目录方法

package cevent.source.cloudcenter.source.controller.admin;/**
 * Created by Cevent on 2021/4/24.
 */

import cevent.source.cloudcenter.server.dto.FileDto;
import cevent.source.cloudcenter.server.dto.ResponseDataDto;
import cevent.source.cloudcenter.server.enums.UseTypeEnum;
import cevent.source.cloudcenter.server.service.FileService;
import cevent.source.cloudcenter.server.util.UUID8Util;
import org.slf4j.Logger;
import org.slf4j.LoggerFactory;
import org.springframework.beans.factory.annotation.Value;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.RestController;
import org.springframework.web.multipart.MultipartFile;

import javax.annotation.Resource;
import java.io.File;
import java.io.IOException;
import java.text.SimpleDateFormat;
import java.util.Date;

/**
 * @author cevent
 * @description 文件上传：单图
 * @date 2021/4/24 14:41
 */
@RestController
@RequestMapping("/admin")
public class UploadIconController {
    private static final Logger LOG= LoggerFactory.getLogger(UploadIconController.class);
    public static final String BUSINESS_NAME="文件上传模块";

    @Resource
    private FileService fileService;

    //注入properties中的file配置
    @Value("${file.targetPath}")
    private String FILE_TARGET_PATH;
    @Value("${file.getPath}")
    private String FILE_GET_PATH;
    /*1.单图上传：
    @RequestParam：基于文件是formData形式传输
    MultipartFile：富文本大文件
    file：formData.append('file',icon)，前端formData中提交file参数名，包含元素查询中的icon文件
     */
    @RequestMapping("/test")
    public String test(){
        return "文件系统模块启动成功";
    }

    @RequestMapping("/upload/icon")
    public ResponseDataDto uploadIcon(@RequestParam MultipartFile file,String moduleId,String useType) throws IOException {
        LOG.info("上传的文件file：{}",file);
        LOG.info("上传的文件file名fileName：{}",file.getOriginalFilename());
        LOG.info("上传的文件file大小：{}",file.getSize());
        LOG.info("上传的文件file名name：{}",file.getName());
        LOG.info("上传的文件file类型：{}",file.getContentType());

        //保存文件到本地
        String fileName=file.getOriginalFilename();
        String fileKey= UUID8Util.getShortUUID();
        //获取文件后缀名(类型)，全部转小写
        String suffix=fileName.substring(fileName.lastIndexOf(".")+1).toLowerCase();
        String contentType=file.getContentType();
        Long size=file.getSize();

        //文件名配置
        Date now=new Date();
        String date=new SimpleDateFormat("yyyy-MM-dd HH-mm-ss").format(now);

        //获取枚举类型，生成新的文件夹路径
        UseTypeEnum useTypeEnum=UseTypeEnum.getByCode(useType);
        //获取到枚举名SOURCE("","")
        String dateDir=new SimpleDateFormat("yyyy_MM_dd").format(now);
        String dir=useTypeEnum.name().toLowerCase();
        File fullDir=new File(FILE_TARGET_PATH+"source"+File.separator+dir+File.separator+dateDir);
        LOG.info("创建的fullDir目录：{}",fullDir);
        //创建文件夹
        if(!fullDir.exists()){
            fullDir.mkdirs();
            LOG.info("创建成功目录？：{}",fullDir.mkdirs());
        }
        String name=date+"_"+fileKey+"_"+fileName;
        //File.separator生成不同操作系统的/斜杠
        String path="source/"+dir+File.separator+dateDir+File.separator+name;
        LOG.info("上传的path：{}",path);
        //全路径
        String fullPath=FILE_TARGET_PATH+path;
        //放入日期目录
        File dest=new File(fullPath);
        file.transferTo(dest);
        LOG.info("获取destination目的位置完全路径：{}",dest.getAbsolutePath());

        //保存file
        FileDto fileDto=new FileDto();
        fileDto.setName(name);
        //返回相对路径
        //fileDto.setPath(path);
        //返回全路径
        fileDto.setPath(FILE_GET_PATH+path);
        fileDto.setSuffix(suffix);
        fileDto.setContentType(contentType);
        fileDto.setSize(Math.toIntExact(size));
        fileDto.setUseType(useType);
        fileDto.setIsShow(0);
        fileDto.setModuleId(moduleId);

        fileService.save(fileDto);
        ResponseDataDto responseData=new ResponseDataDto();
        responseData.setResponseData(fileDto);
        return responseData;
    }
}

文章模块更新图片上传：保存bug：pic_list为longTest类型，mybatis普通的insert无法保存该类型，需要

pageDto查询方法更新

3.前端上传视频更新fileIcon组件，引用后的接收请求格式即可

Template模块…
<el-form-item label="文章视频" prop="articleVideo">
    <file-icon :upload-tile="'上传视频'" :input-id="'upload-articleVideo-icon'" :suffix-type="['mp4']"
               :uniId="article.uniId" :use-type="SOURCE_USE_TYPE.SOURCE_PUBLIC.key"
               :after-upload="afterArticleVideoUpload"></file-icon>
    <el-row class="upload-icon">
        <el-col :span="12">
            <video class="articleVideo" :src="article.articleVideo" controls="controls" ></video>
        </el-col>
    </el-row>
</el-form-item>
Css部分
/*视频上传*/
.articleVideo{
    width: 100%;
}

4.自动获取视频时长

Template模块
<el-form-item label="文章视频" prop="articleVideo">
    <file-icon :upload-tile="'上传视频'" :input-id="'upload-articleVideo-icon'" :suffix-type="['mp4']"
               :uniId="article.uniId" :use-type="SOURCE_USE_TYPE.SOURCE_PUBLIC.key"
               :after-upload="afterArticleVideoUpload"></file-icon>
    <el-row class="upload-icon">
        <el-col :span="12">
            <video id="av" class="articleVideo" :src="article.articleVideo" controls="controls" ></video>
        </el-col>
    </el-row>
</el-form-item>
<el-form-item label="时长" prop="videoTime">
                    <el-input id="videoTime" class="inputLine" v-model="article.videoTime" disabled></el-input>
</el-form-item>

视频时长转换
afterArticleVideoUpload(resp){
    console.log("上传到的article视频地址：",resp.responseData);
    this.article.articleVideo=resp.responseData.path;
    this.getVideoTime();
    console.log("这里的picList：",this.article.articleVideo);
},

//获取视频时间
getVideoTime(){
    let video=document.getElementById("av");
    this.article.videoTime=parseInt(video.duration,10);
    console.log("videoTime转换：",this.article.videoTime);
}

5.多图上传回显，使用file表进行module关联更新

1)fileController更新，根据moduleId查询file列表

/*
根据moduleId查询文件列表
 */
@GetMapping("/list/{moduleId}")
public ResponseDataDto listByModuleId(@PathVariable String moduleId){
    ResponseDataDto responseData=new ResponseDataDto();
    List<FileDto> fileDtos=fileService.listByModuleId(moduleId);
    responseData.setResponseData(fileDtos);
    return responseData;
}

2)fileService更新实现

//7.根据传入的moduleId查询file文件列表
public List<FileDto> listByModuleId(String moduleId){
    FileExample fileExample=new FileExample();
    FileExample.Criteria criteria=fileExample.createCriteria();
    criteria.andModuleIdEqualTo(moduleId);
    List<File> files=fileMapper.selectByExample(fileExample);
    return DuplicateUtil.copyList(files,FileDto.class);
}

3) article更新edit方法，进入页面之前根据moduleId查询fileList

//4.修改
edit(article) {
    console.log("edit的article：", article);
    /*jquery继承对象： $.extend({新对象},旧对象)
    避免vue数据绑定漏洞，更改数据时，随之更改显示的data，但实际没有进行真实保存数据库
     */
    this.article = $.extend({}, article);
    //SessionStorage.set("article",article);
    SessionStorage.set(ARTICLE_MODULE_PARENTID,this.module.parentId);
    console.log("从moduleSub传入的module：",this.module);

    //加载article的文件列表
    Loadings.show();
    this.$axios.get(process.env.VUE_APP_SERVER + '/source/admin/file/list/'+ article.uniId)
        .then((response)=>{
            let resp=response.data;
            if(resp.success){
                SessionStorage.set(FILE_LIST,resp.responseData);
                console.log("缓存中的aticle-file-list：",SessionStorage.get(FILE_LIST));
                Loadings.hide();
            }
        });
    this.$router.push({
        name: "business/article/add",
        params: {article}
    });
},

4) addArticle在mounted时，获取sessionStorage中的FILE_LIST，同步到files

mounted() {
    console.log(this.message);
    console.log("传入的article==>params：", this.$route.params.article);
    let moduleParentId = SessionStorage.get(ARTICLE_MODULE_PARENTID) || "";
    if (this.$route.params.article != null) {
        this.article = this.$route.params.article;
        this.article.moduleUniId = moduleParentId;
        //2.获取当前article的富文本内容
        $("#content").summernote('code', this.article.articleContent);
        //缓存中的文件列表
        this.files= SessionStorage.get(FILE_LIST);
        console.log("传入的FILE_LIST:",this.files);
        console.log("article传入的moduleParentId：", moduleParentId);
        let optionArticle = document.getElementById("optionArticle");
        let submitBtn = document.getElementById("submitBtn");
        optionArticle.innerHTML = '更新文章数据';
        submitBtn.innerHTML = "立即更新";
    } else {
        //获取article在session中保存的articleModuleId
        let moduleId = SessionStorage.get(ARTICLE_MODULE_ID) || "";
        console.log("article传入的moduleId缓存session数据：", moduleId);
        if (moduleId !== null) {
            this.article = {};
            this.article.moduleId = moduleId;
            this.article.moduleUniId = moduleParentId;
        }
    }
    //富文本
    $("#content").summernote({
        focus: true,
        height: 300
    })

},

5) addArticle在上传picList时，更新files中的图片列表，再次写入缓存setSession，并调用savePicList方法，将files中的path保存到picList

//接收文件上传组件传入的resp
afterUpload(resp) {
    if (resp.success) {
        console.log("上传到的article图片列表地址：", resp.responseData);
        this.article.picList = resp.responseData.path;
        console.log("这里的picList：", this.article.picList);
        this.getFiles();
    }
},
getFiles(){
    this.$axios.get(process.env.VUE_APP_SERVER + '/source/admin/file/list/'+ this.article.uniId)
        .then((response)=>{
            let resp=response.data;
            if(resp.success){
                this.files=resp.responseData;
                this.savePicList(this.files);
                SessionStorage.set(FILE_LIST,this.files);
            }
        });
},
//存入picList
savePicList(files){
    let pics=[];
    for(let i=0;i<files.length;i++){
        pics.push(files[i].path);
        this.article.picList=JSON.stringify(pics);
    }
    console.log("存入的picList：",this.article.picList);
},

6)addArticle在删除时，调用tools中的删除数组对象方removeObj(array,file)，再次调用getFiles更新picList

//删除文件
delFile(file){
    let _this = this;
    let fileParam =file;
    toast.showConfirm(file.name, function () {
        _this.$axios.delete(process.env.VUE_APP_SERVER + '/source/admin/file/del/' + fileParam.uniId)
            .then((response) => {
                let resp = response.data;
                if (resp.success) {
                    console.log("删除的模块-文件资源：", file.path);
                    _this.getFiles();
                    Tool.removeObj(_this.files,file);
                    console.log("files删除成功了吗？",Tool.removeObj(_this.files,file));
                    //_this.pageList(1);
                }
            })
    })
},

gitee提交，源码开放，长期维护，欢迎fork，关注，mark，点赞，收藏，转发

gitee地址：
https://gitee.com/cevent_OS/yameng-cevent-source-cloudcenter.git

上一篇：简单易懂的大文件上传教程:Vue3与.NET 6完美结合
下一篇： WebRTC录采集平面数据

网站首页 > 知识剖析 正文

JAVA全栈CMS系统vue图片/视频上传组件，多图上传及删除功能11

1.上一期文件头像上传的file表借鉴

2.更新上传文件，自动创建递归二级目录：根据use_type创建一级目录，根据日期创建二级目录

Controller更新后端递归新增目录方法

文章模块更新图片上传：保存bug：pic_list为longTest类型，mybatis普通的insert无法保存该类型，需要

pageDto查询方法更新

3.前端上传视频更新fileIcon组件，引用后的接收请求格式即可

4.自动获取视频时长

5.多图上传回显，使用file表进行module关联更新

1)fileController更新，根据moduleId查询file列表

2)fileService更新实现

3) article更新edit方法，进入页面之前根据moduleId查询fileList

4) addArticle在mounted时，获取sessionStorage中的FILE_LIST，同步到files

5) addArticle在上传picList时，更新files中的图片列表，再次写入缓存setSession，并调用savePicList方法，将files中的path保存到picList

6)addArticle在删除时，调用tools中的删除数组对象方removeObj(array,file)，再次调用getFiles更新picList

猜你喜欢

网站首页 > 知识剖析正文