react ts 使用七牛 传输图片

import * as qiniu from "qiniu-js";

export default function demo() {
    function updateImg(e) {
        const file = e.target.files[0];

        const token = '后端返回的Token'
        const key = 'Img需要传的路径和图片名称' // 例如 icons/close.png icons文件夹中添加close.png图片
        const options = {
            quality: 0.92,
            noCompressIfLarger: true
        }
        const putExtra = {};

        qiniu.compressImage(file, options).then((data: any) => {
            const observable = qiniu.upload(
                data.dist,
                key,
                token,
                putExtra, // 非必填
                {upprotocol: "http",} // 非必填
            );
            // 定义observer对象
          const observer = {
            next: (result: any) => {
              // 当上传进度更新时调用
              console.log("Upload progress:", result.total.percent);
              console.log("其他信息", result);
            },
            error: (error: any) => {
              // 当上传出错时调用
              console.error("Upload error:", error);
            },
            complete: (result: any) => {
              // 当上传完成时调用
              console.log("Upload complete:", result);
              // 结束上传
              subscription.unsubscribe();
            },
          };
          const subscription = observable.subscribe(observer); // 上传开始
        })
    }

    return (
    <input
        type="file"
        accept="image/*"
        onChange={updateImg}
        className="w-0"
        />
    )
}