@forchange/qiniu
前端七牛上传基础服务
Last updated 8 months ago by chenle .
MIT · Original npm · Tarball · package.json
$ cnpm install @forchange/qiniu 
SYNC missed versions from official npm registry.

qiniu

基于 qiniu-js 封装的接口管理方案,@forchange/qiniu

Installing

$ npm install @forchange/qiniu

Syntax

initQiNiu函数会返回一个upload上传函数

import initQiNiu from "@forchange/qiniu"

const upload=initQiNiu(config)

Parameters

config

config是qiniu的基本配置,同qiniu-js的配置基本一致

  1. domain 为七牛空间(bucket)对应的域名,选择某个空间后,可通过"空间设置->基本设置->域名设置"查看获取

  2. token 前端通过后端接口请求以获得七牛的token信息

  3. region:

    • z0 代表华东区域
    • z1: 代表华北区域
    • z2: 代表华南区域
    • na0:代表北美区域
    • as0:代表东南亚区域
  4. mimeType:null || array,用来限定上传文件类型,不传时自动判断文件类型,关于mime类型,可参考常见MIME类型列表

 const config = {
  domain: "https://base.qiniu",
  token: "your QiNiuToken",
  region: "z0",
  mimeType: ["image/png"]
}

upload

upload是initQiNiu函数的返回结果,是个上传函数,他接收两个参数filenext,返回参数是个Promise对象

 upload(file,next)

file 必选

file是FormData对象

next 可选参数

next回调函数,是上传过程的监听函数,会接收到一个progress参数

 upload(file,(progress)=>{
   console.log(progress)
 })

Usage


const config = {
  domain: "https://xxx.xx",
  token: "",
  region: "z0"
}
class UploadFile extends React.Component {
  state = {
    fileList: []
  };
  handleBeforeUpload = async () => {
    const res = await axios.get('https://xxx.xx')
    config.token = res.data.token
    this.upload = initQiNiu(config)
  }
  upLoadFile = (e) => {
    this.setState({ isLoading: true })
    this.upload(e.file).then((res) => {
      const file = {
        uid: e.file.uid,
        name: e.file.name,
        url: res
      }
      this.setState({ fileList: [...this.state.fileList, file]})
    })
  }
  render() {
    const {  fileList } = this.state;
    return (
      <div>
          <Upload
            listType="picture-card"
            fileList={fileList}
            customRequest={this.upLoadFile}
            beforeUpload={this.handleBeforeUpload}
            multiple={true}
          >
          </Upload>
      </div>
    );
  }
}

Current Tags

  • 0.1.1                                ...           latest (8 months ago)

2 Versions

  • 0.1.1                                ...           8 months ago
  • 0.1.0                                ...           8 months ago
Maintainers (2)
Downloads
Today 0
This Week 5
This Month 5
Last Day 2
Last Week 2
Last Month 53
Dependencies (1)
Dev Dependencies (0)
None
Dependents (0)
None

Copyright 2014 - 2016 © taobao.org |