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"
        />
    )
}