Skip to content

die-welle/tiny-qiniu

Repository files navigation

A tiny qiniu sdk for uploading file. (browser only)

Differences from qiniu.js

  • Smaller
  • No UI
  • Support upload base64 string

Requirements

  • Qiniu developer account
  • Promise polyfill for old version browser

Installing

Using npm:

$ npm install tiny-qiniu

Using yarn:

$ yarn add tiny-qiniu

Usage

TinyQiniu#constructor(options)

Exapmle

import TinyQiniu from 'tiny-qiniu';

const config = {
    bucket: 'my_bucket', // qiniu bucket name, requried

    /* one of `baseURL` or `mapResponse` is required */
    baseURL: 'http://cdn.awesome.com', // qiniu bucket domain, requried

    mapResponse: (data) => data, // a function to map final response data

    /* one of `uptoken`, `uptokenUrl`, `uptokenFunc` is required */

    // use a static uptoken string, it's NOT recommended
    uptoken: 'your_upload_token',

    // or use an url to dynamically get uptoken, should return json with `{ uptoken: 'uptoken_from_server' }`
    uptokenUrl: 'http://localhost/api/uptoken',

    // save zone
    // z0 - 华东 (by default), z1 - 华北, z2 - 华南, na0 - 北美
    zone: 'z2',

    // or use a function to dynamically return uptoken string
    uptokenFunc: () => {
        const fakeFetch = () => new Promise((resolve) => {
            setTimeout(() => resolve('my_uptoken'), 1000)
        });

        return fakeFetch('/fake/api'); // return a promise
    },

    mapUptoken: (data) => data.uptoken || data, // Optional, a function to map uptoken when fetch uptoken completed

    mapResponseURL: (url, hash, key, data) => url, // Optional, a function to map final url
};
const tinyQiniu = new TinyQiniu(config);

TinyQiniu#uploadFile(file[, options])

Upload with a file object. You can also provide a remote file name by adding options.key as the second argument. Returns a promise.

options (Object)
  • key (String): Remote file name
  • onProgress (Function): The function called periodically with information when an upload request before success completely.

Example

var file = document.querySelector('#fileInput').files[0];
tinyQiniu.uploadFile(file, { key: 'my_file_name' }).then((resp) => console.log(resp.url));

TinyQiniu#uploadBase64(base64String[, options])

Upload with a base64 string. You can also provide a remote file name by adding options.base64key as the second argument. Returns a promise.

NOTE base64key should provide a base64 string. You can use btoa() or some other library to generate it.

Exapmle

const base64Key = btoa('my_file_name');
tinyQiniu.uploadBase64(base64String, { base64key }).then((resp) => console.log(resp.url));

Available Zones

  • z0: upload.qiniup.com (default)
  • z1: upload-z1.qiniup.com
  • z2: upload-z2.qiniup.com
  • na0: upload-na0.qiniup.com

Please checkout https://developer.qiniu.com/kodo/manual/1671/region-endpoint for detail

Notes

  • It is recommended to setup a server to get uptoken for security. To setup a uptoken server, please checkout /test/server
  • If you are looking for a react component, tiny-qiniu-request is a good helper

Contributing

Please checkout the contributing page

ChangeLog

Please checkout the Releases page

License

MIT