Vue上传阿里云OSS(STS方式)

一、准备工作

1. 开通阿里云OSS服务，从控制台上获取AccessKeyId和AccessKeySecret。

2. 创建Bucket，并登录OSS控制台

3. 配置Bucket (很重要)

将allowed origins（来源）设置成 *
将allowed methods（允许methods）设置成 PUT, GET, POST, DELETE, HEAD
将allowed headers（允许headers）设置成 *
将expose headers（暴露headers）设置成 ETag （这里需要换行） x-oss-request-id

可参考阿里官方文档：https://help.aliyun.com/docum...

二、引入ali-oss

有两种方式：

1. 在HTML文件的<head>中包含如下标签：

2. 项目中安装ali-oss

npm install ali-oss --save

可参考阿里官方文档：https://github.com/ali-sdk/al...

这里使用第二种。

三、使用OSS

关于直传，阿里官方给了三种方案：

客户端 JavaScript 签名后直传；
客户端申请服务端签名，然后打包上传；
客户端申请服务端签名，打包上传OSS后回调服务端。

这里使用第一种。

vue中使用步骤：

在src目录中创建utils文件夹
utils文件夹中创建Client.js
在组件中创建testUpload.vue文件

//Client.js
const OSS = require('ali-oss');export default function Client(data) {//后端提供数据return new OSS({region: data.region,  //oss-cn-beijing-internal.aliyuncs.comaccessKeyId: data.accessKeyId,accessKeySecret: data.accessKeySecret,stsToken: data.stsToken,bucket: data.bucket})
}

//testUpload.vue
<template><!--在此处添加渲染的内容--><div><el-uploadclass="upload-demo"ref="upload"drag:before-upload="beforeUpload":on-success="handleSuccess":http-request="handleHttpRequest":headers="uploadHeaders":limit="files":disabled="disabled"multipleaction="":file-list="fileList"><i class="el-icon-upload"></i><div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div><div slot="tip" class="el-upload__tip">上传文件大小不能超过 1G</div></el-upload></div>
</template><script type="text/ecmascript-6">import Client from '../../utils/Client'//将渲染的内容导出export default{props: {},data(){return {region: 'oss-cn-beijing',bucket: '',//这里选择OSS容器percentage: 0,url: '',//后台获取token地址ClientObj: null,dataObj: {},expiration: '',fileList: [],files: 10,uploadHeaders: {authorization: '*'},disabled: false,}},methods: {getDate(){const date = new Date(),year = date.getFullYear(),month = date.getMonth() > 9 ? date.getMonth() + 1 : `0${date.getMonth() + 1}`,day = date.getDate() > 9 ? date.getDate() : `0${date.getDate()}`,hh = date.getHours() > 9 ? date.getHours() : `0${date.getHours()}`,mm = date.getMinutes() > 9 ? date.getMinutes() : `0${date.getMinutes()}`;return `${year}${month}${day}${hh}${mm}`;},getAliToken(){ //获取Tokenreturn new Promise((resolve, reject) => {this.$axios({method: 'POST',url: this.url}).then(res => {if (res.success) {const {expiration, tempAk, tempSk, token} = res.data;this.expiration = expiration;this.dataObj = {region: this.region,bucket: this.bucket,accessKeyId: tempAk,accessKeySecret: tempSk,stsToken: token};resolve(true);} else {reject(false);}}).catch(err => {console.log(err);reject(false);})})},beforeUpload(file){return new Promise((resolve, reject) => {this.getAliToken().then(response => {if (response) {resolve(response);} else {reject(response);}}).catch(err => {console.log(err);reject(err);});})},async handleHttpRequest(option){ //上传OSStry {let vm = this;vm.disabled = true;const client = Client(this.dataObj), file = option.file;//随机命名const random_name = this.random_string(6) + '_' + new Date().getTime() + '.' + file.name.split('.').pop();// 分片上传文件await client.multipartUpload(random_name, file, {progress: async function (p) {let e = {};e.percent = p * 100;option.onProgress(e)}}).then(({res}) => {console.log(res);if (res.statusCode === 200) {// option.onSuccess(ret)return res.requestUrls} else {vm.disabled = false;option.onError('上传失败');}}).catch(error => {vm.disabled = false;option.onError('上传失败');});} catch (error) {console.error(error);this.disabled = false;option.onError('上传失败');}},handleSuccess(response, file, fileList){console.log(response);console.log(file);console.log(fileList);},// 随机生成文件名random_string(len) {len = len || 32;let chars = 'ABCDEFGHJKMNPQRSTWXYZabcdefhijkmnprstwxyz12345678', maxPos = chars.length, pwd = '';for (let i = 0; i < len; i++) {pwd += chars.charAt(Math.floor(Math.random() * maxPos));}return pwd;}},watch: {url(val){if (val) {this.urls.push(val);}}},components: {},computed: {},watch: {},created(){this.getAliToken();},mounted(){},}
</script><style scoped>/**渲染内容的样式**/</style>

完成上传

Vue上传阿里云OSS(STS方式)相关推荐

文件分片上传阿里云OSS
本文参考其他博客并结合自身编写博客原作者:程序猿谢哥哥博客原地址:https://blog.csdn.net/weixin_42825651/article/details/108792264 注 ...
java利用iText写pdf并上传阿里云OSS并下载
iText是用于生成pdf的一个类库,通过它可以生成pdf或者将XML , HTML转换城pdf模版:阿里云的oss对象存储存储的类型比较多了,可以存储音频图片 pdf excel 等资源,oss本 ...
上传阿里云oss对象型存储本地文件和上传流上传
上传阿里云oss对象型存储本地文件和上传流上传 import java.io.ByteArrayInputStream; import java.io.File; import java.io.Fi ...
NetCore多图片批量上传阿里云OSS，代码可以直接拿过来用
背景图片上传功能是web开发必不可少的功能.图片上传到哪里其实都是一个非常头疼的事情,多个文件源各种地址组合,经常会出现图片地址错误问题.自从前后端分离.小程序.app成为流行后,大家一般都会将文件 ...
微信开发图片上传阿里云 oss 服务器
在做微信开发时,我需要将图片上传至阿里云OSS,思路是服务端下载微信图片再转存至OSS. wx.chooseImage({count: 1, // 默认9sizeType: ['original', ...
微信小程序上传阿里云OSS，返回204,400,403,405,解决方案
目录微信小程序上传阿里云 ==OSSAccessKeyId,policy,signature==如何获取呢? 配置Bucket跨域访问配置外网域名到小程序的域名白名单上传报错(返回400,403 ...
Vue+element-ui文件上传阿里云oss+预览word 、excel、ppt、pdf、png、jpg文件
首先下载阿里云oss npm i ali-oss --save 新建ali_oss.js // /** // * [accessKeyId] {String}:通过阿里云控制台创建的AccessKey ...
前端不暴露ak/sk直接上传阿里云oss的方案
需求起因以前写过一篇文章:前端不暴露ak/sk直接上传aws S3的方案因为项目里还用到的阿里云的oss上传,就研究了阿里云是不是也有避免ak/sk泄露到前端的方案, 这里也复述一下这么做的原因: ...
头像上传(阿里云oss存储服务)
本文将讲述如何使用Java代码上传文件到阿里云中,阿里云存储文件方便项目上线后的文件访问和存储,因为上线后就不能用本地进行存储了,后续的代码都在maven工程中进行编写的,当然使用SpringBoot ...

Vue上传阿里云OSS(STS方式)

Vue上传阿里云OSS(STS方式)相关推荐

最新文章

热门文章