七牛sdk 上传视频 - 前端_前端sdk视频接入-优快云博客

本文链接：https://blog.youkuaiyun.com/design_Lu/article/details/122581801

本文介绍了前端使用七牛JavaScript SDK上传视频的详细步骤，包括如何渲染上传标签、进行文件校验、图片转Base64预览、执行七牛上传及处理token，以及删除和预览操作。文章强调了异步校验和上传回调的重要性，并鼓励读者讨论和打赏。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

七牛地址

前端接入地址：JavaScript SDK
具体的引用方式看情况而定

干货来了

首先我们渲染上传标签

<input
   ref={
   input => (this.fileSelectorInput = input)}
   type="file"
   className={
   styles["input"]}
   accept="video/*, image/*, mtvideo/9, mtimage/9"
   onChange={
   this.onFileChange}
 />

上传的时候，我们可以通过 this.fileSelectorInput 拿到当前上传视频（图片）的数组，进行前置校验，是否符合尺寸，大小标准。

onFileChange = async e => {
   
    let fileSelectorEl = this.fileSelectorInput;
    let {
    mediaSize } = this.props;
    const {
    isVideo } = this.state;
    if (fileSelectorEl && fileSelectorEl.files && fileSelectorEl.files.length) {
   
      // 保存所有的复合校验逻辑的文件
      const allFiles = [];
      if (!mediaSize) {
   
        mediaSize = isVideo ? 50 : 5;
      }

      for (let index = 0; index < fileSelectorEl.files.length; index++) {
   
        const file = fileSelectorEl.files[index];

        const isLt = file.size / 1024 / 1024 <= mediaSize;
        if (!isLt) {
   
          message.error(`上传文件大小不得超过${
     mediaSize}M`);
          return false;
        }

        if (!isVideo) {
   
          try {
   
            // 校验尺寸
            await this.handleBeforeUploadSize(file);
            allFiles.push(file);
          } catch (_err) {
   
            message.error("上传图片尺寸不合适");
          }
        } else {
   
          allFiles.push(file);
        }
      }
      if (!allFiles.length) return;
      const newFiles = this.parseFile(allFiles[0], 0);

      Promise.all(