H5上传视频和图片

91 阅读1分钟

思路:使用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()处理。详见🔗