vue使用阿里oss上传
1、首先用包管理工具 npm install ali-oss --S 下载oss依赖包
2、在util文件里创建util.js文件,在该文件写入
export default {
getClient: function() {
// let OSS = require('ali-oss')
let OSS = require('ali-oss/dist/aliyun-oss-sdk.min.js')
return new OSS({
region: 'oss-cn-shanghai', //你的oss地址 ,具体位置见下图
accessKeyId: 'xxx', //你的ak
accessKeySecret: 'xxx', //你的secret
bucket: 'xxx' //你的oss名字
})
},
}
3、在main.js文件里写入:
import utils from './static/utils/index.js'
Vue.prototype.$utils= utils
4、在页面使用
uploadMa() {
(function() {
return new Promise((resolve, reject) => {
uni.chooseImage({
count: 1,
success(res) {
resolve(res.tempFiles)
},
fail(err) {
console.log(err)
reject(err)
}
})
})
})().then(filesArr => {
const thisSelf = this;
const client = thisSelf.$utils.getClient();
let arr = [];
uni.showLoading({
title: '上传中...'
});
for (let i = 0; i < filesArr.length; i++) {
var datetoday = thisSelf.$utils.getTodayDate();
var randomStr = "/" + new Date().getTime() + thisSelf.$utils.randomString(4); // 4位随机字符串
var extensionName = filesArr[i].name.substr(filesArr[i].name.lastIndexOf(".")); // 文件扩展名
var fileName = "image/" + datetoday + randomStr + extensionName; // 文件名字(相对于根目录的路径 + 文件名)
client.multipartUpload(fileName, filesArr[i]).then(function(result) {
arr.push(result.res.requestUrls[0].split('?')[0])
if (arr.length === filesArr.length) {
uni.hideLoading();
thisSelf.platformPicture = arr[0]
console.log(arr[0])
}
})
}
})
},
5、至此已完成
vue使用阿里oss上传的更多相关文章
- nodejs, 阿里oss上传下载图片
const archiver = require('archiver')const send = require('koa-send')const oss = require('ali-oss').W ...
- c#版阿里云oss上传——基于layui、pupload的oss 后端web端直传的vue组件
废话前言 去年,做项目用到oss上传,度娘上逛了一圈写了个前后端代码结合的c#版oss上传. 今年又要用到oss上传时发现很难复用,复用改动的范围太大,显然这个轮子不合格.于是想了下,花了一天的时间( ...
- vue 阿里云上传组件
vue 阿里云上传组件 Vue.js上传图片到阿里云OSS存储 测试项目git地址 本测试项目启动方法 示例链接 组件配置项 实践解释 本文主要介绍如何 在vue项目中使用web 直传方式上传阿里云o ...
- 关于 tp5.0 阿里云 oss 上传文件操作
tp5.0 结合阿里云oss 上传文件 1.引入 oss 的空间( composer install 跑下第三方拓展包及核心代码包) 备注:本地测试无误,放到线上有问题 应该是移动后的路劲(相对于服 ...
- android 阿里云oss上传
购买了阿里云的oss空间,于是用它来存储图片,不过中间的使用算是出了些问题,导致很长的才成功. 不得不说,阿里云文档真的是无力吐槽...乱七八糟的.我完全是东拼西凑,才完成的图片上传功能. 走了很多的 ...
- 使用阿里云OSS上传文件
本文介绍如何利用Java API操作阿里云OSS对象存储. 1.控制台操作 首先介绍一下阿里云OSS对象存储的一些基本概念. 1.1 进入对象存储界面 登录阿里云账号,进入对象存储界面,如图所示. 进 ...
- TP5+阿里云OSS上传文件第三节,实现淘宝上传商品图片
**TP5+阿里云OSS上传文件第三节,实现淘宝上传商品图片首先我们来看看淘宝的功能和样式:** 之后看看制作完成的演示:(由于全部功能弄成GIF有点大,限制上传大小好像在1M之内,压缩之后也有1.9 ...
- Vue 将本地图片上传到阿里云
一.获取服务器通行证(即获取AccessKey和accessKeySecret) getAccess () { let that = this let url = '服务器地址' let params ...
- 用Vue来实现图片上传多种方式
没有业务场景的功能都是耍流氓,那么我们先来模拟一个需要实现的业务场景.假设我们要做一个后台系统添加商品的页面,有一些商品名称.信息等字段,还有需要上传商品轮播图的需求. 我们就以Vue.Element ...
- oss上传文件0字节
最近使用oss上传文件,不同项目中使用的版本也不同,之前的都能正常上传,最近因需要添加ObjectMetaData属性,扩展了一个方法,发现上传的文件始终是0字节的,最终跟源码发现conntentLe ...
随机推荐
- C++实现链式表示多项式加法运算
#include<iostream>#include<cstdlib>using namespace std;#define MAXSIZE 100#define OK 1#d ...
- 从URL中获取参数
1.跳转测试页面 获取的url上的参数 <!doctype html> <html lang="en"> <head> < ...
- OpenStack 虚拟机制作qcow2格式镜像
虚拟机拍摄快照导出1.将虚拟机制作成镜像(即拍摄快照):2.利用该虚机的快照,创建一个快照卷,大小是根据快照的大小自动设置的:3.利用命令将快照卷 upload-to-image 到虚机的快照内 ci ...
- Java根据经纬度计算两点之间的距离
public final class DistanceUtils { /** * 地球半径,单位 km */ private static final double EARTH_RADIUS = 63 ...
- python爬虫实战——自动下载百度图片(文末附源码)
用Python制作一个下载图片神器 前言 这个想法是怎么来的? 很简单,就是不想一张一张的下载图片,嫌太慢. 在很久很久以前,我比较喜欢收集各种动漫的壁纸,作为一个漫迷,自然是能收集多少就收集多少.小 ...
- 【BOOK】解析库--pyquery
CSS选择器 1.初始化 html=''' <div> <ul> <li class="item-0">first item</li> ...
- linux相关命令-linux查看头两行、查看最后两行-查找一个文件里包含的error信息并且把它输出到另一个文件里-查看滚动日志-在一个目录下查找大于50M的文件-根据端口号去杀死某一个进程
1.linux查看头两行.查看最后两行 使用head(查看前几行).tail(查看末尾几行).eg:查看/home/wenjian1的前10行内容,应该是:# head -n 10 /home/wen ...
- git常用命令查询手册
默认已经连接到远程仓库的情况下 本地文件夹初始化成git仓库.提交本地仓库并添加注释 git init git add 文件1(文件夹1) 文件2(文件夹2)... git commit -m &qu ...
- 初步理解1=C
1=C 1=C 表示简谱上看到1就弹C键 1=? 1就从?键出发 例如我们看到1=D, 我们看到1就从D键出发 1=C 到1=D就叫做升了一个key 黑键怎么表示 半音与全音 半音是一个距离单位 1 ...
- Linux查看进程调用接口跟踪命令strace
sudo strace -f -p 9022 -e connect