文档地址:https://developer.qiniu.com/kodo/sdk/1283/javascript#2

npm引入

npm install qiniu-js

例子:

var observable = qiniu.upload(file, key, token, putExtra, config)
var subscription = observable.subscribe(observer) // 上传开始
// or
var subscription = observable.subscribe(next, error, complete) // 这样传参形式也可以
subscription.unsubscribe() // 上传取消

参数说明:

file:上传的文件(files[0])

key:自定义的路径

token:后台接口返回

config: object

var config = {
useCdnDomain: true,
region: qiniu.region.z2
};
var putExtra = {
fname: "",
params: {},
mimeType: [] || null
};

其它的具体参数可取值可以参考文档

贴个具体上传的代码

selectPhoto(event){//上传身份证明文档(doc、docx) 照片
var self=this;
self.photoWordFormat=0;//重置一下
if(event.target.files.length>0){
var dianIndex=event.target.files[0].name.lastIndexOf('.'),
fileName,
file=event.target.files[0];
if(dianIndex>-1){
fileName=event.target.files[0].name.slice(dianIndex);
if(fileName==".png"||fileName==".jpg"||fileName==".gif"){
if(file.size>5120000){
tools.alert('文件太大了, 不允许超过5M~');
return;
}
self.photoWorld=event.target.files[0].name;
self.photoWordFormat=1;//格式正确
var timestamp = (new Date()).valueOf();
var params={
file:file,//要上传的文件
key:"paper_file/"+timestamp+self.photoWorld,//自定义文件地址
token:self.token,
config:{
useCdnDomain: true,
region:undefined
},
putExtra:{
fname:self.photoWorld,
params: {},
mimeType: [] || null
},
}
self.upLoadQiniu(params);
}else{
tools.alert('请选择png,jpg,gif格式的文件,并且文件不能为空');
return;
}
}
}
},
upLoadQiniu(params){//上传至七牛云
var self=this;
self.loading= layer.load(1, {//请求未成功时出现loading页 ,3代表一中效果
shade: [0.1,'#fff'] //0.1透明度的白色背景
});
// 上传回调
function next(res){
// console.log(res);
}
function error(err){
console.log(err);
}
function complete(res){
var url="http://xxxxxx.cn/"+res.key;
self.postObj.pic=url;
layer.close(self.loading);//关闭loading效果
}
var observable = qiniu.upload(params.file, params.key, params.token, params.putExtra, params.config);
var subscription = observable.subscribe(next, error, complete) // 这样传参形式也可以
// subscription.unsubscribe() // 上传取消
},

进一步在tools中封装成一个公共方法

/**
*
* @param {*} file 上传的文件
* @param {*} token 上传需要的token
*/
function qiniuUpLoadFun(file,token){//七牛上传方法
return new Promise(function(resolve){
var timestamp = (new Date()).valueOf();
var params={
file:file,//要上传的文件
key:"paper_file/"+timestamp+file.name,//自定义文件地址
token:token,
config:{
useCdnDomain: true,
region:undefined
},
putExtra:{
fname:file.name,
params: {},
mimeType: [] || null
},
}
resolve(params);
}).then(function(params){
return upLoadQiniu(params);
})
}
function upLoadQiniu(params){//上传至七牛云
return new Promise(function(resolve){
var loading= layer.load(1, {//请求未成功时出现loading页 ,3代表一种效果
shade: [0.1,'#fff'] //0.1透明度的白色背景
});
// 上传回调
function next(res){
// console.log(res);
console.log("上传中");
}
function error(err){
console.log(err);
}
function complete(res){
var url="http://xxxxxx.cn/"+res.key;
layer.close(loading);//关闭loading效果
resolve(url);
}
var observable = qiniu.upload(params.file, params.key, params.token, params.putExtra, params.config);
var subscription = observable.subscribe(next, error, complete) // 这样传参形式也可以
// subscription.unsubscribe() // 上传取消
})
}

调用七牛云存储文件,返回url的更多相关文章

  1. 第一个go的web程序;调用七牛云存储的音频api问题解决;条件搜寻文件中的内容,字符串拼接+在上一行

    package main import ( "html/template" "io" "io/ioutil" "log" ...

  2. 使用qshell备份七牛云存储文件

    qshell是利用七牛文档上公开的API实现的一个方便开发者测试和使用七牛API服务的命令行工具.我们可以利用它来将七牛云上存储的文件备份到本地. 它提供Mac OSX, Linux, Windows ...

  3. Android客户端实现七牛云存储文件上传

    1.简单文件上传  上传模型如下. 1.1获得Token 不管是简单文件上传,还是分片上传.断点续传 都需要首先访问服务器,以获得上传凭证信息Token..用于测试时,可以用本地模拟Token信息(有 ...

  4. thinkphp5.1调用七牛云SDK上传文件

    thinkphp5.0 class Upload { public static function image(){ if(empty($_FILES['file']['tmp_name'])){ e ...

  5. flask 保存文件到 七牛云

    上篇文章队长讲述了如何把前端上传的文件保存到本地项目目录 本篇 讲述一下把前端上传的文件保存到 第三方存储(七牛云) 七牛云相关步骤思路: 首先 进去七牛云官网,注册并实名认证来获取一个七牛云账号和存 ...

  6. java(SSM)上传文件到七牛云(对象存储)

    项目中会用到大量的图片和小视频,为了分担服务器压力,将文件都放在七牛云.这里的思路很简单, 就是移动端.pc端把文件上传到服务器,服务器做一个临时缓存,保存必要的信息到数据库后, 将文件上传到七牛云, ...

  7. 在ThinkPHP框架(5.0.24)下引入Ueditor并实现向七牛云对象存储上传图片同时将图片信息保存到MySQL数据库,同时实现lazyload懒加载

    这是我花了很多天的时间才得以真正实现的一组需求. 文章后面有完整Demo的GitHub链接. 一. 需求描述 1. 应用是基于ThinkPHP5开发的: 2. 服务器环境是LNMP,PHP版本是7.2 ...

  8. 七牛云存储Python SDK使用教程 - 上传策略详解

    文 七牛云存储Python SDK使用教程 - 上传策略详解 七牛云存储 python-sdk 七牛云存储教程 jemygraw 2015年01月04日发布 推荐 1 推荐 收藏 2 收藏,2.7k  ...

  9. django之集成七牛云对象存储

    Python3 + Django2.0 集成 "七牛云" 对象存储 (SDK文档地址:http://developer.qiniu.com/kodo/api/3928/error- ...

随机推荐

  1. 1.CentOS 7 vs CentOS 6的不同

    CentOS 7 vs CentOS 6的不同(1)桌面系统[CentOS6] GNOME 2.x[CentOS7] GNOME 3.x(GNOME Shell)   (2)文件系统[CentOS6] ...

  2. 怎样理解xhr.overrideMimeType()和xhr.responseType

    一般情况下, 我们会通过 xhr.responseType 告诉服务器我们想要什么类型的返回数据. 然后xhr.response 会根据xhr.responseType属性值来自动解析返回值. 但有时 ...

  3. OkHttp3 + retrofit2 封装

    0.下载文件 1.gradle 添加 compile 'com.squareup.retrofit2:retrofit:2.1.0'compile 'com.squareup.retrofit2:co ...

  4. 一次解决黑帽SEO的经历

    最近有个朋友跟我说他的网站被黑了,百度快照里显示的是另一个网站,如: 于是查找了些资料,终于找到了问题所在,记录如下: 关于黑帽SEO1.暗链:其实“暗链”就是看不见的网站链接,“暗链”在网站中的链接 ...

  5. spark2.0的10个特性介绍

    1. Spark 2.0 ! 还记得我们的第七篇 Spark 博文里吗?里面我用三点来总结 spark dataframe 的好处: 当时是主要介绍 spark 里的 dataframe,今天是想总结 ...

  6. 对于div里面内容过大根据长度或者宽度进行适配,然后可以滚轮缩放的功能

    在做3000的项目中,因为页面的svg很大,但是做的只是适配电脑,打开肯定是看不全的,要看全就必须进行滚动,可是客户提出了将页面放在电视机上面,用电视输入网址直接访问,这样问题就来了,电视上怎么进行滚 ...

  7. 一 ArrayList 及其源码解析

    1.数组介绍 因为数组在存储数据时是按顺序存储的,存储的内存也是连续的,所以其特点是读取数据比较容易,插入删除比较困难 2.arraylist源码分析 1)构造方法(默认容量为10) 2)插入数据 扩 ...

  8. axios替换jquery的ajax

    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script> <scr ...

  9. Miniconda虚拟环境管理工具命令方法

    创建制定Python版本的虚拟环境 conda create --name 虚拟环境名称 Python=3.7.3(版本号) 进入指定虚拟环境 conda activate 虚拟环境名称 退出虚拟环境 ...

  10. Flutter——Row组件(水平布局组件)

    Row组件的常用属性 属性 说明 mainAxisAlignment 主轴的排序方式 crossAxisAlignment 次轴的排序方式 children 组件子元素 import 'package ...