第一步:安装阿里云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的更多相关文章

  1. php工作笔记1-数组常用方法总结,二维数组的去重,上传图片到oss服务器

    1.二维数组去重,生成二维数组 private function array_unique_fb($array2D){ $data = array(); foreach($array2D  as $k ...

  2. xhEditor编辑器上传图片到 OSS

    前段时间,公司在项目上用到了xhEditor编辑器来给用户做一个上传图片的功能当时做的时候觉得很有意思,想想 基本的用户图片上传到自己服务器,还有点小占地方: 后来....然后直接上传到阿里云 .接下 ...

  3. 整合改造百度编译器到thinkphp上传图片到OSS

    oss上传类库,放到public下,放到extend下,实例化是报错找不到上传类(我不知道为什么).

  4. vue2 上传图片

    <template> <div class="vue-upload-img-multiple"> <div v-if="images.len ...

  5. django admin upload 上传图片到oss Django Aliyun OSS2 Storage

    https://github.com/xiewenya/django-aliyun-oss2-storage Install pip install django-aliyun-oss2-storag ...

  6. 使用阿里云对象存储OSS上传图片工具类

    package com.verse.hades.utils; import com.aliyun.oss.OSSClient; import com.aliyun.oss.common.auth.Cr ...

  7. Java使用阿里云OSS对象存储上传图片

    原 Java使用阿里云OSS对象存储上传图片 2017年03月27日 10:47:28 陌上桑花开花 阅读数 26804更多 分类专栏: 工作案例总结 版权声明:本文为博主原创文章,遵循CC 4.0 ...

  8. nodejs, 阿里oss上传下载图片

    const archiver = require('archiver')const send = require('koa-send')const oss = require('ali-oss').W ...

  9. 项目总结21:项目总结21:input实现多图上传(FormData)(上传OSS并保存数据库)

    项目总结21:input实现多图上传(FormData)(上传OSS并保存数据库) 备注:本案例,作为Demo,包含少量的项目业务逻辑,input多图上传的逻辑是完整的: 不废话直接上代码 1-前端标 ...

随机推荐

  1. 考研计算机复试(广东工业大学C语言复试2014~2017笔试题)(精华题选)

    1.C语言中,全局变量的存储类别是() A.extern B.void C.int   D.static 2.静态变量: (1)static 外部变量===>在函数外定义,只能在本文件中使用 ( ...

  2. gridview单击选中勾选框

    1.Dev2005版本: gridView1.OptionsBehavior.ShowEditorOnMouseUp = false;2.Dev2013版本: gridView1.OptionsBeh ...

  3. MyBatis工具类

    package cn.word.util; import java.io.IOException;import java.io.InputStream;import java.util.Enumera ...

  4. CISCO 关闭4786端口解决方法

    先确认交换机是否支持smart install服务 检查命令如下: switch#show vstack config | inc Role Role:Client (SmartInstall ena ...

  5. eclipse起不起来web项目

    eclipse 启动java web项目tomcat无报错,但是项目没有启动成功,可能存在以下原因 1.Maven Dependecies 可能不存在 解决:点击Add将Maven Dependeci ...

  6. ImitateUCM项目启动Tomcat的过程

    启动各种报错:什么source not found ....然而解决后发现都不是问题关键 下面我讲下我的理解(也许这也不是关键,但是通过该这些,我的问题解决了) (1)重新部署Tomcat时,要同步更 ...

  7. 《JavaScript Dom 编程艺术》读书笔记-第10章

    用JS实现动画~内容包括: 1. 动画基础知识 2. 用动画丰富网页的浏览效果 动画就是让元素的位置随时间而不断变化. 位置: //CSSelement{ position:absolute; top ...

  8. js中获取时间new Date()详细介绍

    var myDate = new Date();myDate.getYear(); //获取当前年份(2位)myDate.getFullYear(); //获取完整的年份(4位,1970-????)m ...

  9. js★★★【面向对象的使用方法】*****************★★★★ 相当重要

    标准用法: function Sprite(){ //函数内容部设置属性 this.name='shimily'; } //原型上设置方法 Sprite.prototype.show=function ...

  10. cocos图片的选择以及压缩

    我们在使用cocos在windows平台下,运行速度很快很流畅,很强大,可是当我们打包成apk文件,在手机上运行的时候,流畅度很可能降低,甚至还有间歇性内存彪高. 游戏内存优化我们一般可以从这么3个方 ...