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>

来源：CSDN

作者：喵大叔、

链接：https://blog.csdn.net/weixin_43990297/article/details/103922873