vue2上传图片到OSS
第一步:安装阿里云OSS
<!-- 引入在线资源 -->
<script src="http://gosspublic.alicdn.com/aliyun-oss-sdk-x.x.x.min.js"></script>
<!-- 引入本地资源 -->
<script src="./aliyun-oss-sdk-x.x.x.min.js"></script>
注意:
- x.x.x代表版本号,具体版本信息可在这访问查看
- 引入在线资源方式依赖于CDN服务器的稳定性,推荐用户使用离线方式引入,即通过本地资源或自行构建的方式
也可使用npm安装SDK
npm install ali-oss
第二步:安装完成后使用
可使用 import 或 require 进行引用。
region,accessKeyId,stsToken,bucket需要后端同事提供接口获取,其中region是阿里云所在区域,登录阿里云右上角能查看,例如“oss-cn-hangzhou”,bucket是阿里云仓库的名称
let OSS = require('ali-oss');
let client = new OSS({
region: '<oss region>',
accessKeyId:'your accessKeyId',
stsToken:'your stsToken',
bucket:'your bucket name'
});
第三步:上传
your_route是你要上传文件夹的路径,后端同事可以返给你也可以自己拼接,我这里是自己拼接的,比如你的bucket下有个文件夹叫pc,你要上传到pc这个文件夹下,your_route就是‘/pc/’,file是你的上传的file
其中分片上传如果图片大于100k,返回的路径最后会自动带一个?uploadId=***********之类的参数,我在这里是自己截取处理了一下
//文件名
const storeAs = 'your_routte' + file.name;
client.multipartUpload(storeAs, file, { }).then(results => {
//console.log(results)
if(results.res.requestUrls[0].indexOf('?') != -1){
this.url = results.res.requestUrls[0].split('?')[0];
}else{
//console.log('图片100k以内')
this.url = results.res.requestUrls[0]
}
Toast('头像上传成功');
}).catch((err) => {
console.log(err);
});
vue2上传图片到OSS的更多相关文章
- php工作笔记1-数组常用方法总结,二维数组的去重,上传图片到oss服务器
1.二维数组去重,生成二维数组 private function array_unique_fb($array2D){ $data = array(); foreach($array2D as $k ...
- xhEditor编辑器上传图片到 OSS
前段时间,公司在项目上用到了xhEditor编辑器来给用户做一个上传图片的功能当时做的时候觉得很有意思,想想 基本的用户图片上传到自己服务器,还有点小占地方: 后来....然后直接上传到阿里云 .接下 ...
- 整合改造百度编译器到thinkphp上传图片到OSS
oss上传类库,放到public下,放到extend下,实例化是报错找不到上传类(我不知道为什么).
- vue2 上传图片
<template> <div class="vue-upload-img-multiple"> <div v-if="images.len ...
- django admin upload 上传图片到oss Django Aliyun OSS2 Storage
https://github.com/xiewenya/django-aliyun-oss2-storage Install pip install django-aliyun-oss2-storag ...
- 使用阿里云对象存储OSS上传图片工具类
package com.verse.hades.utils; import com.aliyun.oss.OSSClient; import com.aliyun.oss.common.auth.Cr ...
- Java使用阿里云OSS对象存储上传图片
原 Java使用阿里云OSS对象存储上传图片 2017年03月27日 10:47:28 陌上桑花开花 阅读数 26804更多 分类专栏: 工作案例总结 版权声明:本文为博主原创文章,遵循CC 4.0 ...
- nodejs, 阿里oss上传下载图片
const archiver = require('archiver')const send = require('koa-send')const oss = require('ali-oss').W ...
- 项目总结21:项目总结21:input实现多图上传(FormData)(上传OSS并保存数据库)
项目总结21:input实现多图上传(FormData)(上传OSS并保存数据库) 备注:本案例,作为Demo,包含少量的项目业务逻辑,input多图上传的逻辑是完整的: 不废话直接上代码 1-前端标 ...
随机推荐
- 考研计算机复试(广东工业大学C语言复试2014~2017笔试题)(精华题选)
1.C语言中,全局变量的存储类别是() A.extern B.void C.int D.static 2.静态变量: (1)static 外部变量===>在函数外定义,只能在本文件中使用 ( ...
- gridview单击选中勾选框
1.Dev2005版本: gridView1.OptionsBehavior.ShowEditorOnMouseUp = false;2.Dev2013版本: gridView1.OptionsBeh ...
- MyBatis工具类
package cn.word.util; import java.io.IOException;import java.io.InputStream;import java.util.Enumera ...
- CISCO 关闭4786端口解决方法
先确认交换机是否支持smart install服务 检查命令如下: switch#show vstack config | inc Role Role:Client (SmartInstall ena ...
- eclipse起不起来web项目
eclipse 启动java web项目tomcat无报错,但是项目没有启动成功,可能存在以下原因 1.Maven Dependecies 可能不存在 解决:点击Add将Maven Dependeci ...
- ImitateUCM项目启动Tomcat的过程
启动各种报错:什么source not found ....然而解决后发现都不是问题关键 下面我讲下我的理解(也许这也不是关键,但是通过该这些,我的问题解决了) (1)重新部署Tomcat时,要同步更 ...
- 《JavaScript Dom 编程艺术》读书笔记-第10章
用JS实现动画~内容包括: 1. 动画基础知识 2. 用动画丰富网页的浏览效果 动画就是让元素的位置随时间而不断变化. 位置: //CSSelement{ position:absolute; top ...
- js中获取时间new Date()详细介绍
var myDate = new Date();myDate.getYear(); //获取当前年份(2位)myDate.getFullYear(); //获取完整的年份(4位,1970-????)m ...
- js★★★【面向对象的使用方法】*****************★★★★ 相当重要
标准用法: function Sprite(){ //函数内容部设置属性 this.name='shimily'; } //原型上设置方法 Sprite.prototype.show=function ...
- cocos图片的选择以及压缩
我们在使用cocos在windows平台下,运行速度很快很流畅,很强大,可是当我们打包成apk文件,在手机上运行的时候,流畅度很可能降低,甚至还有间歇性内存彪高. 游戏内存优化我们一般可以从这么3个方 ...