一、获取服务器通行证(即获取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. spingboot linux 启动方式与脚本

    java -jar XXX.jar java -jar xxx.jar & 区别:前台启动ctrl+c就会关闭程序,后台启动ctrl+c不会关闭程序 java -jar xxx.jar > ...

  2. JS while 循环

    while循环:只要条件成立,就重复不断的执行循环体代码 while(条件判断) { 如果条件为true,则执行循环体代码 } while循环结构说明:   在循环开始前,必须要对变量初始化(声明变量 ...

  3. File、FileFilter、递归初步

    java.io.File 文件和目录 路径名的抽象表示形式 文件:File 存储数据的 目录:Directory 文件夹 用来存储文件 路径:Path 定位具有平台无关性 在任意平台都可以使用 Fil ...

  4. 腾讯bugly接入插件(CocosCreator)

    下载: plugin-bugly.zip (1.4 MB) 插件开源地址: https://github.com/tidys/CocosCreatorPlugins/tree/master/packa ...

  5. java中的Math类

    一般地,当需要使用数字的时候,我们通常使用内置数据类型,如:byte.int.long.double 等 在实际开发过程中,我们经常会遇到需要使用对象,而不是内置数据类型的情形.为了解决这个问题,Ja ...

  6. 2019-8-31-dotnet-获取指定进程的输入命令行

    title author date CreateTime categories dotnet 获取指定进程的输入命令行 lindexi 2019-08-31 16:55:58 +0800 2019-0 ...

  7. login-Linux必学的60个命令

    1.作用 login的作用是登录系统,它的使用权限是所有用户. 2.格式 login [name][-p ][-h 主机名称] 3.主要参数 -p:通知login保持现在的环境参数. -h:用来向远程 ...

  8. grep 强大的文本搜索工具

    1.grep -r "History folder does't exist:" * :中间是要搜索的文本,* 表示全部显示出来

  9. Python全栈开发:基本数据类型

    1.数字 int(整型) 在32位机器上,整数的位数为32位,取值范围为-2**31-2**31-1,即-2147483648-2147483647 在64位系统上,整数的位数为64位,取值范围为-2 ...

  10. Aria2 使用

    没错,又是受够了迅雷.旋风的各种奇葩减速(哥哥我还买了了VIP!),IDM 对协议支持又太少还有事没事提示你不是正版三天两头闹着要更新.于是我想起来之前看到过的 Aria2,虽然之前也只是略有耳闻,但 ...