@forchange/qiniu
    TypeScript icon, indicating that this package has built-in type declarations

    0.1.1 • Public • Published

    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>
        );
      }
    }
     

    Install

    npm i @forchange/qiniu

    DownloadsWeekly Downloads

    2

    Version

    0.1.1

    License

    MIT

    Unpacked Size

    87.3 kB

    Total Files

    28

    Last publish

    Collaborators

    • avatar
    • avatar