vue2使用elementui组件将图片从前端上传至阿里云oss

vue2使用elementui组件将图片从前端上传至阿里云oss

前端代码

<template>
    <div>
        <el-upload class="avatar-uploader" 
        action="/api/upload" //这里是必选参数，上传的地址
        :headers="headers"
        name="image"
        :show-file-list="false"
        :on-success="handleAvatarSuccess" 
        :before-upload="beforeAvatarUpload">
            
        <img v-if="imageUrl" :src="imageUrl" class="avatar">
            
        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
        </el-upload>
    </div>
</template>

<script>
import { getToken } from '@/utils/token';
// import { upload } from '@/utils/upload';
const options = {
    computed: {

    },
    mounted() {



    },
    methods: {
        handleAvatarSuccess(res, file) {
            this.imageUrl = URL.createObjectURL(file.raw);
        },
        beforeAvatarUpload(file) {
            const isJPG = file.type === 'image/jpeg';
            const isLt2M = file.size / 1024 / 1024 < 2;

            if (!isJPG) {
                this.$message.error('上传头像图片只能是 JPG 格式!');
            }
            if (!isLt2M) {
                this.$message.error('上传头像图片大小不能超过 2MB!');
            }
            return isJPG && isLt2M;
        }

    },
    data() {
        return {
            imageUrl: '',
            headers:{
                Authorization:  getToken()
            }
        }
    },
}
export default options;
</script>

<style scoped>
.avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}

.avatar-uploader .el-upload:hover {
    border-color: #409EFF;
}

.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
}

.avatar {
    width: 178px;
    height: 178px;
    display: block;
}
</style>

后端接收代码

阿里云提供的工具类

package com.novel.utils;

import com.aliyun.oss.OSS;
import com.aliyun.oss.OSSClientBuilder;
import com.novel.pojo.AliOSSProperties;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Component;
import org.springframework.web.multipart.MultipartFile;

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

@Component//交给ioc容器管理
public class AliOSSUtils {
    /**
     * - @Value注解只能一个一个的进行外部属性的注入。
     *
     * - @ConfigurationProperties可以批量的将外部的属性配置注入到bean对象的属性中。
     */


    /**
     * 方法一：参数多的情况叫繁琐
     * @Value 注解通常用于外部配置的属性注入，具体用法为： @Value("${配置文件中的key}")
     * 将阿里云的配置文件读出来
     * @Value("${aliyun.oss.endpoint}")
     *
     * private String endpoint;
     * @Value("${aliyun.oss.accessKeyId}")
     * private String accessKeyId;
     *
     * @Value("${aliyun.oss.accessKeySecret}")
     * private String accessKeySecret;
     *
     * @Value("${aliyun.oss.bucketName}")
     * private String bucketName;
     */


    /**
     * 方法二：
     * 创建一个实体类，交给ioc容器管理
     * 在实体类上添加`@ConfigurationProperties`注解，并通过perfect属性来指定配置参数项的前缀
     * 然后将这个实体类注入进这个类中
     */
    @Autowired
    private AliOSSProperties aliOSSProperties;


    /**
     * 实现上传图片到OSS
     */
    public String upload(MultipartFile multipartFile) throws IOException {
        // 获取上传的文件的输入流
        InputStream inputStream = multipartFile.getInputStream();

        // 避免文件覆盖
        String originalFilename = multipartFile.getOriginalFilename();
        String fileName = UUID.randomUUID().toString() + originalFilename.substring(originalFilename.lastIndexOf("."));

        //上传文件到 OSS
        OSS ossClient = new OSSClientBuilder().build(aliOSSProperties.getEndpoint(),aliOSSProperties.getAccessKeyId(),aliOSSProperties.getAccessKeySecret());
        ossClient.putObject(aliOSSProperties.getBucketName(), fileName, inputStream);

        //文件访问路径
        String url = aliOSSProperties.getEndpoint().split("//")[0] + "//" + aliOSSProperties.getBucketName() + "." + aliOSSProperties.getEndpoint().split("//")[1] + "/" + fileName;

        // 关闭ossClient
        ossClient.shutdown();
        return url;// 把上传到oss的路径返回
    }
}

创建一个实体类，将交给ioc容器管理

/**
 * 方法二：
 * 创建一个实体类，交给ioc容器管理
 * 在实体类上添加`@ConfigurationProperties`注解，并通过perfect属性来指定配置参数项的前缀
 * 然后将这个实体类注入进这个类中
 */
 

package com.novel.pojo;

import lombok.Data;
import org.springframework.boot.context.properties.ConfigurationProperties;
import org.springframework.stereotype.Component;

@Data
@Component
@ConfigurationProperties(prefix = "aliyun.oss")//通过perfect属性来指定配置参数项的前缀
public class AliOSSProperties {
    //区域
    private String endpoint;
    //身份Id
    private String accessKeyId;
    //身份秘钥
    private String accessKeySecret;
    //储存空间
    private String bucketName;
}

创建 application.yml 配置文件

aliyun:
  oss:
    endpoint: xxx //区域
    accessKeyId: xxx //身份Id
    accessKeySecret: xxx //身份秘钥
    bucketName: xxx //储存空间

然后就可以将ioc注入到所需要的地方

package com.novel.controller;

import com.novel.pojo.Result;
import com.novel.utils.AliOSSUtils;
import lombok.extern.slf4j.Slf4j;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RestController;
import org.springframework.web.multipart.MultipartFile;

import java.io.IOException;

@Slf4j
@RestController
public class UploadController {
    @Autowired
    private AliOSSUtils aliOSSUtils;

    @PostMapping("/api/upload")
    public Result upload(MultipartFile image) throws IOException {
        //调用阿里云OSS工具类，将上传上来的文件存入阿里云
        String url = aliOSSUtils.upload(image);
        //将图片上传完成后的url返回，用于浏览器回显展示
        log.info("图片上传完成，{}",url);
        return Result.success(url);
    }
}