一、获取服务器通行证(即获取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. 阿里云CentOs7上安装Mysql

    前提:虽然yum源上有mysql,但是好像没有mysql-server,所以我们还是选择自己从官网上下载安装 一.新建文件夹,然后下载解压 cd /usr/ #新建mysql文件夹 mkdir mys ...

  2. c++中变量、变量名、变量地址、指针、引用等含义

    首先了解内存,内存就是一排房间,编号从0开始,0,1,2,3,4,5...... 房间里面一定要住人,新人住进去了,原来的人就走了:不管你住不住,里面都有人. 编号就是地址.里面的人就是内容,为了我们 ...

  3. docker-compose (单机版的容器编排工具)

    类似于ansible剧本 yml 格式 要使用这个编排工具,必须先安装 yum install -y docker-compose cd wordpress/ vi docker-compose.ym ...

  4. git -- 项目开发最常用操作记录

    官方Git - Book https://git-scm.com/book/zh/v2 ------------------------------git配置以及公钥生成--------------- ...

  5. 17.splash_case02

    # 抓取<我不是药神>的豆瓣评论 import csv import time import requests from lxml import etree fw = open('doub ...

  6. 【AT3611】Tree MST

    题目 这个题的输入首先就是一棵树,我们考虑一下点分 我们对于每一个分治重心考虑一下跨过这个分治重心的连边情况 就是把当前分治区域内所有的点向距离分治重心最近的点连边 考虑一下这个算法的正确性,如果我们 ...

  7. Python-包与常用模块(2)

    目录 包 导入包内包 相对导入和绝对导入 注意事项 time模块 datetime模块 random模块 argparse 模块 configparser模块 hashlib模块和hmac模块 typ ...

  8. 模板——二分图匹配KM

    具体方法就不介绍了,详见 https://blog.csdn.net/sixdaycoder/article/details/47720471 主要讲一些注意点: 1:不直接将未匹配的y减小是因为要保 ...

  9. Neo4j 第四篇:使用.NET驱动访问Neo4j

    本文使用的IDE是Visual Studio 2015 ,驱动程序是Neo4j官方的最新版本:Neo4j.Driver,创建的类库工程(Project)要求安装 .NET Framework 4.5. ...

  10. [Turn]C# 强制关闭当前程序进程(完全Kill掉不留痕迹)

    C#代码 /// <summary> /// 运行DOS命令 /// DOS关闭进程命令(ntsd -c q -p PID )PID为进程的ID /// </summary> ...