教育在线系统开发学习（六）

最新推荐文章于 2023-01-04 12:11:06 发布

qq_43072699

最新推荐文章于 2023-01-04 12:11:06 发布

阅读量1.3k

点赞数

分类专栏： Java后端文章标签： java

本文链接：https://blog.csdn.net/qq_43072699/article/details/109229164

版权

Java后端专栏收录该内容

7 篇文章 0 订阅

订阅专栏

课程笔记来自尚硅谷在线教育项目课程

对象存储OSS：
海量安全低成本高可靠的云存储服务

过程：
创建Bucket；
图片url（https://edu-pc.oss-cn-shanghai.aliyuncs.com/%E5%BE%AE%E4%BF%A1%E5%9B%BE%E7%89%87_20200303205048.jpg）

java代码操作阿里云OSS

创建操作阿里云oss的许可证（id和密钥）
id：LTAI4GBVir38stcRUsSBhvzD
密钥：Qh8WLOEjSUjluqLZdVH59be2LyODoX
创建accesskey

引入依赖，创建配置文件，创建启动类
@SpringBootApplication(exclude = DataSourceAutoConfiguration.class) //避免自动加载数据库的内容了
（1）创建常量类，读取配置文件内容
（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    //交给spring管理，返回json数据
@RequestMapping("/eduoss/fileoss")
@CrossOrigin
public class OssController {
    @Autowired
    private OssService ossService;


    //上传图片得方法
    @PostMapping
    public R uploadOssFile(MultipartFile file ){
        //返回上传到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.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.IOException;
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.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/11/12/01.jpg
            //获取当前日期
            String datePath = new DateTime().toString("yyyy/MM/dd");
            //拼接
            filename = datePath+'/'+filename;


            //调用oss方法实现上传
            //第一个参数是bucket名称  第二个参数是上传到oss文件路径和名称  第三个参数 上传文件输入流
            ossClient.putObject(bucketName, filename, inputStream);
            //关闭ossclient
            ossClient.shutdown();

            //把上传之后得文件路径返回
            //https://edu-pc.oss-cn-shanghai.aliyuncs.com/%E5%BE%AE%E4%BF%A1%E5%9B%BE%E7%89%87_20200303205048.jpg）
            String url = "https://"+bucketName+"."+endpoint+"/"+filename;
            return url;


        } catch (IOException e) {
            e.printStackTrace();
            return null;
        }

    }
}

nginx反向代理服务器

请求转发
在这里插入图片描述

负载均衡
在这里插入图片描述

动静分离

nginx.exe -s stop 需要手动停止
（1)配置nginx实现请求转发功能
在nginx.conf进行配置（默认端口80改成81）
在这里插入图片描述

上传头像前端整合

 <!-- 讲师头像：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：上传成功后的回调 -->        
     <image-cropper                   
     v-show="imagecropperShow"                   
     :width="300"                   
     :height="300"                   
     :key="imagecropperKey"                   
     :url="BASE_API+'/admin/oss/file/upload'"                   
     field="file"                   
     @close="close"                   
     @crop-upload-success="cropSuccess"/>     
      </el-form-item>

前端field属性要与controller里面得multipartyFile名字一样，而且field属性会把上传得文件与格式重命名