思路:使用input
标签的type="file"
和accept='video/mp4, image/*'
属性。详见🔗
<input
id='file'
type='file'
accept='video/mp4, image/*'
style={{ display: 'none' }} // 隐藏标签,因为样式太丑,不信可以打开自己看看
onChange={(e) => {
const currFile = e.target.files[0]; // 选中图片或视频返回的文件File。
// ... 将文件上传到oss服务器
}}
/>
// js 语法执行click事件,执行选择和上传
const onCamera = () => {
const filedom = document.getElementById('file');
filedom.click();
};
<Button onClick={() => onCamera()}>上传图片</Button>
注意⚠️:返回的File
对象是特殊类型的Blob
。可以用URL.createObjectURL()
处理。详见🔗