经验笔记 - 01

经验笔记 - 01,第1张

文章目录 后端1. SpringBoot实现文件上传1.1 配置类 UploadConfig1.2 配置文件 application.properties1.3 配置文件读取 UploadProperties1.4 工具类1.4.1 唯一ID生成器 IDUtils1.4.2 文件名替换工具 UploadUtils 1.5 web层 CoursewareController1.6 service层 UploadService CoursewareService1.7 PostMan测试文件上传 前端2. Vue实现文件上传2.1 单文件上传2.1.1 业务逻辑2.1.2 代码实现 2.2 一个页面多处地方需要文件上传2.2.1 业务逻辑2.2.2 代码实现
欢迎访问笔者个人技术博客: http://rukihuang.xyz/

后端 9月初,接到单位领导的任务,要求实现一个在线教育平台,主要展示岗位教学视频,以及相关的作业指导书,并建议要配套一个后台系统方便文件的上传和管理。作为后端开发,决定使用前后端分离,前端使用vue-admin-element,后端使用Springboot+MyBatis,数据库使用Mysql,容器使用tomcat,以及部署vue项目需要的nginx,jdk使用1.8由于项目开发只有我一个人,开发过程中遇到了不少问题,但所幸都一一解决了,趁着摸鱼的空档,决定将遇到的问题和解决方法记录下来,方便之后查阅。 1. SpringBoot实现文件上传 参考的是这篇掘金的文章,很详细。SpringBoot实现文件上传 1.1 配置类 UploadConfig 限制上传文件大小,以及总的请求文件大小。
/**
 * @author :RukiHuang
 * @description:文件上传配置类
 *                 配置MaxFileSize等属性
 * @date :2022/9/2 9:45
 */
@Configuration
public class UploadConfig {

    @Bean
    public MultipartConfigElement multipartConfigElement() {
        MultipartConfigFactory factory = new MultipartConfigFactory();
        //单个数据大小
        factory.setMaxFileSize(DataSize.ofMegabytes(200));
        //总上传文件的大小
        factory.setMaxRequestSize(DataSize.ofGigabytes(10));
        return factory.createMultipartConfig();
    }
}

也可以通过在 application.properties配置文件中指定
#文件上传
# 文件大小设置已在UploadConfig中配置,也可在配置文件中配置
#单个文件大小
spring.servlet.multipart.max-file-size=200MB
#总文件大小(允许存储文件的文件夹大小)
spring.servlet.multipart.max-request-size=10240MB
1.2 配置文件 application.properties 指定文件上传目标路径以及允许的文件类型
#文件上传的目标路径
file.upload.path=G:\temp\
#文件上传允许的类型
file.upload.allowType[0]=application/pdf
file.upload.allowType[1]=video/mp4
1.3 配置文件读取 UploadProperties
/**
 * @author :RukiHuang
 * @description:文件上传
 *                  上传路径
 *                  文件格式
 * @date :2022/9/2 10:05
 */
@Component
@ConfigurationProperties(prefix = "file.upload")
public class UploadProperties {
    private String path;
    private List<String> allowTypeList;

    public String getPath() {
        return path;
    }

    public void setPath(String path) {
        this.path = path;
    }

    public List<String> getAllowType() {
        return allowTypeList;
    }

    public void setAllowType(List<String> allowTypeList) {
        this.allowTypeList = allowTypeList;
    }
}

1.4 工具类 1.4.1 唯一ID生成器 IDUtils 生成唯一id
/**
 * @author :RukiHuang
 * @description:唯一ID生成器
 * @date :2022/9/2 10:07
 */
public class IDUtils {
    public static String generateUniqueId() {
        return UUID.randomUUID().toString() + System.currentTimeMillis();
    }
}
1.4.2 文件名替换工具 UploadUtils 替换原始文件名,避免文件名重复
/**
 * @author :RukiHuang
 * @description:文件名替换工具 避免文件名重复
 * @date :2022/9/2 10:09
 */
public class UploadUtils {
    public static String generateFileName(String oldName) {
        String suffix = oldName.substring(oldName.lastIndexOf("."));
        return IDUtils.generateUniqueId() + suffix;
    }
}
1.5 web层 CoursewareController
/**
 * @author :RukiHuang
 * @description:课件的Controller
 * @date :2022/9/1 13:37
 */
@CrossOrigin(origins = "*",maxAge = 3600)
@RequestMapping("/forum")
@RestController
public class CoursewareController {

    private static Logger logger = LoggerFactory.getLogger(DocController.class);

    @Autowired
    CoursewareService coursewareService;

    @Autowired
    UploadService uploadService;

    @RequestMapping("/coursewareUpload/uploadCourseware")
    public ResponseResult uploadVideo(
            @RequestParam("file") MultipartFile file
    ) {
        String filename = null;
        try {
            filename = uploadService.uploadCourseware(file);
            return ResponseResult.ok(filename, "课件上传成功");
        } catch (IOException e) {
            logger.error(e.getMessage());
            return ResponseResult.failed(e.getMessage(),"课件上传失败");
        }

    }

    @RequestMapping(value = "/coursewareUpload/submitCoursewareInfo", method = RequestMethod.POST)
    public ResponseResult submitCoursewareInfo(
            @RequestParam(name = "serverFileName")String serverFileName) {
        try {
            coursewareService.addCoursewareInfo(serverFileName);
            return ResponseResult.ok("提交成功");
        } catch (Exception e) {
            logger.error(e.getMessage());
            return ResponseResult.failed(e.getMessage(), "提交失败");
        }

    }

}

1.6 service层 UploadService CoursewareService UploadService
/**
 * @author :RukiHuang
 * @description:上传service
 * @date :2022/9/2 10:16
 */
@Service
public class UploadServiceImpl implements UploadService {

    @Autowired
    UploadProperties uploadProperties;
    
    @Override
    public String uploadCourseware(MultipartFile file) throws IOException {
        System.out.println(file.getContentType());
        if(!uploadProperties.getAllowType().get(0).equals(file.getContentType())) {
            throw new IOException("课件上传类型错误");
        }
        String fileName = UploadUtils.generateFileName(file.getOriginalFilename());
        File newFile = new File(uploadProperties.getPath()+"\courseware\" + fileName);//当前是在windows目录,部署到linux路径要修改为/courseware
        file.transferTo(newFile);
        System.out.println(newFile.getPath());
        return fileName;
    }
}
CoursewareService
/**
 * @author :RukiHuang
 * @description:课件service
 * @date :2022/9/1 13:42
 */
@Service
public class CoursewareServiceImpl implements CoursewareService {

    @Autowired
    CoursewareDao coursewareDao;


    @Override
    public void addCoursewareInfo(String serverFileName) throws Exception {
        String[] nameArray = serverFileName.split(" / ");
        String coursewareName = nameArray[0];
        String serverStorageName = nameArray[1];
        String storagePath = "courseware/" + serverStorageName;

        CoursewareInfoDto coursewareInfoDto = new CoursewareInfoDto(coursewareName, storagePath);
        coursewareDao.addCoursewareInfo(coursewareInfoDto);
    }


}
1.7 PostMan测试文件上传 第一步,头文件置空

第二步,请求体中选择上传文件

前端 2. Vue实现文件上传 2.1 单文件上传 2.1.1 业务逻辑 先对文件进行校验,判断文件大小以及类型是否符合要求。将文件上传至服务器。服务器返回新文件名和存储路径将文件名称和服务器名称提交至服务器,并将存储路径传入至数据库。组件使用的是vue-admin-template自带的iView,iView官方文档

2.1.2 代码实现






2.2 一个页面多处地方需要文件上传 2.2.1 业务逻辑 iview无法实现单个页面多处地方文件上传,file会被替换使用原生的上传组件进行上传。

2.2.2 代码实现






欢迎分享,转载请注明来源:内存溢出

原文地址:https://outofmemory.cn/web/2990431.html

(0)
打赏 微信扫一扫微信扫一扫 支付宝扫一扫支付宝扫一扫
上一篇 2022-09-23
下一篇2022-09-23

随机推荐

  • 北京的区有几个,分别是什么?

         截至2022年4月,北京一共16个区,自2015年撤销延庆县和密云县,设立延庆区和密云区开始,16区的格局就形成了。北京16区分别是:东城区、西城区、朝阳区、丰台区、石景山区、海淀区、顺义区、通州区、大兴区、房山区、门头沟区、昌

    2023-02-03
    100
  • 英国的英文是什么?

    英国的英文是Britain,具体释义如下:读音: ˈbrɪt(ə)n 表达意思:英国,不列颠(包括英格兰、苏格兰及威尔士);英国,不列颠(包括英格兰、苏格兰及威尔士)。词性:通常在句中作名词,作为主语或宾语。例句1、Fruit

    2023-02-03
    100
  • 碟鱼头的4种做法

    鱼头含有丰富的营养物质,其中不饱和脂肪酸欧米伽3含量最高,十分适合人们食用。平时生活中你会做碟鱼头吗?你了解碟鱼头菜肴的做法吗?下面就让我给你介绍一下4种碟鱼头的做法。 一、红烧鲽鱼头的做法材料 鲽鱼头1个(约1000克)。

    2023-02-03
    100
  • 少数民族的节日和风俗有哪些

    1、傣族泼水节泼水节,亦称浴佛节,又称楞贺尚罕,是傣族、阿昌族、布朗族、佤族、德昂族以及泰语民族和东南亚地区的传统节日,以及海外泰国人聚居地如香港九龙城、台湾新北市中和区等地的人们清早起来便沐浴礼佛,之后便开始连续几日的庆祝活动,期间,大家

    2023-02-03
    100
  • KERASTASE是啥牌子

    KERASTASE是欧莱雅的卡诗。1964年,世界顶级专业护发品牌巴黎卡诗KÉRASTASE在法国巴黎诞生。源自巴黎的专业奢华护发品牌巴黎卡诗2012年8月于上海设立在中国大陆的第一间品牌形象概念RUE ROYALE零售专柜。扩展资料:

  • 文莱属于哪个国家?

    它是一个独立国家。文莱,全名文莱达鲁萨兰国,又称文莱,位于马来西亚砂拉越州和沙巴州之间,国土面积仅有5765平方公里。就是这样一个看似默默无闻的小国,却因为石油开采,成为了世界上最富裕的国家之一。不大的国土面积下,也并非只有单调的热带风光

    2023-02-03
    100
  • 鲨鱼皮可以吃吗

    鲨鱼皮是可以吃的。鲨鱼皮如今也是餐桌上常见的佳肴之一,地位仅次于鱼肚。很多人认为鲨鱼皮不好吃,是因为鲨鱼皮上有一种细鳞,不容易去除,也正是这种细鳞影响到了鲨鱼皮的口感。鲨鱼皮上有一些“砂子”类的物质,十分影响口感,并不是很好吃,在烹饪之

    2023-02-03
    100
  • C30混凝土配合比

    c30混凝土配合比是0.38:1:1.11:2.72 ,C30混凝土:水:175kg水泥:461kg 砂:512kg 石子:1252kg。普通混凝土配合比 NO:041技术要求强度等级:C30抗渗等级:塌落度mm:120~140原材料水

    2023-02-03
    100
  • 护士临床工作中常用的28个体征(一)

    护士临床工作中常用的28个体征(一)道出血三联征:①绞痛 ②黄疸 ③出血阿司匹林三联征:①哮喘 ②鼻窦炎 ③阿司匹林类过敏血脂异常三联征:①血清TG ②VLDL浓度升高膀胱刺激征:①尿频 ②尿急 ③尿痛腹膜刺激征:①压痛 ②反跳痛 ③腹肌紧

    2023-02-03
    100

发表评论

登录后才能评论

评论列表(0条)

    保存