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的更多相关文章

  1. Java中使用RestFul接口上传图片到阿里云OSS服务器

    1.接口方法 import java.io.IOException; import javax.servlet.http.HttpServletRequest; import org.springfr ...

  2. 上传图片到阿里云OSS和获取上传图片的外网url的步骤

    啥都不说  直接上代码 1.html: <form action="/bcis/api/headImgUpload.json" method="post" ...

  3. TP框架上传图片至阿里云oss

    首先安装阿里云oss扩展: composer require aliyuncs/oss-sdk-php 如果这个安装不上可以直接下载SDK的包: 链接:https://pan.baidu.com/s/ ...

  4. swift3.0 从相册选取或者拍照上传图片至阿里云OSS

    导入相应的库 import Photos import AliyunOSSiOS 选取照片需要继承 UIImagePickerControllerDelegate,UINavigationContro ...

  5. 上传图片到阿里云oss

    阿里云地址 登录阿里云管理控制台,创建对象存储oss private static final String endpoint = "http://oss-cn-shanghai.aliyu ...

  6. swoft 上传图片到 阿里云oss aliyun-oss

    1.swoft  获取上传的文件 .官方文档上面没有看到 $files = $request->getUploadedFiles(); $file = $files['file']; 2.在模型 ...

  7. laravel使用阿里云OSS上传图片

    需要自己注册阿里云账号并且开通oss服务,建立Bucket存储空间,此步骤不做演示 一.composer安装:使用composer在项目根目录执行以下命令 composer require johnl ...

  8. 微信小程序中图片上传阿里云Oss

    本人今年6月份毕业,最近刚在上海一家小公司实习,做微信小程序开发.最近工作遇到一个小问题. 微信小程序图片上传阿里云服务器Oss也折腾了蛮久才解决的,所以特意去记录一下. 第一步:配置阿里云地址: 我 ...

  9. C# .net Ueditor实现图片上传到阿里云OSS 对象存储

    在学习的时候,项目中需要实现在Ueditor编辑器中将图片上传到云储存中,老师演示的是上传到又拍云存储,既然看了一遍,直接照搬不算本事,咱们可以依葫芦画瓢自己来动手玩玩其它的云存储服务. 现在云计算产 ...

随机推荐

  1. WebStorm中配置node.js(Windows)

    WebStorm中配置node.js(Windows) 一.node 1.下载安装包 32 位 : https://nodejs.org/dist/v4.4.3/node-v4.4.3-x86.msi ...

  2. GIS软件相关安装(持续更新)

    软件安装是GIS专业的必修课,总会忘记步骤,在此汇总 1.oracle ①无法登录 管理员登录 sqlplus sys/密码 as sysdba https://www.linuxidc.com/li ...

  3. 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 ...

  4. Page14:状态观测器[Linear System Theory]

    内容包含状态观测器设计分类及其特点 状态观测器设计与状态反馈之间的关系问题 带补偿器动态输出反馈与带状态观测器的状态反馈等价原理 由于第二部分频域部分较为简单,因此仅整理时间域部分

  5. sql server 按外键分组查询

    SELECT ROW_NUMBER() over(partition by a.yngrbsh order by a.SFRQ desc ) RN, c.' and a.LSH not in(sele ...

  6. 20165336 2017-2018-2 《Java程序设计》第7周学习总结

    20165336 2016-2017-2 <Java程序设计>第7周学习总结 教材学习内容总结 查询操作:向数据库发送SQL查询语句,处理查询结果,关闭连接. 顺序查询:next()方法向 ...

  7. Orchard Core 模块化

    在上一篇文章谈到如何搭好一个基础的Orchard Core项目. 今天要尝试Orchard Core的模块化. 我自己的理解:一个系统可以分成一个个模块,这一个个模块是由一个个类库去实现的. 首先,在 ...

  8. java各版本简单对比

    1995.5 Oak ——>java1.0 提出 write once run anywhere 1996.1 jdk1.0  jvm Sun Classic VM 1997.2 JDK1.1 ...

  9. 27-5-LTDC控制LCD显示屏

    1.显示原理 (1).液晶显示是分2层显示的,配置层级结构体参数再将数据输出到混合器合成,显示再液晶上. (2).LTDC初始化结构体 控制 LTDC 涉及到非常多的寄存器,利用 LTDC 初始化结构 ...

  10. JavaScript学习(一)

    变量本身是没有类型的,类型在于它的值(注意开头都是小写).