ant-design-mobile
ant-design-mobile copied to clipboard
ant-design
希望ImageUploader 图片上传可以上传视频
最近用antd mobile开发一个小项目，用到了ImageUploader 组件，上传图片很完美，但是项目需要上传视频的支持，所以对ImageUploader 修改了accept的 测试可以上传视频。但是显示错误，也不能点击预览。查看ImageUploader 组件源码后，新增了video类，然后改了一些地方，技术很菜，初次接触react，没弄好。 最终临时先把images里的onError判断 剔除了 type错误。
现在手机上上传视频的需求感觉挺多的，希望官方能把这个组件支持上传视频，如果能上传文档资料就更好了。
视频是可以支持的，但是对于 文档资料上传 场景很少吧，首先上传吊起的时候是拉起相册和文件浏览目录，现在的手机很难从文件浏览目录里找到你需要上传的文件吧，另外一个问题就是文件预览是个不太好处理的问题。
视频是可以支持的，但是对于 文档资料上传 场景很少吧，首先上传吊起的时候是拉起相册和文件浏览目录，现在的手机很难从文件浏览目录里找到你需要上传的文件吧，另外一个问题就是文件预览是个不太好处理的问题。
视频上传有组件支持吗，没看到有呀。
可以直接在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)
})
}
}
})
}
