Browser.js安装

安装依赖包或引入js文件：

npm install ali-oss

npm install uuid

<code> <el-upload

class="upload-demo"code>

drag

:file-list="fileList1"code>

action=""code>

:http-request="handleUpload"code>

multiple>

<i class="el-icon-upload"></i>code>

<div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>code>

<div class="el-upload__tip" slot="tip">只能上传jpg/png文件，且不超过500kb</div>code>

</el-upload>

handleUpload(op) {

oss.bucketUpload(op.file,

(res) => {

console.log(res);

});

},

handlePreview(path) {

oss.bucketPreview(path,

(res) => {

console.log(res)

})

}

import {getUploadVoucher} from "@/api/oss";

// uuidv4

import {v4 as uuidv4} from 'uuid';

import path from "path";

const OSS = require('ali-oss')

export default {

/**

* 阿里云oss sdk文件上传 dir 上传到的文件位置

* @param {*} file 文件流

* @param {*} successCallback 成功回调

* @param {*} errCallBack 失败回调

* @param {*} dir 上传文件夹路径 譬如images

*/

bucketUpload(file, successCallback = new Function(), dir = 'zlProcess') {

let fileName = file.name// 先获取上传要的资料签名

// 后台接口

getUploadVoucher().then((res) => {

if (res.code === 200) {

let obj = res.data.credentials || {}

// 实例化一个上传客户端

const client = new OSS({

// yourRegion填写Bucket所在地域。以华东1（杭州）为例，yourRegion填写为oss-cn-hangzhou。

region: 'oss-cn-hangzhou',

// 从STS服务获取的临时访问密钥（AccessKey ID和AccessKey Secret）。

accessKeyId: obj.accessKeyId,

accessKeySecret: obj.accessKeySecret,

// 从STS服务获取的安全令牌（SecurityToken）。

stsToken: obj.securityToken,

// 填写Bucket名称。

bucket: 'zl-process',

})

try {

// 填写Object完整路径。Object完整路径中不能包含Bucket名称。

// 您可以通过自定义文件名（例如exampleobject.txt）或文件完整路径（例如exampledir/exampleobject.txt）的形式实现将数据上传到当前Bucket或Bucket中的指定目录。

// data对象可以自定义为file对象、Blob数据或者OSS Buffer。

let uuid = uuidv4() + "/" + fileName;

if (dir.substring(dir.length - 1, 1) !== '/') {

dir += '/'

}

const result = client.put(dir + uuid, file);

result.then(res => {

// let size = file.size > 1000000 ? parseFloat(file.size / 1000000).toFixed(2) + 'M' : parseFloat(file.size / 1000).toFixed(2) + 'KB'

successCallback({

name: res.name,

url: res.url

})

})

} catch (e) {

console.log(e)

}

} else {

this.$message.warning("获取STSToken失败");

}

}

);

},

bucketPreview(path, successCallback = new Function()) {

getUploadVoucher().then((res) => {

if (res.code === 200) {

let obj = res.data.credentials || {}

// 实例化一个上传客户端

const client = new OSS({

// yourRegion填写Bucket所在地域。以华东1（杭州）为例，yourRegion填写为oss-cn-hangzhou。

region: 'oss-cn-hangzhou',

// 从STS服务获取的临时访问密钥（AccessKey ID和AccessKey Secret）。

accessKeyId: obj.accessKeyId,

accessKeySecret: obj.accessKeySecret,

// 从STS服务获取的安全令牌（SecurityToken）。

stsToken: obj.securityToken,

// 填写Bucket名称。

bucket: 'zl-process',

});

const url = client.signatureUrl(path, {

// 如果您希望生成的签名URL可以应用图片样式的效果，您可以通过process参数指定样式，格式为style/样式名称。

// process: "style/imagestyle",

});

// 设置URL的有效时长。单位为秒。如果不设置有效时长，则默认为1800。

// url = client.signatureUrl('example.jpg', {expires: 3600});

// console.log(url);

successCallback({

url: url

})

}

})

}

}

 

客户端向业务服务器请求上传策略。

客户端首先向业务服务器发送请求，请求中应包含所需上传操作的最小权限需求（例如上传到特定Bucket的权限）和期望的有效时间等信息。不同于直接请求Post签名和Post Policy，客户端需要请求的是一个带有特定权限限制的STS Token以及上传策略。

业务服务器向STS服务请求获取STS Token。

业务服务器收到客户端请求后，使用长期凭证向阿里云STS服务发起请求，生成一个具有限定权限和有效时间的STS Token。

STS服务向业务服务器返回STS Token。

业务服务器根据STS Token和其他上传限制生成上传策略。

业务服务器根据返回的STS Token和其他上传限制条件（例如Bucket名称、目录路径、过期时间等）生成一个安全的上传策略（Policy），并返回给客户端。

客户端构造并提交表单上传请求。

客户端使用收到的STS Token和上传策略，结合文件信息构造HTML表单。此时，上传策略中的签名和STS Token的加入使得客户端可以直接与OSS交互，而无需暴露业务服务器的长期凭证。

OSS返回成功响应给客户端。