How to use qiniu-js - 10 common examples

base64Reader.onload = (e) => {
      const urlData = e.target.result;
      const base64 = urlData.split(",").pop();
      const fileType = urlData
        .split(";")
        .shift()
        .split(":")
        .pop();

      // base64转blob
      const blob = toBlob(base64, fileType);

      const conf = {
        useCdnDomain: true,
        region: qiniu.region[config.region], // 区域
      };

      const putExtra = {
        fname: "",
        params: {},
        mimeType: [] || null,
      };

      const OSSName = getOSSName(file.name, namespace);

      // 这里第一个参数的形式是blob
      const imageObservable = qiniu.upload(blob, OSSName, token, putExtra, conf);

      // 上传成功后回调
      const complete = (response) => {
        // console.log(response);

const doUpload = upFile => {

      this.notificationsService.info('开始上传', '文件开始上传', { timeOut: 850 });

      const keyName = `nodepress/image/${upFile.name.replace(/ /ig, '')}`;
      const putExtra = {
        params: {},
        fname: upFile.name,
        mimeType: ['image/png', 'image/jpeg', 'image/jpg', 'image/gif']
      };

      const upOptions = { useCdnDomain: true };

      // 开始上传
      const observable = qiniu.upload(upFile, keyName, this.upToken, putExtra, upOptions);

      this.uploadInProgress = true;

      // 监听上传流
      const subscription = observable.subscribe({
        next: res => {
          console.warn('上传有一个新进度', res);
          this.uploadInProgress = true;
          if (res.total && res.total.percent) {
            this.uploadProgress = (res.total.percent || '').toString().slice(0, 5);
          }
        },
        error: err => {
          console.warn('上传失败', err);
          this.uploadInProgress = false;
          this.notificationsService.error('上传失败', err.message, { timeOut: 850 });

error(err) {
      // console.log('qiniu observer err', err);
      return err;
    },
    complete(res) {
      // console.log('qiniu observer complete', res);
      const fileUrl = `https://cdn.aermin.top/${res.key}`;
      completeEvent(fileUrl);
    }
  };

  const config = { useCdnDomain: true };
  const putExtra = {};
  const { user_id } = JSON.parse(localStorage.getItem('userInfo'));
  const key = `${user_id}_${new Date().getTime()}_${file.name}`;
  const observable = qiniu.upload(file, key, uploadToken, putExtra, config);
  const subscription = observable.subscribe(observer); // 上传开始
}

let files = this.refs.upload.files;
    console.log(files);
    // 是否是一张照片？
    // 七牛 
    if (!this.imageVerify()) return;
    let putExtra = {
      fname: '',
      params: {},
      mimeType: ['image/png','image/jpeg','image/gif']
    };
    let config = {
      region: qiniu.region.z0
    };

    let key = new Date().getTime() + files[0].name;
    let observable = qiniu.upload(files[0], key, token, putExtra, config)
    let observer = {
      compelete: (res) => {
        let imgUrl = baseUrl + '/' + res.key;
        console.log(imgUrl);
        this.props.successCb(imgUrl);
      },
      error: (err) => {
        notification.error({
          message: err
        })
      }
    }
    let subscrtion = observable.subscribe(observer);
  }

uploadFn = async () => {
    let response = await API.getToken();
    let { baseUrl, token } = response.data;
    let files = this.refs.upload.files;
    console.log(files);
    // 是否是一张照片？
    // 七牛 
    if (!this.imageVerify()) return;
    let putExtra = {
      fname: '',
      params: {},
      mimeType: ['image/png','image/jpeg','image/gif']
    };
    let config = {
      region: qiniu.region.z0
    };

    let key = new Date().getTime() + files[0].name;
    let observable = qiniu.upload(files[0], key, token, putExtra, config)
    let observer = {
      compelete: (res) => {
        let imgUrl = baseUrl + '/' + res.key;
        console.log(imgUrl);
        this.props.successCb(imgUrl);
      },
      error: (err) => {
        notification.error({
          message: err
        })
      }
    }

uploadFile = file;
    }


    const newFileName = `image/${imageTwo ? imageTwo : 'common'}/${font}_${lastModified}_${size}_${+new Date()}${back}`;
    const config = {
      useCdnDomain: true,
      region: null
    };
    const putExtra = {
      fname: '',
      params: {},
      mimeType: [] || null
    };
    // return ;
    const observable = qiniu.upload(uploadFile, newFileName, qiniuToken, putExtra, config);
    const subscription = observable.subscribe(observer); // 上传开始
    let qiniu_upload_link = bucket_domin[bucket] + newFileName;
    this.setState({
      markdownUploadLink: [...markdownUploadLink, qiniu_upload_link]
    });
    return true;
  }

// fileUploadQiniu(fileData);
      // debugger;
      // 使用 axios 进行文件上传的请求
      // axios.put(action, fileData, {
      //   withCredentials,
      //   headers,
      //   onUploadProgress: ({ total, loaded }) => {
      //     // 进行上传进度输出，更加直观
      //     onProgress({ percent: Math.round(loaded / total * 100).toFixed(2) }, file);
      //   },
      // }).then(response => {
      //   onSuccess(response, file);
      // })
      //   .catch(onError);
      let key = uuid.v4(); // TODO 芋艿，可能后面要优化。MD5？
      let observable = qiniu.upload(file, key, this.state.token); // TODO 芋艿，最后后面去掉 qiniu 的库依赖，直接 http 请求，这样更轻量
      observable.subscribe(function () {
        // next
      }, function () {
        // error
        // TODO 芋艿，后续补充
        debugger;
      }, function (response) {
        debugger;
        // complete
        // debugger;
        response.url = 'http://static.shop.iocoder.cn/' + response.key; // 需要设置，用于后续 onSuccess ，合并到 file 中，从而设置到 fileList
        onSuccess(response, file);
      });
    };
    return {

if (!this.imageVerify) return


        var putExtra = {
            fname: "",
            params: {},
            mimeType: ["image/png", "image/jpeg", "image/gif"]
        };

        var config = {
            region: qiniu.region.z0
        };
        
        // 文件名
        let key = new Date().getTime() + files[0].name;
        var observable = qiniu.upload(files[0], key, token, putExtra, config)

        var observer = {
            next: (res) => {
              // ...
            },
            error: (err) => {
                notification.error({
                    message: err
                })
            }, 
            complete: (res) => {
                let imgUrl = baseUrl + '/' + res.key
                this.props.successCb(imgUrl)
            }
        }

let response = await API.getToken()
        let {baseUrl, token} = response.data
        let files = this.refs.upload.files

        // 校验图片
        if (!this.imageVerify) return


        var putExtra = {
            fname: "",
            params: {},
            mimeType: ["image/png", "image/jpeg", "image/gif"]
        };

        var config = {
            region: qiniu.region.z0
        };
        
        // 文件名
        let key = new Date().getTime() + files[0].name;
        var observable = qiniu.upload(files[0], key, token, putExtra, config)

        var observer = {
            next: (res) => {
              // ...
            },
            error: (err) => {
                notification.error({
                    message: err
                })
            }, 
            complete: (res) => {

uplaodAction2 (res, file, key) {
      const _this = this
      const observable = qiniu.upload(file, key, this.token, {
        fname: key,
        mimeType: []
      }, {
        useCdnDomain: true,
        region: qiniu.region.z2
      })
      observable.subscribe({
        next (res) {
          _this.$set(_this.fileList[_this.fileList.findIndex(item => item.key === key)], 'percent', parseInt(res.total.percent))
          
        },
        error (err) {
          _this.$set(_this.fileList, _this.fileList.findIndex(item => item.key === key), {
            ..._this.fileList[_this.fileList.findIndex(item => item.key === key)],
            status: 'error'
          })