前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >ElementUI+springboot上传文件

ElementUI+springboot上传文件

作者头像
许喜朝
发布2020-11-06 08:01:39
1.1K0
发布2020-11-06 08:01:39
举报

ElementUI+springboot上传文件

配置上传路径

image.properties

代码语言:javascript
复制
image.localDirPath=/Volumes/mac/Program/PageImg/

实现

代码语言:javascript
复制
@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("文件不合法")
}
    }

前端部分

代码语言:javascript
复制
<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>
本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
原始发表:2020-11-05 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • ElementUI+springboot上传文件
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档