@ggyteams/teams-uploader

Irene Awesome Greeter

使用

import UploadManager from 'teams-uploader/lib';
import { UploadProgress } from 'teams-uploader/lib/uploader/base';



const [uploader, setUploader] = useState<Base>()

const uploadManager = useMemo(() => {
  return new UploadManager({
      logLevel: "INFO",
      concurrentLimit: 5,
      dropZone: document.querySelector("body"),
      onToast: (type, msg) => {
        console.log(type, msg, "onToastonToast")
      },
      requestConfig: {
        createUploadSessionUrl: '/api/knowledge/personal/sessionId',
        deleteUploadSessionUrl: 'api/knowledge/personal/sessionId/',
        localUploadChunkUrl: 'api/knowledge/personal/sessionId/',
        // finishOneDriveUploadUrl: 'callback/onedrive/finish/',
        // cosUploadCallbackUrl: 'callback/cos/',
        // s3LikeUploadCallbackUrl: 'callback/s3/',
        finishOneDriveUploadUrl: `/api/callback/onedrive/finish/`,
        cosUploadCallbackUrl: `/api/callback/cos/`,
        s3LikeUploadCallbackUrl: `/api/callback/s3/`,
      }
  });
}, []);

const uploadChange = (e) => {
  const File = e.target.files;
  uploadManager
    .useFile(Array.from(File) as File[], 'uploads/aa', { public_root: "1",  })
    // 'uploads/aa', { public_root: "1",  } 上传的位置参数后端对接
    .then((origanial) => {
      console.log(origanial, "origanialoriganial")
      origanial.map((item) => {
        item.start()
      })
      setUploader(origanial[0])
      origanial[0].subscribe({
        onTransition: (newStatus) => {
          console.log(newStatus, "newStatusnewStatus")
        },
        onError: (err) => {
          console.log(err, "errerrerrerrerr")
        },
        onProgress: (data) => {
            console.log(data, "onProgressonProgressonProgress")
        },
        onMsg: (msg, color) => {
          console.log(msg, "colorcolor", color)
        },
        onResult: (data) => {
          console.log(data, "datadatadata")
          origanial[0].removeResumeCtx()
        }
    });
    })
}

return (
  <div>
    <Button onClick={() => {
      uploader.stop()
    }}>点击停止</Button>
    <Button onClick={() => {
      console.log('uploaderuploader', uploader.start, uploader.run)
      uploader.start()
    }}>点击继续</Button>
    <input
      type="file"
      style={{ border: '1px solid #ccc', padding: 10, width: '250px' }}
      onChange={uploadChange}
    />
    <p className={styles.fontColor}>请求了user/info接口</p>
  </div>
);