最近開發(fā)項目過程中需要有一些圖片上傳的功能畔咧，本想用普通的上傳方式，即后臺提供上傳的地址迄损，前端直接調(diào)用的方法，但此方法有一點缺點痒留，用戶數(shù)據(jù)需先上傳到應用服務器，之后再上傳到OSS蠢沿。網(wǎng)絡傳輸時間比直傳到OSS多一倍伸头。如果用戶數(shù)據(jù)不通過應用服務器中轉(zhuǎn)，而是直傳到OSS舷蟀，速度將大大提升恤磷。為了提高上傳效率，決定使用服務端簽名后直傳的方法來實現(xiàn)野宜。

服務端簽名后直傳的原理如下：

• 用戶發(fā)送上傳Policy請求到應用服務器扫步。
• 應用服務器返回上傳Policy和簽名給用戶。
• 用戶直接上傳數(shù)據(jù)到OSS
  阿里云服務端簽名后直傳官方示例

但講真速缨，阿里云的開發(fā)文檔寫的并不是特別好理解锌妻，而且demo是用Plupload組件原生JS實現(xiàn)的，加入到vue項目中還需進行進一步封裝旬牲，于是用elementui中的上傳組件封裝實現(xiàn)了服務端簽名直傳仿粹，示例如下：

<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>