学生排队 SQLMAP tsql canvas knockoutjs insert angular ui router jquery遍历元素 jquery通过class获取元素 jquery获取最后一个子元素 录音棚设备一套多少钱 cpm怎么计算 matlab复数求模 kali重启网卡 python编程 python入门例子 java数组添加 java环境包 java定义变量 java语言编程 mac地址修改器 谷歌地球打不开 打马赛克的软件 java语言程序设计 spoonwep wscript ps制作表格 备份数据的软件 deepcopy 字典生成器 unlocker下载 videoview 一键清除锁屏密码 ass转srt csgo帧数显示 手机下载微博客户端 js正则表达式 currentstyle 360极速浏览器官方下载 双通道内存有什么好处
当前位置: 首页 > 学习教程  > 编程语言

谷粒学院(八)阿里云oss | 头像上传 | Nginx

2020/10/8 18:38:49 文章标签:

一、阿里云oss存储服务 为了解决海量数据存储与弹性扩容,项目中我们采用云存储的解决方案- 阿里云OSS。 1、开通 “对象存储OSS”服务 (1)打开阿里云网站 https://www.aliyun.com/ (2)注册阿里云账户,最…

一、阿里云oss存储服务

为了解决海量数据存储与弹性扩容,项目中我们采用云存储的解决方案- 阿里云OSS。

1、开通 “对象存储OSS”服务

(1)打开阿里云网站 https://www.aliyun.com/
(2)注册阿里云账户,最好使用支付宝,需要实名认证
(3)使用注册的用户登录阿里云里面
(4)找到阿里云oss
在这里插入图片描述
(5)开通oss
在这里插入图片描述

2、进入oss管理控制台

(1)使用oss,首先创建bucket
在这里插入图片描述
创建说明
在这里插入图片描述
(2)控制台上传图片
在这里插入图片描述

3、Java代码操作阿里云oss上传文件

1、准备工作:创建操作阿里云oss许可证(阿里云颁发id和秘钥)

在这里插入图片描述
在这里插入图片描述
2、文档位置

在这里插入图片描述
快速入门文档:https://help.aliyun.com/document_detail/32011.html?spm=a2c4g.11186623.6.905.23866328891B4P

3、具体使用

(1)创建Mavaen项目

(2)POM

<dependencies>
   <!--aliyunOSS-->
   <dependency>
       <groupId>com.aliyun.oss</groupId>
       <artifactId>aliyun-sdk-oss</artifactId>
       <version>2.8.3</version>
   </dependency>
   <dependency>
       <groupId>junit</groupId>
       <artifactId>junit</artifactId>
       <version>4.12</version>
   </dependency>
</dependencies>

(3)找到编码时需要用到的常量值

  • endpoint
  • bucketName
  • accessKeyId
  • accessKeySecret

(4)测试创建Bucket的连接

public class OSSTest {
	// Endpoint以杭州为例,其它Region请按实际情况填写。
	String endpoint = "https://oss-cn-hangzhou.aliyuncs.com";
	// 阿里云主账号AccessKey拥有所有API的访问权限,风险很高。强烈建议您创建并使用RAM账号进行API访问或日常运维,请登录RAM控制台创建RAM账号。
	String accessKeyId = "<yourAccessKeyId>";
	String accessKeySecret = "<yourAccessKeySecret>";
	String bucketName = "<yourBucketName>";
	
	// 创建OSSClient实例。
	OSS ossClient = new OSSClientBuilder().build(endpoint, accessKeyId, accessKeySecret);
	
	// 创建存储空间。
	ossClient.createBucket(bucketName);
	
	// 关闭OSSClient。
	ossClient.shutdown();     
}	

(5)判断存储空间是否存在

@Test
public void testExist() {
    // 创建OSSClient实例。
    OSSClient ossClient = new OSSClient(endpoint, accessKeyId, accessKeySecret);
    boolean exists = ossClient.doesBucketExist(bucketName);
    System.out.println(exists);
    // 关闭OSSClient。
    ossClient.shutdown();
}

(6)设置存储空间的访问权限

@Test
public void testAccessControl() {
    // 创建OSSClient实例。
    OSSClient ossClient = new OSSClient(endpoint, accessKeyId, accessKeySecret);

    // 设置存储空间的访问权限为:公共读。
    ossClient.setBucketAcl(bucketName, CannedAccessControlList.PublicRead);
    // 关闭OSSClient。
    ossClient.shutdown();
}

在这里插入图片描述

二、后端集成OSS

1、在service模块下创建子模块service_oss

2、配置pom.xml

service-oss上级模块service已经引入service的公共依赖,所以service-oss模块只需引入阿里云oss相关依赖即可,
service父模块已经引入了service-base模块,所以Swagger相关默认已经引入

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

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

3、配置application.properties

#服务端口
server.port=8002
#服务名
spring.application.name=service-oss

#环境设置:dev、test、prod

spring.profiles.active=dev

#阿里云 OSS
#不同的服务器,地址不同
aliyun.oss.file.endpoint=your endpoint
aliyun.oss.file.keyid=your accessKeyId
aliyun.oss.file.keysecret=your accessKeySecret
#bucket可以在控制台创建,也可以使用java代码创建
aliyun.oss.file.bucketname=guli-file

4、主启动类

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

5、启动主启动类,测试项目报错

在这里插入图片描述
启动时候,找数据库配置,但是现在模块因为不需要操作数据库,只是做了上传到oss功能,没有配置数据库。

解决方式

(1)添加上数据库配置
(2)在启动类添加属性,默认不去加载数据库配置【推荐使用】

@SpringBootApplication(exclude = DataSourceAutoConfiguration.class)

三、实现上传功能

1、创建常用类,读取配置文件内容

@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_POINT;
    public static String ACCESS_KEY_ID;
    public static String ACCESS_KEY_SECRET;
    public static String BUCKET_NAME;
    
    public void afterPropertiesSet() throws Exception {
        END_POINT = endpoint;
        ACCESS_KEY_ID = keyId;
        ACCESS_KEY_SECRET = keySecret;
        BUCKET_NAME = bucketName;
    }
}

2、文件上传

创建Service接口:OssService.java

public interface OssService {
    //上传头像到oss中
    String uploadFileAvator(MultipartFile file);
}

实现:OssServiceImpl.java

参考SDK中的:Java ->上传文件 -> 简单上传 -> 流式上传 -> 上传文件流

package com.kuang.oss.service.impl;

import com.aliyun.oss.OSS;
import com.aliyun.oss.OSSClientBuilder;
import com.kuang.oss.service.OssService;
import com.kuang.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 uploadFileAvator(MultipartFile file) {

        // 工具类获取值
        String endpoint = ConstantPropertiesUtils.END_POINT;
        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();

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

            //把文件按日期进行分类
            // 2020/10/08/1.jpg
            //获取当前日期
            String datePath = new DateTime().toString("yyyy/MM/dd");
            //拼接
            fileName = datePath + "/" + fileName;

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

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

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

3、控制层

创建controller:OssController.java

package com.kuang.oss.controller;

import com.kuang.commonutils.R;
import com.kuang.oss.service.OssService;
import io.swagger.annotations.Api;
import io.swagger.annotations.ApiOperation;
import io.swagger.annotations.ApiParam;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.*;
import org.springframework.web.multipart.MultipartFile;

@Api(description="阿里云文件管理")
@RestController
@RequestMapping("/eduoss/fileoss")
@CrossOrigin
public class OssController {

    @Autowired
    private OssService ossService;

    @ApiOperation(value = "文件上传")
    @PostMapping("/upload")
    public R uploadOssFile(@ApiParam(name = "file", value = "文件", required = true)
                            @RequestParam("file") MultipartFile file){
        //返回上传到oss的路径
        String url = ossService.uploadFileAvator(file);
        return R.ok().data("url",url);
    }

}

4、重启oss服务,Swagger中测试文件上传

http://localhost:8002/swagger-ui.html

四、Nginx 反向代理服务器

  • 请求转发
  • 负载均衡
  • 动静分离

在这里插入图片描述

1、安装window版的nginx

下载官网:http://nginx.org/en/download.html

将nginx-1.12.0.zip解压到开发目录中
如:D:\develop\nginx-1.12.2
使用cmd启动nginx ,运行nginx.exe

在这里插入图片描述
系统会运行两个nginx进程。

特点:使用cmd启动nginx,如果关闭cmd窗口,nginx不会停止的。

需要使用nginx.exe -s stop 进行手动关闭,重启命令nginx -s reload

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

1、找到nginx配置文件D:\develop\nginx-1.12.2\conf\nginx.conf

2、在nginx.conf进行配置

(1)修改nginx默认端口,把 80 修改 81
在这里插入图片描述

(2)配置nginx转发规则

server {
        listen       9001;
        server_name  localhost;

		location ~ /eduservice/ {
			proxy_pass http://localhost:8001;
		}
		location ~ /eduuser/ {
			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 ~ /ucenterservice/ {
			proxy_pass http://localhost:8006;
		}
		location ~ /edumsm/ {
			proxy_pass http://localhost:8005;
		}
		location ~ /orderservice/ {
			proxy_pass http://localhost:8007;
		}
		location ~ /staservice/ {
			proxy_pass http://localhost:8008;
		}
		location ~ /admin/ {
			proxy_pass http://localhost:8009;
		}
		
    }

3、修改前端请求地址

(1)修改config/dev.env.js

BASE_API: '"http://localhost:9001"',

(2)重启前端程序

修改配置文件后,需要手动重启前端程序

在这里插入图片描述

五、添加讲师实现头像前端整合

1、在添加讲师页面,创建上传组件,实现上传。

使用element-ui组件实现。到源代码里面找到组件,复制到前端项目/src/components里面

在这里插入图片描述

2、添加讲师页面使用这个复制上传组件
src/views/edu/teacher/save.vue

<!-- 讲师头像 -->
<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'

3、js脚本实现上传和图片回显

export default {
  components: { ImageCropper, PanThumb },
  data() {
    return {
      //其它数据模型
      ......,
      
      //上传弹框组件是否显示
      imagecropperShow:false,
      imagecropperKey:0,//上传组件key值
      BASE_API:process.env.BASE_API,//获取dev.env.js里面地址
      saveBtnDisabled: false//保存按钮是否禁用
    }
  },
   //.......,
  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
    },
    //其他函数
	......,
  }
}

4、设置默认头像

config/dev.env.js中添加阿里云oss bucket地址

OSS_PATH: '"https://guli-file.oss-cn-beijing.aliyuncs.com"'

组件中初始化头像默认地址

const defaultForm = {
  ......,
  avatar: process.env.OSS_PATH + '/avatar/default.jpg'
}

5、启动测试即可


如果有收获!!! 希望老铁们来个三连,点赞、收藏、转发。
创作不易,别忘点个赞,可以让更多的人看到这篇文章,顺便鼓励我写出更好的博客

本文链接: http://www.dtmao.cc/news_show_250074.shtml

附件下载

相关教程

    暂无相关的数据...

共有条评论 网友评论

验证码: 看不清楚?