Vue+ElementUI+阿里云OSS+SpringCloud服务端签名后直传图片的示例

---

前言

公司后一个项目需要上传大量图片，为了开发期间不耽误开发进度，特地先学习一下图片的上传相关知识。

---

以下是本篇文章正文内容，博客以学习记录为目的，所以仅供参考

一、方案选择

• FastDFS和vsftpd

FastDFS是我之前用到过的，后一种没用过，但我知道都，是需要自己搭建服务器（可能还要搭建集群），使用和维护成本很高，并且如果想用的话需要单独拎出来一个服务器，费用也不低，所以pass

• 云存储（阿里云对象存储、七牛云存储）

即开即用，无需维护，按需使用，按量收费。

并且我自己有一个阿里云服务器和账户，所以直接使用阿里云的oss对象存储

二、使用步骤

1、创建子AccessKey

具体创建按照阿里云指导一步一步完成即可：
简要步骤如下
1）鼠标悬停头像框，进入AccessKey管理

2）使用子用户

3)创建账户

4）创建好后查看列表

5）点击上图的添加权限

2.创建Bucket

实名认证部分略

1）直接找到产品服务，点击进入oss

2)其他内容

3）创建好后会有一个列表如下

4）进入我们自己创建的bucket
因为我打算使用web端直传的方式，所以要配置跨域

5）点击设置，创建跨域规则

至此，一个bucket就创建好了。下面可以正式进入开发了

三、开发

1、后端上传方式

1）引入官方给的sdk坐标

<dependency>
    <groupId>com.aliyun.oss</groupId>
    <artifactId>aliyun-sdk-oss</artifactId>
    <version>3.10.2</version>
</dependency>
<!--Java9以上还要引入下列jar包-->
<dependency>
    <groupId>javax.xml.bind</groupId>
    <artifactId>jaxb-api</artifactId>
    <version>2.3.1</version>
</dependency>
<dependency>
    <groupId>javax.activation</groupId>
    <artifactId>activation</artifactId>
    <version>1.1.1</version>
</dependency>
<dependency>
    <groupId>org.glassfish.jaxb</groupId>
    <artifactId>jaxb-runtime</artifactId>
    <version>2.3.3</version>
</dependency>

2）编写测试类

@Test
    public void uploadPicture() throws Exception{
        String endpoint = "oss-cn-hangzhou.aliyuncs.com";
        String accessKeyId = "your accessKeyId ";
        String accessKeySecret = "your accessKeySecret ";
        String bucketName = "your bucketName";
        OSS ossClient = new OSSClientBuilder().build(endpoint, accessKeyId, accessKeySecret);
        InputStream inputStream = new FileInputStream("/Users/Pictures/测试图片上传/2200000001_20210519133517.jpg");
        ObjectMetadata objectMetadata = new ObjectMetadata();
        objectMetadata.setContentType("image/jpg");
        /**
        	第一个参数是bucketname,
        	第二个是路径名+文件名
        	第三个是文件的流
        	第四个是可以通过url预览	
        */
        PutObjectRequest putObjectRequest = new PutObjectRequest(bucketName, "exampledir/2200000001_20210519133518.jpg", inputStream,objectMetadata);
        ossClient.putObject(putObjectRequest);
        ossClient.shutdown();
    }

3）弊端分析

• 弊端

采用这种方式，前端需要先把图片传给本地服务器，然后本地服务器在将图片上传云端，白白浪费了很多时间和资源，而且阿里云官方也建议采用服务端签名直传的方式。

2、服务端签名直传

正式环境采用分布式上传

1）流程

• 前端发送请求到本地服务器
• 服务器请求云端拿到签名数据返回给前端
• 前端携带签名数据上传云端

2）引入sdk

 <dependency>
     <groupId>com.alibaba.cloud</groupId>
     <artifactId>spring-cloud-starter-alicloud-oss</artifactId>
     <version>2.1.0.RELEASE</version>
 </dependency>

3）获取签名的controller

@RestController
public class OssController {

    @Autowired
    private OSS ossClient;

    @Value("${spring.cloud.alicloud.oss.bucket}")
    private String bucket;
    @Value("${spring.cloud.alicloud.oss.endpoint}")
    private String endpoint;
    @Value("${spring.cloud.alicloud.access-key}")
    private String accessId;


    @RequestMapping("/oss/policy")
    public R getSign(){
        String host = "https://" + bucket + "." + endpoint;
        String format = new SimpleDateFormat("yyyy-MM-dd").format(new Date());
        String dir = format + "/";
        Map<String, String> respMap = null;
        try {
            long expireTime = 30;
            long expireEndTime = System.currentTimeMillis() + expireTime * 1000;
            Date expiration = new Date(expireEndTime);
            PolicyConditions policyConds = new PolicyConditions();
            policyConds.addConditionItem(PolicyConditions.COND_CONTENT_LENGTH_RANGE, 0, 1048576000);
            policyConds.addConditionItem(MatchMode.StartWith, PolicyConditions.COND_KEY, dir);

            String postPolicy = ossClient.generatePostPolicy(expiration, policyConds);
            byte[] binaryData = postPolicy.getBytes("utf-8");
            String encodedPolicy = BinaryUtil.toBase64String(binaryData);
            String postSignature = ossClient.calculatePostSignature(postPolicy);
            respMap = new LinkedHashMap<String, String>();
            respMap.put("accessid", accessId);
            respMap.put("policy", encodedPolicy);
            respMap.put("signature", postSignature);
            respMap.put("dir", dir);
            respMap.put("host", host);
            respMap.put("expire", String.valueOf(expireEndTime / 1000));
        } catch (Exception e) {
            System.out.println(e.getMessage());
        } finally {
            ossClient.shutdown();
        }
        return  R.ok().put("data",respMap);
    }

}

4）js代码

这里只贴主要代码，想要完整代码请留言

//请求签名参数的方法
import http from '@/utils/httpRequest.js'
export function policy() {
   return  new Promise((resolve,reject)=>{
        http({
            url: http.adornUrl("/oss/policy"),
            method: "get",
            params: http.adornParams({})
        }).then(({ data }) => {
            resolve(data);
        })
    });
}

5）vue代码（elementui的上传组件）

<template>
   
  <div>
    <el-upload
      action="your alybucket address"
      :data="dataObj"
      list-type="picture"
      :multiple="false"
      :show-file-list="showFileList"
      :file-list="fileList"
      :before-upload="beforeUpload"
      :on-remove="handleRemove"
      :on-success="handleUploadSuccess"
      :on-preview="handlePreview"
    >
      <el-button size="small" type="primary">点击上传</el-button>
      <div slot="tip" class="el-upload__tip">
        只能上传jpg/png文件，且不超过10MB
      </div>
    </el-upload>
    <el-dialog :visible.sync="dialogVisible">
      <img width="100%" :src="fileList[0].url" alt="" />
    </el-dialog>
  </div>
</template>
<script>
import { policy } from "./policy";
import { getUUID } from "@/utils";

export default {
  name: "singleUpload",
  props: {
    value: String,
  },
  computed: {
    imageUrl() {
      return this.value;
    },
    imageName() {
      if (this.value != null && this.value !== "") {
        return this.value.substr(this.value.lastIndexOf("/") + 1);
      } else {
        return null;
      }
    },
    fileList() {
      return [
        {
          name: this.imageName,
          url: this.imageUrl,
        },
      ];
    },
    showFileList: {
      get: function () {
        return (
          this.value !== null && this.value !== "" && this.value !== undefined
        );
      },
      set: function (newValue) {},
    },
  },
  data() {
    return {
      dataObj: {
        policy: "",
        signature: "",
        key: "",
        ossaccessKeyId: "",
        dir: "",
        host: "",
        // callback:'',
      },
      dialogVisible: false,
    };
  },
  methods: {
    emitInput(val) {
      this.$emit("input", val);
    },
    handleRemove(file, fileList) {
      this.emitInput("");
    },
    handlePreview(file) {
      this.dialogVisible = true;
    },
    beforeUpload(file) {
      let _self = this;
      return new Promise((resolve, reject) => {
        policy()
          .then((response) => {
            _self.dataObj.policy = response.data.policy;
            _self.dataObj.signature = response.data.signature;
            _self.dataObj.ossaccessKeyId = response.data.accessid;
            _self.dataObj.key =
              response.data.dir + getUUID() + "_${filename}";
            _self.dataObj.dir = response.data.dir;
            _self.dataObj.host = response.data.host;
            resolve(true);
          })
          .catch((err) => {
            reject(false);
          });
      });
    },
    handleUploadSuccess(res, file) {
      console.log("上传成功...");
      this.showFileList = true;
      this.fileList.pop();
      this.fileList.push({
        name: file.name,
        url:
          this.dataObj.host +
          "/" +
          this.dataObj.key.replace("${filename}", file.name),
      });
      this.emitInput(this.fileList[0].url);
    },
  },
};
</script>
<style>
</style>

总结

以上就是完整的学习过程，如果哪里有不对，请帮忙指正！