阿里云OSS的使用

1.打开阿里云网站：https://www.aliyun.com/

2.注册阿里云，最终获取4个参数bucket 名称，endpoint ,Accesskey ID , Access key Secert

3.搭建环境，引入maven依赖

    <!-- 阿里云oss依赖 -->
        <dependency>
            <groupId>com.aliyun.oss</groupId>
            <artifactId>aliyun-sdk-oss</artifactId>
        </dependency>

        <!-- 日期工具栏依赖 -->
        <dependency>
            <groupId>joda-time</groupId>
            <artifactId>joda-time</artifactId>
        </dependency>

4.application.properties

#服务端口
server.port=8002
#服务名
spring.application.name=service_oss

#环境设置：dev、test、prod
spring.profiles.active=dev

#阿里云 OSS
#不同的服务器，地址不同
aliyun.oss.file.endpoint=oss-cn-beijing.aliyuncs.com
aliyun.oss.file.keyid=LTAI4Fi3Vq4jbugiWKrxnxtt
aliyun.oss.file.keysecret=32qRznii5mTJCdyq9OimXMxCTiQJdr
#bucket可以在控制台创建，也可以使用java代码创建
aliyun.oss.file.bucketname=liuyi202044

 

5.controller层

@RestController
@CrossOrigin
@RequestMapping("/eduoss/fileoss")
public class OssController {
    
    @Autowired
    private OssService ossService;

    //上传头像的方法
    @PostMapping
    public R uploadOssFile(MultipartFile file) {
        //获取上传文件  MultipartFile
        //返回上传到oss的路径
        String url = ossService.uploadFileAvatar(file);
        return R.ok().data("url",url);
    }
}

6.创建一个工具类

//当项目已启动，spring接口，spring加载之后，执行接口一个方法
@Component
public class ConstantPropertiesUtils implements InitializingBean {

    //读取配置文件内容
    @Value("${aliyun.oss.file.endpoint}")
    private String endpoint;

    @Value("${aliyun.oss.file.keyid}")
    private String keyId;

    @Value("${aliyun.oss.file.keysecret}")
    private String keySecret;

    @Value("${aliyun.oss.file.bucketname}")
    private String bucketName;

    //定义公开静态常量
    public static String END_POIND;
    public static String ACCESS_KEY_ID;
    public static String ACCESS_KEY_SECRET;
    public static String BUCKET_NAME;

    @Override
    public void afterPropertiesSet() throws Exception {
        END_POIND = endpoint;
        ACCESS_KEY_ID = keyId;
        ACCESS_KEY_SECRET = keySecret;
        BUCKET_NAME = bucketName;
    }
}

 

7.service层

@Service
public class OssServiceImpl implements OssService {

        @Override
        public String uploadFileAvatar(MultipartFile file) {
            // 工具类获取值
            String endpoint = ConstantPropertiesUtils.END_POIND;
            String accessKeyId = ConstantPropertiesUtils.ACCESS_KEY_ID;
            String accessKeySecret = ConstantPropertiesUtils.ACCESS_KEY_SECRET;
            String bucketName = ConstantPropertiesUtils.BUCKET_NAME;

            try {
                // 创建OSS实例。
                OSS ossClient = new OSSClientBuilder().build(endpoint, accessKeyId, accessKeySecret);

                //获取上传文件输入流
                InputStream inputStream = file.getInputStream();
                //获取文件名称
                String fileName = file.getOriginalFilename();

                //1 在文件名称里面添加随机唯一的值
                String uuid = UUID.randomUUID().toString().replaceAll("-","");
                // yuy76t5rew01.jpg
                fileName = uuid+fileName;

                //2 把文件按照日期进行分类
                //获取当前日期
                //   2019/11/12
                String datePath = new DateTime().toString("yyyy/MM/dd");
                //拼接
                //  2019/11/12/ewtqr313401.jpg
                fileName = datePath+"/"+fileName;

                //调用oss方法实现上传
                //第一个参数  Bucket名称
                //第二个参数  上传到oss文件路径和文件名称   aa/bb/1.jpg
                //第三个参数  上传文件输入流
                ossClient.putObject(bucketName,fileName , inputStream);

                // 关闭OSSClient。
                ossClient.shutdown();

                //把上传之后文件路径返回
                //需要把上传到阿里云oss路径手动拼接出来
                //  https://edu-guli-1010.oss-cn-beijing.aliyuncs.com/01.jpg
                String url = "https://"+bucketName+"."+endpoint+"/"+fileName;
                return url;
            }catch(Exception e) {
                e.printStackTrace();
                return null;
            }
        }
    }

 

前端部分代码

引入2个组件

 

 

<!-- 讲师头像：TODO -->
      <!-- 讲师头像 -->
      <el-form-item label="讲师头像">

          <!-- 头衔缩略图 -->
          <pan-thumb :image="teacher.avatar"/>
          <!-- 文件上传按钮 -->
          <el-button type="primary" icon="el-icon-upload" @click="imagecropperShow=true">更换头像
          </el-button>

          <!--
      v-show：是否显示上传组件
      :key：类似于id，如果一个页面多个图片上传控件，可以做区分
      :url：后台上传的url地址
      @close：关闭上传组件
      @crop-upload-success：上传成功后的回调 
        <input type="file" name="file"/>
      -->
          <image-cropper
                        v-show="imagecropperShow"
                        :width="300"
                        :height="300"
                        :key="imagecropperKey"
                        :url="BASE_API+'/eduoss/fileoss'"
                        field="file"
                        @close="close"
                        @crop-upload-success="cropSuccess"/>
      </el-form-item>



import ImageCropper from '@/components/ImageCropper'
import PanThumb from '@/components/PanThumb'



export default {
  components: { ImageCropper, PanThumb },
  data() {
    return {
      teacher:{
        name: '',
        sort: 0,
        level: 1,
        career: '',
        intro: '',
        avatar: ''
      },
      //上传弹框组件是否显示
      imagecropperShow:false,
      imagecropperKey:0,//上传组件key值
      BASE_API:process.env.BASE_API, //获取dev.env.js里面地址
      saveBtnDisabled:false  // 保存按钮是否禁用,
    }
  },
  created() { //页面渲染之前执行
    this.init()
  },
  watch: {  //监听
    $route(to, from) { //路由变化方式，路由发生变化，方法就会执行
      this.init()
    }
  },
  methods:{
    close() { //关闭上传弹框的方法
        this.imagecropperShow=false
        this.imagecropperKey=this.imagecropperKey+1
        
    },
    //上传成功方法
    cropSuccess(data) {
      this.imagecropperShow=false
      //上传之后接口返回图片地址
      this.teacher.avatar = data.url
      this.imagecropperKey=this.imagecropperKey+1
     
    },
    init() {
      //判断路径有id值,做修改
      if(this.$route.params && this.$route.params.id) {
          //从路径获取id值
          const id = this.$route.params.id
          //调用根据id查询的方法
          this.getInfo(id)
      } else { //路径没有id值，做添加
        //清空表单
        this.teacher = {}
      }
    },
    //根据讲师id查询的方法
    getInfo(id) {
      teacherApi.getTeacherInfo(id)
        .then(response => {
          this.teacher = response.data.teacher
        })
    },
    saveOrUpdate() {
      //判断修改还是添加
      //根据teacher是否有id
      if(!this.teacher.id) {
        //添加
        this.saveTeacher()
      } else {
        //修改
        this.updateTeacher()
      }
    },
    //修改讲师的方法
    updateTeacher() {
      teacherApi.updateTeacherInfo(this.teacher)
        .then(response => {
          //提示信息
          this.$message({
              type: 'success',
              message: '修改成功!'
          });
          //回到列表页面 路由跳转
          this.$router.push({path:'/teacher/table'})
        })
    },
    //添加讲师的方法
    saveTeacher() {
      teacherApi.addTeacher(this.teacher)
        .then(response => {//添加成功
          //提示信息
          this.$message({
              type: 'success',
              message: '添加成功!'
          });
          //回到列表页面 路由跳转
          this.$router.push({path:'/teacher/table'})
        })
    }

  }
}
</script>