专栏首页生如夏花的个人博客ElementUI+springboot上传文件

ElementUI+springboot上传文件

ElementUI+springboot上传文件

配置上传路径

image.properties

image.localDirPath=/Volumes/mac/Program/PageImg/

实现

@PropertySource("classpath:/image.properties")
public class FileServiceImpl implements FileService {

    @Value("${image.localDirPath}")
    private String localDirPath;
    /**
     * 文件上传
     * @param uploadFile
     * @return
     */
    @Override
    public ReturnVo fileUpload(MultipartFile uploadFile) {
ArrayList<String> strings = new ArrayList<>();
strings.add("image/gif");
strings.add("image/png");
strings.add("image/jpeg");
if (strings.contains(uploadFile.getContentType())){
    try {
        //获取到文件名
        String fileName = uploadFile.getOriginalFilename();
        //使用日期格式创建文件夹
        String dataPathDir = new SimpleDateFormat("yyyy/MM/dd").format(new Date());
        //真实的文件夹路径
        String realDirPath = localDirPath + dataPathDir;
        //判断文件夹是否存在
        File dirFile = new File(realDirPath);
        if (!dirFile.exists()){
            dirFile.mkdirs();
        }
        String uuid = UUID.randomUUID().toString().replace("-","");
        //截取原先文件的类型
        String fileType = fileName.substring(fileName.lastIndexOf("."));
        String realName = uuid + fileType;
        //文件上传
        String realFilePath = realDirPath + "/" + realName;
        File file = new File(realFilePath);
        uploadFile.transferTo(file);
       
    } catch (IOException e) {
        e.printStackTrace();
    }
}else {
    System.out.println("文件不合法")
}
    }

前端部分

<template>
<el-upload
        :action="uploadUrl"
        :on-preview="handlePreview"
        :on-remove="handleRemove"
        list-type="picture">
    <el-button size="small" type="primary">点击上传</el-button>
    <div slot="tip" class="el-upload__tip">只能上传jpg/png/gif文件,且不超过500kb</div>
</el-upload>
</template>
<script>
	export default{
    data(){
      return{
         //上传图片地址
          uploadUrl:'http://127.0.0.1:8080/upload'
      }
    }
  }
</script>

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • mybatis-plus:性能分析插件与性能分析打印

    MP提供了两种方式,用于输出每条SQL语句及其执行时间,针对执行较长时间的SQL可以停止运行,有助于发现问题。

    许喜朝
  • mybatis-plus:自动填充功能

    首先先了解一下那些需要自动填充,阿里巴巴开发手册建议每一张表都要有create_time和update_time字段

    许喜朝
  • mybatis-plus自定义sql注入器

    虽然mybats-plus的BaseMapper提供了非常好用,非常多的方法,但是如果我们需要扩充BaseMapper中的方法又该如何实现呢

    许喜朝
  • 腾讯云 实时语音识别介绍及其Android SDK Demo搭建

    实时语音识别API地址:https://cloud.tencent.com/document/product/1093/35799

    袁伦桥
  • Go基础——指针

    羊羽shine
  • 纯JSP实现用户登录注册,记事本

    没有美化,没有格式,没有样式 1.JSP登陆注册 将用户注册的信息保存在application对象中,用于登录时的验证。 首页如下: 如果未登录,在  sess...

    二十三年蝉
  • Flask 自定义模型类

    模型表示程序使用的数据实体,在Flask-SQLAlchemy中,模型一般是Python类,继承自db.Model,db是SQLAlchemy类的实例,代表程序...

    Devops海洋的渔夫
  • python图像处理-图片裁剪

    本系列课程是针对无基础的,争取用简单明了的语言来讲解,学习前需要具备基本的电脑操作能力,准备一个已安装python环境的电脑。如果觉得好可以分享转发,有问题的地...

    用户7054460
  • LeetCode30|翻转单词顺序

    输入一个英文句子,翻转句子中单词的顺序,但单词内字符的顺序不变。为简单起见,标点符号和普通字母一样处理。例如输入字符串"I am a student. ",则输...

    码农王同学
  • 大数据HelloWorld-Flink实现WordCount

    开始Flink之前先在本机尝试安装一下Flink,当然FLink正常情况下是部署的集群方式。作者比较穷,机器配置太低开不了几个虚拟机。所以只能先演示个单机的安装...

    CainGao

扫码关注云+社区

领取腾讯云代金券