一、头像上传

后端部分

1.1 controller
package com.controller;

import com.pojo.CommonResult;
import com.service.impl.OssServiceImpl;
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 OssServiceImpl ossService;

    // 上传头像的方法
    @PostMapping
    public CommonResult uploadOssFile(MultipartFile file){
        // 返回上传到Oss后生成的文件路径
        String url = ossService.uploadFileAvatar(file);
        return new CommonResult(200,"文件上传路径",url);
    }
}

1.2 service
package com.service.impl;

import com.aliyun.oss.OSS;
import com.aliyun.oss.OSSClientBuilder;
import com.service.OssService;
import com.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 {
    @Override
    public String uploadFileAvatar(MultipartFile file) {
        String endpoint = ConstantPropertiesUtils.END_POINT;
        String keyId = ConstantPropertiesUtils.KEY_ID;
        String keySecret = ConstantPropertiesUtils.KEY_SECRET;
        String bucketName = ConstantPropertiesUtils.BUCKET_NAME;
        
        // 创建oss实例
        OSS ossClient = new OSSClientBuilder().build(endpoint, keyId, keySecret);
        try {
            // 获得文件流
            InputStream inputStream = file.getInputStream();
            // 获取文件原始名
            final String oldName = file.getOriginalFilename();
            // 获取文件后缀:从最后一个点切割
             final String suffix = oldName.substring(oldName.lastIndexOf(".")); //.jpg
            // 创建文件新的名字
            String newName = UUID.randomUUID() + suffix;
            // 通过工具类对当前日期进行转化
            String dataPath = new DateTime().toString("yyyy/MM/dd");
            ossClient.putObject(bucketName, dataPath +"/"+ newName, inputStream);
            // 将上传成功的文件路径拼接并返回
            // https://guli-lyq.oss-cn-shenzhen.aliyuncs.com/01.jpg
            String url = "https://" + bucketName +"."+ endpoint +"/"+ dataPath +"/"+ newName;
            return url;
        } catch (IOException e) {
            e.printStackTrace();
        } finally {
            ossClient.shutdown();
        }
        return null;
    }
}

1.3 依赖
	<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>

前端部分

        <!-- 讲师头像:TODO -->
        <el-form-item label="讲师头像">
            <!-- 头衔缩略图 -->
            <pan-thumb :image="String(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:上传成功后的回调 
        这里field的值必须和后端接口MultipartFile file的形参名相同
        <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";
数据
        data() {
            return {
                teacher: {
                    id: '',
                    name: '',
                    sort: 0,
                    level: 1,
                    career: '',
                    intro: '',
                    avatar: '' // 头像url
                },
                imagecropperKey: 0, // 上传组件唯一标识
                imagecropperShow: false, // 上传弹框组件是否显示
                BASE_API: process.env.BASE_API,
                saveBtnDisabled: false // 保存按钮是否禁用
            }
        },
方法
			// 关闭上传弹框的方法
            close() {
                this.imagecropperShow = false
                // 修改组件key,否则会存留上次上传成功的预览图
                this.imagecropperKey = this.imagecropperKey + 1
            },
            // 上传成功之后的方法
            cropSuccess(data) {
                // 得到上传成功之后返回的图片地址
                this.teacher.avatar = data
                // 关闭上传弹框
                this.imagecropperShow = false
                // 修改组件key,否则会存留上次上传成功的预览图
                this.imagecropperKey = this.imagecropperKey + 1
            }

一、docker安装并配置redis

拉取redis镜像
docker pull redis:[版本号]

创建本地存放redis的位置
mkdir -p /mydata/redis/conf
touch /mydata/redis/conf/redis.config
修改配置文件

redis-6.0.6配置文件

主要配置的如下:

bind 127.0.0.1 # 注释掉这部分,使redis可以外部访问
------XX   daemonize no # 用守护线程的方式启动     XX------------
requirepass 你的密码#给redis设置密码
appendonly yes # redis持久化  默认是no
tcp-keepalive 300 # 防止出现远程主机强迫关闭了一个现有的连接的错误 默认是300
启动redis
docker run \
-p 6379:6379 \
--name redis \
-v /mydata/redis/data:/data \
-v /mydata/redis/conf/redis.conf:/etc/redis/redis.conf \
-d redis redis-server /etc/redis/redis.conf 
停止容器
docker stop redis

删除容器
docker rm redis

重启容器
docker start redis

使用 redis-cli 访问容器内 redis
docker exec -it redis redis-cli

查看现有的 redis 密码
config get requirepass
验证 redis 密码
auth "自定义的密码"
设置 redis 密码
config set requirepass 自定义密码
查看 redis 版本

docker exec -it redis redis-server -v