尚硅谷谷粒学院学习笔记5-- 对象存储OSS，整合图片上传，nginx反向代理配置

对象存储OSS，整合图片上传，nginx反向代理配置

• • 对象存储OSS
  • • 在service模块下创建子模块service_oss
    • 依赖
    • 配置文件
    • 启动报错
    • 解决启动报错
    • 读取配置文件工具类
    • 文件上传
    • 测试
  • 配置nginx反向代理
  • • • 重启nginx
    • 修改前端的base_API
  • 前端整合图片上传组件
  • • 复制头像上传组件
    • 前端添加文件上传组件
    • 引入组件模块，声明初始变量
    • 注意

对象存储OSS 在service模块下创建子模块service_oss 依赖

service-oss上级模块service已经引入service的公共依赖，所以service-oss模块只需引入阿里云oss相关依赖即可

        
        
            com.aliyun.oss
            aliyun-sdk-oss
        

        
        
            joda-time
            joda-time
        
    

配置文件

#服务端口
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=your accessKeyId
aliyun.oss.file.keysecret=your accessKeySecret
#bucket可以在控制台创建，也可以使用java代码创建
aliyun.oss.file.bucketname=gulischool-dyk

启动报错

启动时，会自动找数据库的配置，但是当前模块不用操作数据库，只是上传功能，没有配置数据库

解决启动报错

在@SpringBootApplication注解上加上exclude，解除自动加载DataSourceAutoConfiguration

@SpringBootApplication(exclude = DataSourceAutoConfiguration.class)
@ComponentScan(basePackages = {"com.atguigu"})
public class OssApplication {
    public static void main(String[] args) {
        SpringApplication.run(OssApplication.class,args);
    }
}

读取配置文件工具类

创建常量读取工具类：ConstantPropertiesUtil.java
使用@Value读取application.properties里的配置内容
用spring的 InitializingBean 的 afterPropertiesSet 来初始化配置信息，这个方法将在所有的属性被初始化后调用。

package com.atguigu.oss.utils;

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

@Component
// 常量类，读取配置文件application.properties中的配置
public class AliyunPropertiesUtils 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_POINT;
    public static String ACCESS_KEY_ID;
    public static String ACCESS_KEY_SECRET;
    public static String BUCKET_NAME;


    @Override

    public void afterPropertiesSet() throws Exception {

        END_POINT = endpoint;
        ACCESS_KEY_ID = keyId;
        ACCESS_KEY_SECRET = keySecret;
        BUCKET_NAME = bucketName;


    }
}

文件上传

创建Service接口：OssService

public interface OssService {
    //文件上传至阿里云
    String uploadFileAvatar(MultipartFile file);
}

OssServiceImpl

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.AliyunPropertiesUtils;
import org.joda.time.DateTime;
import org.springframework.stereotype.Service;
import org.springframework.web.multipart.MultipartFile;

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

@Service
public class OssServiceImpl implements OssService {
    //上传头像到oss
    @Override
    public String uploadFileAvatar(MultipartFile file) {
        //工具类获取值
        String endpoint = AliyunPropertiesUtils.END_POINT;
        String accessKeyId = AliyunPropertiesUtils.ACCESS_KEY_ID;
        String accessKeySecret = AliyunPropertiesUtils.ACCESS_KEY_SECRET;
        String backetName = AliyunPropertiesUtils.BUCKET_NAME;

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

            // 填写本地文件的完整路径。如果未指定本地路径，则默认从示例程序所属项目对应本地路径中上传文件流。
            InputStream inputStream = file.getInputStream();
            //获取文件名
            String filename= file.getOriginalFilename();
            //在文件名称里添加随机唯一的值
            String uuid= UUID.randomUUID().toString().replace("-","");
            filename=uuid+filename;
            
            //把文件按日期分类
            String datePath = new DateTime().toString("yyyy/MM/dd");

            //第一个参数 Backet名称
            //第二个参数 上传到oss文件路径和文件名称
            //第三个参数 上传文件输入流

            //拼接路径
            filename=datePath+"/"+filename;
            ossClient.putObject(backetName, filename, inputStream);
            // 关闭OSSClient。
            ossClient.shutdown();
            //需要把上传文件到阿里云的路径手动拼接出来
           // https://gulischool-dyk.oss-cn-beijing.aliyuncs.com/1.png
            String url="https://"+backetName+"."+endpoint+"/"+filename;

            return url;
        } catch (IOException ioException) {
            ioException.printStackTrace();
            return null;
        }
    }     
}

controller

@RestController
@RequestMapping("/eduoss/fileoss")
@CrossOrigin
@Api(tags="阿里云文件管理")
public class OssController {
    @Autowired
    private OssService ossService;
    //上传头像的方法
    @ApiOperation(value = "文件上传")
    @PostMapping("/upload")
    public ResultVo uploadOssFile(@ApiParam(name = "file", value = "文件", required = true)MultipartFile file){
          //获取上传文件 MultipartFile
        //返回上传路径
       String url= ossService.uploadFileAvatar(file);

        return ResultVo.ok().message("文件上传成功").data("url",url);
    }
}

测试

配置nginx反向代理

config/dev.env.js，只有一个api地址的配置位置，而我们实际的后端有很多微服务，所以接口地址有很多，
我们可以使用nginx反向代理让不同的api路径分发到不同的api服务器中

nginx快速入门博客链接

在Nginx中配置对应的微服务服务器地址即可
注意应该放在http块里面

  server{
        listen 9001;
        server_name localhost;

        location ~ /eduservice/{
            proxy_pass http://localhost:8001;
        }

        location ~ /eduoss/ {
            proxy_pass http://localhost:8002;
        }
        location ~ /eduvod/ {
            proxy_pass http://localhost:8003;
        }
        location ~ /cmsservice/ {
            proxy_pass http://localhost:8004;
        }
        location ~ /edumsm/ {
            proxy_pass http://localhost:8005;
        }
        location ~ /ucenterservice/ {
            proxy_pass http://localhost:8006;
        }
        location ~ /orderservice/ {
            proxy_pass http://localhost:8007;
        }
        location ~ /staservice/ {
            proxy_pass http://localhost:8001;
        }

    }

重启nginx

进入nginx目录

nginx -s reload

修改前端的base_API

config里的dev.env.js

base_API: '"http://localhost:9001"'

前端整合图片上传组件 复制头像上传组件

从vue-element-admin复制组件：
vue-element-admin/src/components/ImageCropper
vue-element-admin/src/components/PanThumb

前端添加文件上传组件

 
      
        
        
        
        更换头像
        

        
        
      

引入组件模块，声明初始变量

注意

这一段我卡了很久如果有报错可能是nginx配置错误，或者前端里面路径有错误仔细检查几遍

ps如果觉得前端那个上传图片旋转不好想去掉只需
/src/components/PanThumb/index.vue 代码最后面的三个 hover 注释掉就没有旋转效果了