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函数的返回结果，是个上传函数,他接收两个参数file和next,返回参数是个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>
    );
  }
}