当前位置: 首页 > 工具软件 > qiniu-js > 使用案例 >

qiniu-js 上传七牛云服务

司空俊悟
2023-12-01

引入
支持以下几种安装方式

直接使用静态文件地址:

https://cdnjs.cloudflare.com/ajax/libs/qiniu-js//qiniu.min.js
通过sctipt标签引入该文件,会在全局生成名为 qiniu 的对象

使用 NPM 安装

NPM 的全称是 Node Package Manager,是一个 NodeJS 包管理和分发工具,已经成为了非官方的发布 Node 模块(包)的标准。如果需要更详细的关于 NPM 的使用说明,您可以访问 NPM 官方网站,或对应的中文网站

npm install qiniu-js
const qiniu = require('qiniu-js')
// or
import * as qiniu from 'qiniu-js'

通过源码编译
git clone git@github.com:qiniu/js-sdk.git,进入项目根目录执行 npm install ,执行 npm run build,即可在dist 目录生成 qiniu.min.js。

    let config = {
      useCdnDomain: true,         // 表示是否使用 cdn 加速域名,为布尔值,true 表示使用,默认为 false。
      region: qiniu.region.z2     // 上传域名区域(z1为华北),当为 null 或 undefined 时,自动分析上传域名区域
    };

    let putExtra = {
      fname: "",          // 文件原文件名
      params: {},         // 放置自定义变量: 'x:name': 'sex'
      mimeType: null      // 限制上传文件类型,为 null 时表示不对文件类型限制;限制类型放到数组里: ["image/png", "image/jpeg", "image/gif"]
    };
    /* 
		bucket: 上传的目标空间
	
		file: File 对象,上传的文件
		
		key: 文件资源名
		
		token: 上传验证信息,前端通过接口请求后端获得
		
		config: object,其中的每一项都为可选
	*/
	
	// qiniu.upload(file: File, key: string, token: string, putExtra?: object, config?: object): observable

const observable = qiniu.upload(file, key, token, putExtra, config)
const subscription = observable.subscribe({
	next: (result) => {
        // 接收上传进度信息,result是带有total字段的 Object
        // loaded: 已上传大小; size: 上传总信息; percent: 当前上传进度
        console.log(result);    // 形如:{total: {loaded: 1671168, size: 2249260, percent: 74.29856930723882}}
        // this.percent = result.total.percent.toFixed(0);
      },
      error: (errResult) => {
        // 上传错误后失败报错
        console.log(errResult)
        this.message.error('上传失败');
      },
      complete: (result) => {
        // 接收成功后返回的信息
        console.log(result);   // 形如:{hash: "Fp5_DtYW4gHiPEBiXIjVsZ1TtmPc", key: "%TStC006TEyVY5lLIBt7Eg.jpg"}
        if (result.key) {
          this.message.success('上传成功');
        }
      }
}) // 上传开始

// or
const subscription = observable.subscribe(next, error, complete) // 这样传参形式也可以
subscription.unsubscribe() // 上传取消
 类似资料: