微服务结合阿里云OSS服务实现图片上传功能-WEB前端

（本文以ElementUI的图片上传组件进行演示）

若初次接触OSS，请移步了解 JAVA后端的实现逻辑 -> 微服务结合阿里云OSS服务实现图片上传功能-JAVA后端

准备工作

使用阿里云OSS存储服务需要配置跨域，否则上传会因为跨域问题而导致上传失败
步骤如下：
打开阿里云-对象存储OSS控制台，找到我们配好的Bucket点击进入即可进入以上页面。在“概览”页面下方可以找到一条 跨域访问，单击设置进入以下页面。

若是初次设置，则列表是没有任何规则的，我们单击新建规则会弹出右侧“抽屉”组件。
根据页面提示填写相应信息即可。
来源：* 表示所有的网站均可上传图片
允许Methods：表示上传图片的方式 这里选择POST请求方式
允许Headers：表示允许任意请求头
更多详细配置信息请查看官方文档

代码

对以下代码做个简单的解释
action表示上传图片的地址 这个地址可以在本文第一张图中我们配置生成的Bucket域名中找到（已圈出）
:data表示在上传时附带的额外的参数
beforeUpload方法在文件上传提交之前先去后端请求到了服务器签名 并将参数赋值到data中的params对象中保存 以此来保证在上传时可以携带这些参数发送给阿里云进行解析验证是否接收我们的上传请求
\

根据官方文档 若通过【服务器签名后直传】方式 在上传图片时需要携带以下5个额外的参数，这些参数均可在后端返回的JSON字符串中获取到

new_multipart_params = {
	//文件名 可根据‘/’来指定上传到哪个文件夹 若文件夹不存在则自动创建
     'key' : key + '${filename}',
     
     //用户表单上传的策略（Policy），Policy为经过Base64编码过的字符串			
     'policy': policyBase64,
     
     //用户请求的AccessKey ID。
     'OSSAccessKeyId': accessid,
     
     // 设置服务端返回状态码为200，不设置则默认返回状态码204。
     'success_action_status' : '200',    
     
     //对Policy签名后的字符串
     'signature': signature,
 };

代码演示：

<template>
  <el-upload
    action="https://b-mall-picture.oss-cn-shenzhen.aliyuncs.com"
    :data="params"
    :before-upload="beforeUpload"
    :file-list="fileList">
    <el-button size="small" type="primary">点击上传</el-button>
    <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
  </el-upload>
</template>

<script>
import {getUUID} from "@/utils";
export default {
name: "single-upload",
  data() {
    return {
      fileList: [],
      params: {
        OSSAccessKeyId: '',
        policy: '',
        signature: '',
        success_action_status: 200,
        key: '',
      }
    }
  },
  methods: {
  //在上传前 先请求后端得到服务器签名 将签名中的信息赋值到params对象中对应的属性进行保存
    beforeUpload:function (file){
      let _self = this;
      return this.$http({
        url: this.$http.adornUrl('/third/oss/policy'),
        method: 'get',
      }).then(({data}) => {
        data = data.data;
        //我这里为文件的上传指定了一个文件夹
        _self.params.key = data.dir + getUUID() + '_' + file.name;
        _self.params.policy = data.policy;
        _self.params.OSSAccessKeyId = data.accessid;
        _self.params.success_action_status = 200;
        _self.params.signature = data.signature;
      });
    },
  }
}
</script>