vue+ iview oss簽名直傳

上傳圖片上傳到oss上，先請求接口獲取oss需要的簽名策略信息

現在項目的utils文件下創建ossUpload.js,內容如下

import axios from '@/axios'
import { publicApi } from "@/api/index.js";
const basic = require("@/config/index.js");
// 文件上傳url
let uploadUrl = publicApi.ossUpload


let accessid = ''
let policyBase64 = ''
let signature = ''
let callbackbody = ''
let key = ''
let expire = 0
let host = ''
let g_object_name = ''
let now =  Date.parse(new Date()) / 1000;

// 生成隨機字符串
function 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;
}
// 獲取用戶上傳原始文件名
function get_file_name(filename) {
  let pos = filename.lastIndexOf('.')
  let suffix = ''
  if (pos != -1) {
    suffix = filename.substring(pos)
  }
  return suffix;
}
//  把隨機生成的字符串拼接在原始上傳文件名後面生成新的唯一文件名
function set_file_name(filename) {
  let suffix = get_file_name(filename)
  g_object_name = key + random_string(10) + suffix
  return ''
}

// 獲取後端返回的簽名信息，生成oss參數
function oss(filename = null) {
  // 可以判斷當前expire是否超過了當前時間， 如果超過了當前時間， 就重新取一下， 3 s 作爲緩衝。
  now = Date.parse(new Date()) / 1000;
  if (now) {
    // 調用後端服務器接口獲取簽名信息，利用axios返回promise，可以鏈式調用
      return axios.get(uploadUrl).then(res => {
        console.log('uploadjs----',res)
        /* 返回的簽名策略信息包含:
        {
          accessid: "LTAI*******UPPr", // 用戶請求的accessid
          callback: "eyJjYWxs************H0ifQ==", // 回調
          dir: "test/file-dir/", // 上傳文件的存儲位置
          expire: "1557974779", // 上傳策略Policy失效時間
          host: "http://xxxxxxxxx.com", // 上傳文件服務器地址
          policy: "eyJleHBp***********6/EMG7U=" ,// 用戶表單上傳的策略（Policy)
          signature: "JumJy*****k6/EMG7U=" // 簽名信息
        }
        */
        policyBase64 = res['policy']
        accessid = res['accessid']
        signature = res['signature']
        expire = parseInt(res['expire'])
        callbackbody = res['callback']
        host = res['host']
        key = res['dir']



        if (filename != null) {
          set_file_name(filename)
        }
        // 返回表單上傳需要的參數信息
        return {
          'host': host,
          'key': g_object_name,
          'policy': policyBase64,
          'OSSAccessKeyId': accessid,
          'success_action_status': '200', //讓服務端返回200,不然，默認會返回204
        //   'callback': callbackbody,
          'signature': signature,
        };
      })
  }
}

export { oss }

然後在需要上傳圖片的地方使用

<template>
    <div>
        <Upload
            multiple
            type="drag"
            :action="uploadHost"
            :data="uploadData"
            :before-upload="beforeUpload"
            :on-success="handleSuccess"
        >
            <Button icon="ios-cloud-upload-outline">Upload files</Button>
        </Upload>
        <img :src="filePath" alt="">
    </div>
</template>
<script>
// 引入生成上傳參數方法
import {oss} from '@/utils/ossUpload.js'
export default{
  data() {
      return{
          // 附件上傳路徑
    uploadHost: '',
    // 附件上傳攜帶參數
    uploadData: {},
    // 上傳後返回的存儲的文件名
    fileName: '',
    // 上傳後返回的文件存儲地址
    filePath: ''
      }
  
  },
  methods: {
    // 在Upload組件的鉤子before-upload中獲取到生成的參數信息
    beforeUpload(file) {
      return oss(file.name).then(res => {
        console.log('ossupload', res);
        
        this.uploadHost = res.host
        this.uploadData = res
      })
    },
    // 上傳成功的回調函數
    handleSuccess(res, file, fileList) {
      console.log('handleSuccess',res)
      /* 上傳成功後，文件服務器會返回上傳文件在oss上存儲位置、文件名及相關信息
      {
        filename: "test/file-dir/JdzYDhdrtF.jpg"
        height: "683"
        mimeType: "image/jpeg"
        size: "186142"
        url: "http://xxxx.xxx.com/test/file-dir/JdzYDhdrtF.jpg"
        width: "1024"
      }
     *
    */

    // 根據自己的業務場景，將返回的文件位置信息和其他表單信息一起提交給後端進行業務關聯，在其他地方需要使用附件時可以根據url位置找到上傳的文件 
    //   this.fileName= res.data.filename,
      this.filePath= this.uploadData.host + '/'+ this.uploadData.key
    }
  }
}
</script>