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上传的更多相关文章

  1. nodejs, 阿里oss上传下载图片

    const archiver = require('archiver')const send = require('koa-send')const oss = require('ali-oss').W ...

  2. c#版阿里云oss上传——基于layui、pupload的oss 后端web端直传的vue组件

    废话前言 去年,做项目用到oss上传,度娘上逛了一圈写了个前后端代码结合的c#版oss上传. 今年又要用到oss上传时发现很难复用,复用改动的范围太大,显然这个轮子不合格.于是想了下,花了一天的时间( ...

  3. vue 阿里云上传组件

    vue 阿里云上传组件 Vue.js上传图片到阿里云OSS存储 测试项目git地址 本测试项目启动方法 示例链接 组件配置项 实践解释 本文主要介绍如何 在vue项目中使用web 直传方式上传阿里云o ...

  4. 关于 tp5.0 阿里云 oss 上传文件操作

    tp5.0 结合阿里云oss 上传文件 1.引入 oss 的空间( composer install 跑下第三方拓展包及核心代码包) 备注:本地测试无误,放到线上有问题  应该是移动后的路劲(相对于服 ...

  5. android 阿里云oss上传

    购买了阿里云的oss空间,于是用它来存储图片,不过中间的使用算是出了些问题,导致很长的才成功. 不得不说,阿里云文档真的是无力吐槽...乱七八糟的.我完全是东拼西凑,才完成的图片上传功能. 走了很多的 ...

  6. 使用阿里云OSS上传文件

    本文介绍如何利用Java API操作阿里云OSS对象存储. 1.控制台操作 首先介绍一下阿里云OSS对象存储的一些基本概念. 1.1 进入对象存储界面 登录阿里云账号,进入对象存储界面,如图所示. 进 ...

  7. TP5+阿里云OSS上传文件第三节,实现淘宝上传商品图片

    **TP5+阿里云OSS上传文件第三节,实现淘宝上传商品图片首先我们来看看淘宝的功能和样式:** 之后看看制作完成的演示:(由于全部功能弄成GIF有点大,限制上传大小好像在1M之内,压缩之后也有1.9 ...

  8. Vue 将本地图片上传到阿里云

    一.获取服务器通行证(即获取AccessKey和accessKeySecret) getAccess () { let that = this let url = '服务器地址' let params ...

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

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

  10. oss上传文件0字节

    最近使用oss上传文件,不同项目中使用的版本也不同,之前的都能正常上传,最近因需要添加ObjectMetaData属性,扩展了一个方法,发现上传的文件始终是0字节的,最终跟源码发现conntentLe ...

随机推荐

  1. JS日期格式化方法 封装

    //--------------------------------------------------- // 日期格式化 // 格式 YYYY/yyyy/YY/yy 表示年份 // MM/M 月份 ...

  2. TypeScript Number

    TypeScript Number TypeScript 与 JavaScript 类似,支持 Number 对象. Number 对象是原始数值的包装对象. 语法 var num = new Num ...

  3. 11 个Chrome骚技巧让你为所欲为

    1.曾经,在线调伪类样式困扰过你? 2.源代码快速定位到某一行 ctrl + p 3.联调接口失败时,后台老哥总管你要 response? 4.你还一层层展开 dom:Alt + Click 5.是不 ...

  4. ES6 - Class - 继承

    Class 其实是一个语法糖,他能实现的,ES5同样能实现 ES5 //手机 function Phone(brand,price){ this.brand = brand; this.price = ...

  5. k8s排错(Unhealthy)

      1,组件 Unhealthy 通过kubeadm安装好kubernetes v1.18.6 查看集群状态,发现组件controller-manager 和scheduler状态 Unhealthy

  6. 使用jquery+layui 做一个输入搜索下拉 类似lay-search

    效  果: 因为需要做一个搜索出现下拉然后点击 自动填装input 内容的 东西. 一开始使用lay-search 的控件去弄. 但是无法控制里面的内容.所以用了一些笨方法去弄 废话不说了, html ...

  7. 威纶通作为modbusTcp主站应用

    1.在威纶通中添加modbus Tcp,作为主机,在Tcp服务器客户端模型中作为客户端: 2.威纶通地址与modbus标准功能码的对应关系: 地址1x_single_Bit,对应02功能码(读输入线圈 ...

  8. #PHP #MySQL数据操作 #在线聊天 PHP实现在线聊天与MySQL的“增查删改”

    目录 1.目标图 2.项目简介 3.目录结构 4.建立MySQL表 5.实现过程 5.1 index.php 5.2 data.php 5.2 method.php 5.3  case.php 5.4 ...

  9. Jndi结合DynamicDataSource实现多数据源配置

    首先注意本框架是SSM,配置主要在两个地方.第一个是applicationContext.xml,第二个文件是Tomcat下面的context.xml里面 1.context.xml文件配置的代码如下 ...

  10. 狐漠漠养成日记 Cp.00003 第二周

    上一周整周都在做Unity Newbies Jam,除了一些必要的比如考试或者课程,其他的都推后了. 为了赶项目进度,这一周我可以说是废寝忘食,基本上每天一顿饭,就睡仨小时那种. 以至于到最后一天,也 ...