vue中上传图片至阿里云oss
1.开通阿里云的oss服务这些这里就不多做介绍了
2.登入阿里云的后台管理系统创建一个Bucket
3.在后台管理系统中进入访问控制
4.点击用户管理->新建用户->填写相关信息,就生成了下图3
5.点击生成用户右侧的授权,添加如图的授权策略
6.点击角色管理->新建角色,然后创建了一个如下图的H5ROULE角色
7.点击右侧授权,并选择如下图的授权策略
8.在vue组件中使用
<template>
<div class="upload">
<div class="oss_file">
<input type="file" :id="id" @change="doUpload"/>
<img :src="url" alt="">
</div>
</div>
</template> <script>
export default {
name: 'upload',
data () {
return {
region: 'oss-cn-hangzhou',根据你买的那个区的做相应的更改
bucket: 'buket名称',
id: 'upload',
percentage: 0,
url:'',
urls:[],
getToken:{
sign:'',
}
}
},
methods:{
doUpload () {
const _this = this;
const urls = [];
_this.$post('请求后台接口获取accessKeyId,accessKeySecret和临时验签SecurityToken',_this.getToken).then((result) => {
console.log(result);
const client = new OSS.Wrapper({
region: _this.region,
accessKeyId: result.accessKeyId,
accessKeySecret:result.accessKeySecret,
stsToken: result.SecurityToken,
bucket: _this.bucket
})
_this.percentage = 0;
const files = document.getElementById(_this.id)
if (files.files) {
const fileLen = document.getElementById(_this.id).files
let resultUpload = ''
for (let i = 0; i < fileLen.length; i++) {
const file = fileLen[i]
// 随机命名
let random_name = this.random_string(6) + '_' + new Date().getTime() + '.' + file.name.split('.').pop()
// 上传
client.multipartUpload(random_name, file, {
progress: function* (percentage, cpt) {
// 上传进度
_this.percentage = percentage
}
}).then((results) => {
// 上传完成
const url = 'http://buket名称.oss-cn-hangzhou.aliyuncs.com/'+ results.name; _this.$store.dispatch("changeUrl", _this.url); _this.url = url; console.log(url); }).catch((err) => { console.log(err) }) } } }) }, // 随机生成文件名 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; } }, watch:{ url(val){ if(val){ this.urls.push(val); } } } } </script> <style lang="less"> .oss_file { height: 150px; width: 150px; border-radius: 50%; // background: red; img{ width:100%; display: inline-block; float: right; } } .oss_file input { right: 0; top: 0; opacity: 0; filter: alpha(opacity=0); cursor: pointer; width: 100%; height: 100%; } </style>
9.后台操作如下以java为例
vue中上传图片至阿里云oss的更多相关文章
- Java中使用RestFul接口上传图片到阿里云OSS服务器
1.接口方法 import java.io.IOException; import javax.servlet.http.HttpServletRequest; import org.springfr ...
- 上传图片到阿里云OSS和获取上传图片的外网url的步骤
啥都不说 直接上代码 1.html: <form action="/bcis/api/headImgUpload.json" method="post" ...
- TP框架上传图片至阿里云oss
首先安装阿里云oss扩展: composer require aliyuncs/oss-sdk-php 如果这个安装不上可以直接下载SDK的包: 链接:https://pan.baidu.com/s/ ...
- swift3.0 从相册选取或者拍照上传图片至阿里云OSS
导入相应的库 import Photos import AliyunOSSiOS 选取照片需要继承 UIImagePickerControllerDelegate,UINavigationContro ...
- 上传图片到阿里云oss
阿里云地址 登录阿里云管理控制台,创建对象存储oss private static final String endpoint = "http://oss-cn-shanghai.aliyu ...
- swoft 上传图片到 阿里云oss aliyun-oss
1.swoft 获取上传的文件 .官方文档上面没有看到 $files = $request->getUploadedFiles(); $file = $files['file']; 2.在模型 ...
- laravel使用阿里云OSS上传图片
需要自己注册阿里云账号并且开通oss服务,建立Bucket存储空间,此步骤不做演示 一.composer安装:使用composer在项目根目录执行以下命令 composer require johnl ...
- 微信小程序中图片上传阿里云Oss
本人今年6月份毕业,最近刚在上海一家小公司实习,做微信小程序开发.最近工作遇到一个小问题. 微信小程序图片上传阿里云服务器Oss也折腾了蛮久才解决的,所以特意去记录一下. 第一步:配置阿里云地址: 我 ...
- C# .net Ueditor实现图片上传到阿里云OSS 对象存储
在学习的时候,项目中需要实现在Ueditor编辑器中将图片上传到云储存中,老师演示的是上传到又拍云存储,既然看了一遍,直接照搬不算本事,咱们可以依葫芦画瓢自己来动手玩玩其它的云存储服务. 现在云计算产 ...
随机推荐
- WebStorm中配置node.js(Windows)
WebStorm中配置node.js(Windows) 一.node 1.下载安装包 32 位 : https://nodejs.org/dist/v4.4.3/node-v4.4.3-x86.msi ...
- GIS软件相关安装(持续更新)
软件安装是GIS专业的必修课,总会忘记步骤,在此汇总 1.oracle ①无法登录 管理员登录 sqlplus sys/密码 as sysdba https://www.linuxidc.com/li ...
- linux fix the superblock by dumpe2fs fsck
It seems that you have a bad superblock. To fix this: Firstly, boot into a live CD or USB Find out y ...
- Page14:状态观测器[Linear System Theory]
内容包含状态观测器设计分类及其特点 状态观测器设计与状态反馈之间的关系问题 带补偿器动态输出反馈与带状态观测器的状态反馈等价原理 由于第二部分频域部分较为简单,因此仅整理时间域部分
- sql server 按外键分组查询
SELECT ROW_NUMBER() over(partition by a.yngrbsh order by a.SFRQ desc ) RN, c.' and a.LSH not in(sele ...
- 20165336 2017-2018-2 《Java程序设计》第7周学习总结
20165336 2016-2017-2 <Java程序设计>第7周学习总结 教材学习内容总结 查询操作:向数据库发送SQL查询语句,处理查询结果,关闭连接. 顺序查询:next()方法向 ...
- Orchard Core 模块化
在上一篇文章谈到如何搭好一个基础的Orchard Core项目. 今天要尝试Orchard Core的模块化. 我自己的理解:一个系统可以分成一个个模块,这一个个模块是由一个个类库去实现的. 首先,在 ...
- java各版本简单对比
1995.5 Oak ——>java1.0 提出 write once run anywhere 1996.1 jdk1.0 jvm Sun Classic VM 1997.2 JDK1.1 ...
- 27-5-LTDC控制LCD显示屏
1.显示原理 (1).液晶显示是分2层显示的,配置层级结构体参数再将数据输出到混合器合成,显示再液晶上. (2).LTDC初始化结构体 控制 LTDC 涉及到非常多的寄存器,利用 LTDC 初始化结构 ...
- JavaScript学习(一)
变量本身是没有类型的,类型在于它的值(注意开头都是小写).