专栏首页生如夏花的个人博客ElementUi+Springboot 上传文件到阿里云oss

ElementUi+Springboot 上传文件到阿里云oss

ElementUi+Springboot 上传文件到阿里云oss

写在之前

首先准备阿里云oss 开通一个子账号,得到key 和账号

在控制台给子账号赋予oss读写权限

依赖

<dependency>
    <groupId>com.aliyun.oss</groupId>
    <artifactId>aliyun-sdk-oss</artifactId>
    <version>3.11.1</version>
</dependency>

配置阿里云oss

Application.yml

根据自己的oss配置

aliyun:
  oss:
    point: 
    accessKey: 
    secretKey: 
    bucket: 

创建配置类,把配置交给ioc管理

import lombok.Data;
import org.springframework.boot.context.properties.ConfigurationProperties;
import org.springframework.stereotype.Component;

@Data
@Component
@ConfigurationProperties(prefix = "aliyun.oss")
public class AliyunOssConfig {
    private String point;
    private String accessKey;
    private String secretKey;
    private String bucket;
}

controller

@RestController
public class AliyunOssController {

    @Autowired(required = false)
    private UploadImageService uploadImageService;

    @PostMapping("/upload")
    public ReturnVo uploadImg(@RequestParam("file") MultipartFile multipartFile){
        return uploadImageService.uploadImg(multipartFile);

    }
}

service

UploadService

//上传文件
ReturnVo uploadImg(MultipartFile multipartFile);

UploadServiceImpl实现UploadService接口

@Service
public class UploadImageServiceImpl implements UploadImageService {
    @Autowired(required = false)
    private AliyunOssConfig aliyunOssConfig;

    @Override
    public ReturnVo uploadImg(MultipartFile multipartFile) {
        ReturnVo returnVo = new ReturnVo();
        Meta meta = new Meta();
        ArrayList<String> strings = new ArrayList<>();
        strings.add("image/png");
        strings.add("image/gif");
        strings.add("image/jpeg");
        if (strings.contains(multipartFile.getContentType())){
            try {
                //获取文件名
                String fileName = multipartFile.getOriginalFilename();
                //获取文件类型
                String fileType = fileName.substring(fileName.lastIndexOf("."));
                //uuid
                String uuid = UUID.randomUUID().toString().replace("-","");
                String realName = uuid + fileType;
                OSS build = new OSSClientBuilder().build(aliyunOssConfig.getPoint(), aliyunOssConfig.getAccessKey(), aliyunOssConfig.getSecretKey());
                PutObjectRequest putObjectRequest = new PutObjectRequest(aliyunOssConfig.getBucket(), realName, multipartFile.getInputStream());
                build.putObject(putObjectRequest);
                ImageUploadVo imageUploadVo = new ImageUploadVo();
                imageUploadVo.setTmpPath(realName);
                imageUploadVo.setUrl(aliyunOssConfig.getBucket()+"."+aliyunOssConfig.getPoint()+"/"+realName);
                returnVo.setData(imageUploadVo);
                meta.setMsg("上传成功");
                meta.setStatus(200);
                returnVo.setMeta(meta);
            } catch (IOException e) {
                //发生异常
                e.printStackTrace();
                returnVo.setData(null);
                meta.setMsg("上传失败");
                meta.setStatus(500);
                returnVo.setMeta(meta);
            }
        }else {
            //非jpg/png/gif
            returnVo.setData(null);
            meta.setMsg("上传失败");
            meta.setStatus(500);
            returnVo.setMeta(meta);
        }
        return returnVo;
    }
}

Vo

这里的vo是针对前端有返回值的情况,上传文件并不需要这几个类

统一返回类

@Data
public class ReturnVo {
    private Object data;
    private Meta meta;
}

meta类

@Data
public class Meta {
    private String msg;
    private Integer status;
}

数据返回类

@Data
public class ImageUploadVo {
    private String tmpPath;
    private String url;
}
//返回了图片所在位置和访问路径

前端部分

<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>
//uploadUrl为上传文件的接口
<script>
	export default{
    data(){
      return{
         //上传图片地址
          uploadUrl:'http://127.0.0.1:8080/upload'
      }
    }
  }
</script>

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

我来说两句

0 条评论
登录 后参与评论

相关文章

  • Mybatis高级查询(四):延迟加载

    延迟加载的好处:先从单表查询、需要时再从关联表去关联查询,大大提高 数据库性能,因为查询单表要比关联查询多张表速度要快。

    许喜朝
  • MyBatis-plus乐观锁插件

    比如我在数据库里要修改一个id=1,并且version=1的一条数据,乐观锁会先去查询id=1的version是否等于1,如果等于就修改,如果不等于就不修改

    许喜朝
  • 简单谈一谈前后端分离

    这就还要从 很久很久之前说起!在很久很久以前,没有前端后端之分,在公司除了设计基本都是后端人员,现在前端的工作由后端兼顾着,或者说有很少的一部分前端人员

    许喜朝
  • 瞅一瞅Andromeda僵尸网络

    原文:http://blog.fortinet.com/post/A-Good-Look-at-the-Andromeda-Botnet 翻译:徐文博 Andr...

    FB客服
  • Vagrant SSH has invalid permissions的解决与分析

    我在mac下的NTFS分区里运行Vagrant up,正常启动虚拟机,但是ssh连接的时候却出现了问题,如下图:

    慕白
  • 独家|使用Python进行机器学习的假设检验(附链接&代码)

    也许所有机器学习的初学者,或者中级水平的学生,或者统计专业的学生,都听说过这个术语,假设检验。

    数据派THU
  • TomcatAJP文件包含漏洞及线上修复漏洞

    wget https://archive.apache.org/dist/tomcat/tomcat-8/v8.5.51/bin/apache-tomcat-8...

    常见_youmen
  • Python 【基础面试题】

    面试题仅做学习参考,学习者阅后也要用心钻研其中的原理,重要知识需要系统学习、透彻学习,形成自己的知识链。以下五点建议希望对您有帮助,早日拿到一份心仪的offer...

    IT茂茂
  • bash shell 中数组使用举例

    版权声明:本文为耕耘实录原创文章,各大自媒体平台同步更新。欢迎转载,转载请注...

    耕耘实录
  • OpenCV编译参数一览

    全部参数一览 //Path to a program. ANT_EXECUTABLE:FILEPATH=D:/apache-ant-1.10.1/bin/ant...

    Pulsar-V

扫码关注云+社区

领取腾讯云代金券