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 ...
随机推荐
- Huawei-2488H-V5服务器基础配置与系统安装
0x00 前言简述 描述: 由于最近公司来了一批华为的服务器以及存储,来的时候真的感到非常意外因为从中标到接货超过了1个半月,其间还因为各种事进行推延: 在现场实施人员完成服务器上架以及测试后,由于业 ...
- React脚手架的使用
初始化项目 npx create-react-app my-app // 或 npm init react-app my-app // 或 yarn create react-app my-app 启 ...
- Java基础——数组的初始化与赋值、循环遍历,Random随机数[大于等于0,小于所给值)
package com.zhao.demo; public class Demo05 { //数组的静态初始化 /*public static void main(String[] args) { i ...
- Linux:服务器(CentOS)搭建FTP服务
Vsftpd(very secure FTP deamon)是众多Linux发行版中默认的FTP服务器.本文以CentOS 8(腾讯云)服务器为例,使用vsftpd搭建Linux云服务器的FTP服务器 ...
- 其他2-while+read按行读取文件
一.三种方法 1.exec读取文件 exec <file sum=0 while read line do cmd done 2. cat读取文件 cat file|while read lin ...
- jenkins +docker+python接口自动化之jenkins拉取gitee上的代码(四)
1.背景 1.经过我们前面几轮的安装测试,我们已经安装了jenkins容器,python3,以及运行我们python代码所需要的第三方库在requirements.txt文件下统一安装. 2.需求 我 ...
- HDK_节点开发:SOP_ComputeVisibility
Houdini版本:18.5.596 节点概述:剔除模型在某视线方向下所有不可见面. 参数界面: 输入:三角化的模型(左),可选输入遮挡模型(右) 原理:在画布上绘制该方向上的最近深度,作为判定各面可 ...
- Vue双向绑定原理 从vue2的Object.defineProperty到vue3的proxy
在网上查找资料的时候,看到很多关于Vue双向绑定的文章都直接说是通过Object.defineProperty实现的,但我隐约记得去年看过尤大的视频,记得好像是用proxy实现的,所以又好好找了一下, ...
- 解决nios eclipse报错: WARNING: Couldn't compute FAST_CWD pointer的方法
几天照着书上的例子弄nios的开发流程,编译的时候遇见了这个问题 WARNING: Couldn't compute FAST_CWD pointer 在网上找了大半天解决方法,如下: 链接:http ...
- 监控室NTP/GPS同步时钟解决方案
深圳市立显电子有限公司,专业LED时钟生产厂家!--------[点击进入] 车站.机场.学校等场所监控室布置要求: 1.宜选择建筑物中环境噪声较小的声场所.如车站票务中心后台.机场保安值班室. ...