一、获取服务器通行证(即获取AccessKey和accessKeySecret)

    getAccess () {
let that = this
let url = '服务器地址'
let params = {
type: 'K'
}
// 第一步:获取AccessKey
this.$api.send(url, params).then((response) => {
if (response.status === 200) {
that.accessKey = response.body.data.data.Credentials
/* global OSS */
that.client = new OSS.Wrapper({
region: 'oss-cn-shenzhen',
bucket: '阿里云bucket文件夹名',
accessKeyId: that.accessKey.AccessKeyId,
accessKeySecret: that.accessKey.AccessKeySecret,
stsToken: that.accessKey.SecurityToken
})
that.folder = response.body.data.data.folder;
for (let i = 0; i < that.allList.length; i++) {
if (!that.allList[i].hasUpload) {//allList 需要上传的图片数组
(function () { that.uploadItem(that.allList[i], i) })(i) } } } }) }

二、上传到服务器

      uploadItem (file, index) {
let that = this
let progress = function (p) {
return function (done) {
done()
}
}
// 命名规则:web+id+10位时间戳+随机4位数
let storeAs = 'web' + that.$user.getAll().userId + Math.round(new Date().getTime() / 1000) + Math.ceil(Math.random() * 100000).toString() + '.' + file.name.split('.')[1]
// 第二步:调用阿里云上传函数上传文件
this.client.multipartUpload(this.folder + '/' + storeAs, file.obj, {
progress: progress
}).then(function (result) {
alert(上传成功)
}).catch(function (err) {
console.log(err)
})
}
 this.getUnloadImg()

  

Vue 将本地图片上传到阿里云的更多相关文章

  1. JavaScript进阶(九)JS实现本地文件上传至阿里云服务器

    JS实现本地文件上传至阿里云服务器 前言 在前面的博客< JavaScript进阶(八)JS实现图片预览并导入服务器功能>(点击查看详情)中,实现了JS将本地图片文件预览并上传至阿里云服务 ...

  2. Linux本地数据上传到阿里云OSS

    这篇文章主要是介绍如何将服务器本地的数据上传到阿里云OSS的指定bucket中,最重要的参考文档是数据迁移单机部署.我第一次上传数据到OSS上时,步骤要比前面的链接中介绍的要麻烦,ossimport工 ...

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

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

  4. 保姆级SpringBoot+Vue图片上传到阿里云OSS教程

    小二是新来的实习生,作为技术 leader,我给他安排了一个非常简单的练手任务,把前端 markdown 编辑器里上传的图片保存到服务器端,结果他真的就把图片直接保存到了服务器上,这下可把我气坏了,就 ...

  5. Docker本地镜像上传到阿里云仓库

    登录阿里云 在容器镜像服务中先创建命名空间 随后创建镜像仓库 我使用的代码源是本地仓库 创建后点击仓库的管理 就可以看到阿里云提供的操作指南 (下面的操作每个人都不同,详情查看阿里云的操作指南) 输入 ...

  6. egg-multipart + el-upload 实现带参图片上传至阿里云OSS

    egg-multipart有两种模式:file和stream el-upload参数传递有两种方式:利用自带参数data和手动添加参数 egg-multipart介绍 一.file 模式下的带参传递 ...

  7. OSS文件上传到阿里云

    <script src="http://gosspublic.alicdn.com/aliyun-oss-sdk-4.4.4.min.js"></script&g ...

  8. 备份MySQL数据库并上传到阿里云OSS存储

    1. 环境配置 要将本地文件上传到阿里云oss中, 必须使用阿里云提供的工具 ossutil, 有32位,也有64位的, Linux和Windows都有.具体可以到阿里云官网下载 官网及文档: htt ...

  9. 用Vue来实现图片上传多种方式

    没有业务场景的功能都是耍流氓,那么我们先来模拟一个需要实现的业务场景.假设我们要做一个后台系统添加商品的页面,有一些商品名称.信息等字段,还有需要上传商品轮播图的需求. 我们就以Vue.Element ...

随机推荐

  1. JAVA 设计模式之 工厂模式详解

    一.简单工厂模式 简单工厂模式(Simple Factory Pattern)是指由一个工厂对象决定创建出哪一种产品类 的实例.属于创建型模式,但它不属于 GOF,23 种设计模式 (参考资料: ht ...

  2. 我擦,DELPHI写个浏览器竟然这么容易,我只加了3个控件,写了3句代码。

  3. 编写main方法

  4. 记录:使用springboot的cors和vue的axios进行跨域

    一.编写一个配置类,并且注册CorsFilter: 注意允许跨域的域名不要写错 @Configuration public class ZysuyuanCorsConfiguration { @Bea ...

  5. [JZOJ4673] 【NOIP2016提高A组模拟7.20】LCS again

    题目 描述 题目大意 给你一个字符串和字符的取值范围,问和这个字符串的最长公共子串的长度为N−1N-1N−1的串的个数. 思考历程 一看就知道这是一个神仙题. 思考了一会儿,觉得AC是没有希望的了. ...

  6. Idea安装Mevn

    1.下载mevn安装包. 下载地址:http://maven.apache.org/ 点击Download 2.下面这两个选哪个都可以,取决于你用什么方式解压 3.把下载好的安装包解压到一个没有中文的 ...

  7. Oracle使用语句块之循环插入数据

    1.业务要求:  将oracle表A的整表的数据一次性导入到表B中 , 以A_ID为外键关联. (*******如果开发环境和实际生产环境的数据一致,而且数据量比较小情况,可以直接手动添加数据; ** ...

  8. 「题解」:[AHOI2012] 树屋阶梯

    A掉了第一道题然后就去肝第四题,被路过的Larry大神看到了. L:你怎么还没过掉第三题? 我:…… L:快我帮你过掉! 他拉下来我第一题的码,手改了两个参数,半分钟后:AC …… 然后我就理所当然的 ...

  9. 菜鸟nginx源码剖析数据结构篇(四)红黑树ngx_rbtree_t[转]

    菜鸟nginx源码剖析数据结构篇(四)红黑树ngx_rbtree_t Author:Echo Chen(陈斌) Email:chenb19870707@gmail.com Blog:Blog.csdn ...

  10. 用Spire.PDF提取PDF里的PNG图片

    用Nuget抓取类库,FreeSpire.PDF就可以 代码如下 , 亲测可以抓取PNG图形,即使原图是JPG,也会存成PNG格式输出: //加载PDF文档 PdfDocument doc = new ...