需求：

• 与el-upload差不都的功能（主要：手动上传，展示进度条）
• 将图片上传到qiniu云平台
• 请记住我不太会用ts

七牛云上传

//封装的方法
import axios from "axios";
import * as qiniu from "qiniu-js";
// 七牛云上传
export function qnUpload(file: File) {
  return new Promise((resolve, reject) => {
    axios({
      method: "get",
      //后台写的获取qiniu云的控件token接口
      url: "http://***，***，***，**:900/api/uptoken",
    }).then((res) => {
      const token: string = res.data!.uptoken;
      const domain = res.data!.domain;
      let key = `vitePic/${new Date().getTime()}${file.name}`;
      const putExtra = {
        fname: file.name,
      };
      const config = {
        useCdnDomain: true,
        disableStatisticsReport: true,
      };
      // qiniu文档中有的，需要配置的
      //https://developer.qiniu.com/kodo/1283/javascript
      const observable = qiniu.upload(file, key, token, putExtra, config);
      const subscription = observable.subscribe({
        next() { },
        error(err) {
          reject(err);
        },
        complete(date) {
          resolve(domain + date!.key);
        },
      });
    });
  });
}

el-upload使用http-request：文件上传自定义方法，auto-upload：是否开启手动上传关键字

import { defineComponent, ref, reactive } from "vue";
// 路径！！！！
import { qnUpload } from "../../utils/----";
export default defineComponent({
  setup(props, content) {
    const uploader = ref();
    // 自定义七牛云上传
    const qnRequest = (options) => {
      console.log(options);
      let file: File = options.file;
      qnUpload(file, options.onProgress).then((res) => {
        console.log(res);
      });
    };
    // 按钮出发手动上传
    const submitUpload = () => {
      uploader.value!.submit();
    };
    return {
      uploader,
      qnRequest,
      submitUpload,
    };
  },
});

正常功能实现

主要记录怎么实现进度条

这个是不使用http-request会出现的功能。我们也可以知道http-request不会触发on-success关键字绑定的函数。那我们翻阅elment文档看到，有一个on-progress的关键字。这个好像与进度条有关系。测试一下，好像也没触发。严格考虑，应该用原生的action参数配置的看一下是否触发on-progress的关键字绑定的函数。结果：不触发。

百度查询一下

• 在qnRequest打印参数
• 
• 在qnRequest触发options.onSuccess()
• 我们的on-success方法触发了
• 网上查找的进度条大多数都是axios.onUploadProgress监听的，我们使用的是qiniu。所以不同。
• 但这样让我们知道了options.onProgress()是改变进图条的方法
• 查看qiniu云文档，找到与axios.onUploadProgress功能差不多的。

贴代码

import axios from "axios";
import * as qiniu from "qiniu-js";
// 七牛云上传
export function qnUpload(file: File, onProgress?) {
  return new Promise((resolve, reject) => {
    axios({
      method: "get",
      url: "http://---.--.--.---/api/uptoken",
    }).then((res) => {
      const token: string = res.data!.uptoken;
      const domain = res.data!.domain;
      let key = `vitePic/${new Date().getTime()}${file.name}`;
      const putExtra = {
        fname: file.name,
      };
      const config = {
        useCdnDomain: true,
        disableStatisticsReport: true,
      };
      const observable = qiniu.upload(file, key, token, putExtra, config);
      const subscription = observable.subscribe({
        next(fileInfo) {
          if (onProgress) {
            file["percent"] = Number(fileInfo.total.percent.toFixed(2));
            onProgress(file);
          }
        },
        error(err) {
          reject(err);
        },
        complete(date) {
          resolve(domain + date!.key);
        },
      });
    });
  });
}

import { defineComponent, ref, reactive } from "vue";
import { qnUpload } from "../../";
export default defineComponent({
  setup(props, content) {
    const uploader = ref();

    // 自定义七牛云上传
    const qnRequest = (options) => {
      console.log(options);
      let file: File = options.file;
      qnUpload(file, options.onProgress).then((res) => {
        console.log(res);
        return options.onSuccess(res);
      });
    };
    const fileSuccess = () => {
      console.log("触发成功！");
    };


    const submitUpload = () => {
      uploader.value!.submit();
    };

    const onProgress = (a, b, c) => {
      console.log(a, b, c);
    };
    return {
      uploader,
      qnRequest,
      submitUpload,
      fileSuccess,
      onProgress,
    };
  },
});

vue3.0不熟悉，ts不熟悉，为了自己看纪律