希望ImageUploader 图片上传可以上传视频

[kthinking]

最近用antd mobile开发一个小项目，用到了ImageUploader 组件，上传图片很完美，但是项目需要上传视频的支持，所以对ImageUploader 修改了accept的 测试可以上传视频。但是显示错误，也不能点击预览。查看ImageUploader 组件源码后，新增了video类，然后改了一些地方，技术很菜，初次接触react，没弄好。
最终临时先把images里的onError判断 剔除了 type错误。

现在手机上上传视频的需求感觉挺多的，希望官方能把这个组件支持上传视频，如果能上传文档资料就更好了。

[crazylxr]

视频是可以支持的，但是对于 文档资料上传 场景很少吧，首先上传吊起的时候是拉起相册和文件浏览目录，现在的手机很难从文件浏览目录里找到你需要上传的文件吧，另外一个问题就是文件预览是个不太好处理的问题。

[oqq5518]

视频是可以支持的，但是对于 文档资料上传 场景很少吧，首先上传吊起的时候是拉起相册和文件浏览目录，现在的手机很难从文件浏览目录里找到你需要上传的文件吧，另外一个问题就是文件预览是个不太好处理的问题。

视频上传有组件支持吗，没看到有呀。

[NARUTOyuyang]

@awmleer @crazylxr 能支持 pdf 上传么

[awmleer]

@awmleer @crazylxr 能支持 pdf 上传么

@NARUTOyuyang 目前还不支持的

[NARUTOyuyang]

@awmleer 可以新增 accept pdf ，但是没法预览

[awmleer]

@NARUTOyuyang 可以看下这个 issue 哈：#4486

[Mr-Nobody-li]

@NARUTOyuyang 可以看下这个 issue 哈：#4486

现在还没有视频上传吗？

[LonelySnowman]

可以直接在accept使用 image/*,video/*，然后在upload函数中判断type去调用不同的上传后端接口，最后截取视频的第一帧转成图片resolve出去就可以，但是想要直接在框里面预览视频的话就需要自己去封装了。下面是我使用的代码，希望对你有帮助。

  /**
   * @description 上传图片
   * @param file
   */
  const uploadFile = (file: File) => {
    return new Promise<ImageUploadItem>((resolve, reject)=>{
      // 如果是 video 截取第一帧预览
      if (file.type.includes("video")) {
        // ...
        // 此处进行上传视频的处理，上传完成后再执行以下内容
        const canvas = document.createElement('canvas');
        const videoUrl = URL.createObjectURL(file);
        const videoElement = document.createElement('video');
        videoElement.src = videoUrl;
        videoElement.autoplay = true;
        videoElement.addEventListener("loadeddata", function (_event) {
          const canvas = document.createElement('canvas');
          canvas.width = videoElement.videoWidth;
          canvas.height = videoElement.videoHeight;
          canvas.getContext("2d")?.drawImage(videoElement, 0, 0, canvas.width, canvas.height)
          resolve(
            {
              url: canvas.toDataURL("image/png")
            }
          )
        })
      } else if (file.type.includes("image")) {
        // ...
        // 此处进行上传图片的处理，上传完成后再执行以下内容
        const reader = new FileReader();
        reader.readAsDataURL(file)
        reader.onload = function (event) {
          resolve({
            url: String(event.target?.result)
          })
        }
      }
    })
  }

[guoyunhe]

不支持预览的类型，比如 PDF，是否可以支持下载按钮？类似这种：

[selye]

现在支持视频预览了吗？可以上传视频，也可以截取视频第一帧做缩略图，但是没有办法预览视频文件