5-谷粒学苑

上传头像

添加讲师实现讲师头像上传—阿里云Oss

准备工作

阿里云oss存储服务
1.申请阿里云账号，实名认证，开通“对象存储OSS”服务，进入管理控制台
阿里云网站
2.创建Bucket
选择：标准存储/低频，公共读，
3.文件管理-上传文件
java代码操作阿里云oss，上传文件到阿里云oss操作
（1）准备工作：创建操作阿里云oss许可证（阿里云颁发id和密钥）----创建accesskey
(2)支持与服务-文档与工具-文档中心

基本环境搭建

1.在service模块下创建子模块service_oss
2.在service_oss中引入相关依赖

	
        
        
            com.aliyun.oss
            aliyun-sdk-oss
        

        
        
            joda-time
            joda-time

3.配置application.yml
服务端口注意区别

#服务端口号
server:
  port: 8003
#服务名
spring:
  application:
    name: service-oss
    #环境配置
  profiles:
    active: dev
#阿里云oss
#不同的服务器，地址不同
aliyun:
  oss:
    file:
      endpoint: your endpoint
      keyid: your accessKeyId
      keysecret: your assessKeySecret
      bucketname: gulixueyuan-data #bucket可以在控制台创建，也可以使用java代码创建

4.创建启动类，报错
启动的时候，找数据库配置，但是模块中不需要操作数据库，只需要上传功能，没有配置数据库

Description:

Failed to configure a DataSource: 'url' attribute is not specified and no embedded datasource could be configured.

Reason: Failed to determine a suitable driver class

解决方式：
1.添加数据库配置
2.在启动类添加属性，默认不去加载数据库配置（推荐）

@SpringBootApplication(exclude = DataSourceAutoConfiguration.class)

接口完善

1.创建常量类，读取配置文件中的内容
创建常量读取工具类：ConstantPropertiesUtil.java
使用@Value读取application.yml里的配置内容
实现spring中的 InitializingBean接口，实现接口中的 afterPropertiesSet 方法，来初始化配置信息，这个方法会在所有的属性被初始化后调用。

package com.atguigu.oss.utils;

import org.springframework.beans.factory.InitializingBean;
import org.springframework.beans.factory.annotation.Value;
import org.springframework.stereotype.Component;

//当项目已启动，spring中有一个接口，spring加载之后，执行接口中的一个方法
@Component
public class ConstantPropertiesUtils implements InitializingBean {
    //读取配置文件内容
    @Value("${aliyun.oss.file.endpoint}") //属性注入,spring中的value
    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_POINT;
    public static String KEY_ID;
    public static String KEY_SECRET;
    public static String BUCKET_NAME;
    @Override
    public void afterPropertiesSet() throws Exception {
        END_POINT = endPoint;
        KEY_ID = keyId;
        KEY_SECRET = keySecret;
        BUCKET_NAME = bucketName;
    }
}

2.创建Controller，创建service

package com.atguigu.oss.controller;

import com.atguigu.commonutils.R;
import com.atguigu.oss.service.OssService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.CrossOrigin;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;
import org.springframework.web.multipart.MultipartFile;

@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);
    }
}

3.在service实现上传文件到Oss的过程

package com.atguigu.oss.service.impl;

import com.aliyun.oss.ClientException;
import com.aliyun.oss.OSS;
import com.aliyun.oss.OSSClientBuilder;
import com.aliyun.oss.OSSException;
import com.atguigu.oss.service.OssService;
import com.atguigu.oss.utils.ConstantPropertiesUtils;
import org.springframework.stereotype.Service;
import org.springframework.web.multipart.MultipartFile;

import java.io.FileInputStream;
import java.io.IOException;
import java.io.InputStream;

@Service
public class OssServiceImpl implements OssService {

    //上传头像到oss
    @Override
    public String uploadFileAvatar(MultipartFile file) {
        //工具类获取值
        String endpoint = ConstantPropertiesUtils.END_POINT;
        String accessKeyId = ConstantPropertiesUtils.KEY_ID;
        String accessKeySecret = ConstantPropertiesUtils.KEY_SECRET;
        String bucketName = ConstantPropertiesUtils.BUCKET_NAME;
        // 创建OSSClient实例。
        OSS ossClient = new OSSClientBuilder().build(endpoint, accessKeyId, accessKeySecret);

        try {
            //上传文件流
            InputStream inputStream = file.getInputStream();
            //获取文件名称
            String fileName = file.getOriginalFilename();
            //调用oss方法实现上传
            //第一个参数 BUCKET名称
            //第二个参数 上传到oss文件路径和文件名称
            //第三个参数 上传文件输入流
            // 创建PutObject请求。
            ossClient.putObject(bucketName, fileName, inputStream);
            //把上传之后文件路径返回
            //需要把上传到阿里云oss路径手动拼接出来
            String url = "https://"+bucketName+"."+endpoint+"/"+fileName;
            return url;
        } catch (Exception e) {
            e.printStackTrace();
            return null;
        } finally {
            if (ossClient != null) {
                ossClient.shutdown();
            }
        }
    }
}

问题：多次上传同名文件，会覆盖之前的文件
解决办法：在文件名称里，添加随机唯一的值，使每个文件的名称不同；
把文件进行分类存储

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

解决办法：(1)根据用户分类
（2）根据日期分类（年月日时分秒…）√

            //2. 把文件安装日期分类 2019/11/12/1.jpg
            //获取当前日期 使用joda-time工具类
            String dataPath = new DateTime().toString("yyyy/MM/dd");
            //拼接
            fileName = dataPath+"/"+fileName;

完整代码

package com.atguigu.oss.service.impl;

import com.aliyun.oss.OSS;
import com.aliyun.oss.OSSClientBuilder;
import com.atguigu.oss.service.OssService;
import com.atguigu.oss.utils.ConstantPropertiesUtils;
import org.joda.time.DateTime;
import org.springframework.stereotype.Service;
import org.springframework.web.multipart.MultipartFile;
import java.io.InputStream;
import java.util.UUID;

@Service
public class OssServiceImpl implements OssService {

    //上传头像到oss
    @Override
    public String uploadFileAvatar(MultipartFile file) {
        //工具类获取值
        String endpoint = ConstantPropertiesUtils.END_POINT;
        String accessKeyId = ConstantPropertiesUtils.KEY_ID;
        String accessKeySecret = ConstantPropertiesUtils.KEY_SECRET;
        String bucketName = ConstantPropertiesUtils.BUCKET_NAME;
        // 创建OSSClient实例。
        OSS ossClient = new OSSClientBuilder().build(endpoint, accessKeyId, accessKeySecret);

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

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

            //2. 把文件安装日期分类 2019/11/12/1.jpg
            //获取当前日期 使用joda-time工具类
            String dataPath = new DateTime().toString("yyyy/MM/dd");
            //拼接
            fileName = dataPath+"/"+fileName;
            //调用oss方法实现上传
            //第一个参数 BUCKET名称
            //第二个参数 上传到oss文件路径和文件名称 /aa/bb/1.jpg
            //第三个参数 上传文件输入流
            // 创建PutObject请求。
            ossClient.putObject(bucketName, fileName, inputStream);
            //把上传之后文件路径返回
            //需要把上传到阿里云oss路径手动拼接出来
            String url = "https://"+bucketName+"."+endpoint+"/"+fileName;
            return url;
        } catch (Exception e) {
            e.printStackTrace();
            return null;
        } finally {
            if (ossClient != null) {
                ossClient.shutdown();
            }
        }
    }
}

Nginx nginx概念

1.什么是nginx？
反向代理服务器
2.主要功能？
请求转发、负载均衡、动静分离
3.什么是请求转发？
客户端/浏览器请求先到nginx(9001端口)
nginx得到请求，根据请求转发到具体的服务器中（根据路径匹配，比如请求地址中包含eduservice 就会转发到端口号为8001的eduserivice的服务器中）
4.负载均衡？把请求平均分担到不同服务中去。
客户端/浏览器先请求到9001端口的nginx
然后把请求平均分担到集群中（多台服务器分担）
轮询、权重、根据请求时间
5.动静分离？
静态资源和java代码分开存放
windows版本问题
cmd启动，关闭窗口，nginx不会关闭
关闭命令 nginx.exe -s stop

配置nginx实现请求转发的功能

1.找到nginx配置文件 nginx.conf
2.在nginx.conf进行配置（http中）
（1）修改端口为81

server {
        listen       81; #修改端口

（2）配置转发规则
在Nginx中配置对应的微服务服务器地址即可
~ 表示正则表达式，包含路径就可以

server {
        listen       9001;  #监听端口
        server_name  localhost; #主机
		
		location ~ /eduservice/ {#匹配路径
			proxy_pass http://localhost:8002; #转发服务器的地址
		}
		location ~ /eduoss/ {
			proxy_pass http://localhost:8003;
		}
    }

修改前端端口号为9001

VUE_APP_BASE_API = 'http://localhost:9001'

nginx重启
nginx先停止nginx.exe -s stop，然后启动nignx.exe

添加讲师实现头像上传整合

(1)在添加讲师的讲师页面，创建上传组件，实现上传
使用element-ui组件
从vue-element-admin复制组件：
vue-element-admin/src/components/ImageCropper
vue-element-admin/src/components/PanThumb
（2）添加讲师页面使用组件

（3）使用组件
data()中定义变量和初始值
（4）引入组件和声明组件
引入组件模块，声明初始变量

5-谷粒学苑

Java相关栏目本月热门文章