vue+element-ui+阿里云oss服务端签名后直传图片的

最近开发项目过程中需要有一些图片上传的功能，本想用普通的上传方式，即后台提供上传的地址，前端直接调用的方法，但此方法有一点缺点，用户数据需先上传到应用服务器，之后再上传到OSS。网络传输时间比直传到OSS多一倍。如果用户数据不通过应用服务器中转，而是直传到OSS，速度将大大提升。为了提高上传效率，决定使用服务端签名后直传的方法来实现。

服务端签名后直传的原理如下：

• 用户发送上传Policy请求到应用服务器。
• 应用服务器返回上传Policy和签名给用户。
• 用户直接上传数据到OSS
  阿里云服务端签名后直传官方示例

但讲真，阿里云的开发文档写的并不是特别好理解，而且demo是用Plupload组件原生JS实现的，加入到vue项目中还需进行进一步封装，于是用elementui中的上传组件封装实现了服务端签名直传，示例如下：

<template>
  <div>
    <el-upload
      class="oss-upload"
      ref="upload"
      action
      :show-file-list="false"
      :before-upload="uploadBefore"
      :http-request="picUpload"
      :on-success="handleChange"
    >
      <img v-if="imageUrl" :src="imageUrl" class="oss-upload-img" />
      <i v-else class="el-icon-plus uploader-icon"></i>
    </el-upload>
  </div>
</template>
<script>
import request from '@/utils/request'
export default {
  name: 'picUpload',
  data() {
    return {
      url: '',
      imageUrl: ''
    }
  },
  methods: {
    get_suffix(filename) {
      let pos = filename.lastIndexOf('.')
      let suffix = ''
      if (pos != -1) {
        suffix = filename.substring(pos)
      }
      return suffix
    },
    random_string(len) {
      len = len || 32
      var chars = 'ABCDEFGHJKMNPQRSTWXYZabcdefhijkmnprstwxyz2345678'
      var maxPos = chars.length
      var pwd = ''
      for (let i = 0; i < len; i++) {
        pwd += chars.charAt(Math.floor(Math.random() * maxPos))
      }
      return pwd
    },
    async picUpload(file) {
      let pro = new Promise((resolve, rej) => {
        // 判断签名有没有过期
        var res = JSON.parse(localStorage.getItem('sign'))
        var timestamp = Date.parse(new Date()) / 1000
        if (res && res.expire - 3 > timestamp) {
          resolve(res)
        } else {
          this.axios("阿里云上传的地址").then(res => {
            if (res.status == 200) {
              localStorage.setItem('sign', JSON.stringify(res.data))
              resolve(res.data)
            }
          })
        }
      })
      var that = this
      pro.then(success => {
        var data = success
        var ossData = new FormData()
        ossData.append('name', file.file.name)
        //key就代表文件层级和阿里云上的文件名
        let filename = file.file.name
        let picName = this.random_string(10) + this.get_suffix(filename)
        let keyValue = data.dir + '/' + picName
        ossData.append('key', keyValue)
        ossData.append('policy', data.policy)
        ossData.append('OSSAccessKeyId', data.accessid)
        ossData.append('success_action_status', 200)
        ossData.append('signature', data.signature)
        ossData.append('file', file.file, file.file.name)
        this.axios
          .post(data.host, ossData, {
            headers: {
              'Content-Type': 'multipart/form-data'
            }
          })
          .then(res => {
            if (res.status == 200) {
              this.imageUrl = URL.createObjectURL(file.file.raw)
              let url = data.host + '/' + keyValue
              this.url = url
              // 这个URL就是上传后得到的绝对路径
              this.$emit('uploadSuccess', url)
            }
          })
          .catch(error => {})
      })
    },
    uploadBefore(file) {
      // 上传文件之前校验图片格式和大小
      const isJPG = file.type === 'image/svg+xml' || file.type === 'image/png'
      const isLt5M = file.size / 1024 / 1024 < 5
      if (!isJPG) {
        this.$message.error('上传图片只能是 PNG、SVG 格式!')
        return false
      }
      if (!isLt5M) {
        this.$message.error('上传图片大小不能超过5MB!')
        return false
      }
    }
  }
}
</script>

<style lang="scss">
.oss-upload .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  width: 60px;
  height: 60px;
}
.oss-upload .el-upload:hover {
  border-color: #409eff;
}
.uploader-icon {
  font-size: 18px;
  color: #8c939d;
  width: 60px;
  height: 60px;
  line-height: 60px;
  text-align: center;
}
.oss-upload-img {
  width: 60px;
  height: 60px;
  display: block;
}
</style>