<FormItem style={{marginBottom: 0}} fullWidth>
{snapPic ? <div className={styles.cardUpload} name="headVideo"
onMouseMove={() => setShowEdit(true)}
onMouseLeave={() => setShowEdit(false)}
>
<img src={snapPic} alt="" className={styles.imgUpload}/>
<div className={styles.editUpload}>
<Icon type="upload" size="small" id='pickfiles' className={styles.uploadIcon} />
<Icon type="ashbin" size="small" className={styles.deleteIcon} />
<Icon type="upload" size="small" className={styles.uploadImgIcon} />
</div>
</div> : <div className={styles.headVideo} id='browse'>
<div className={styles.triggerBtn}>
<Icon type="add" size="xl" style={{ color: '#999' }} />
<div className={styles.triggerText}>上传首视频</div>
</div>
</div>}
</FormItem>
上传方法
useEffect(() => {
initVideoUpload();
}, [])
// 配置上传组件
const initVideoUpload = () => {
let tempState = {};
let uploader = new MediaUploader({
browse_button: ['pickfiles','browse'],
filters: {
mime_types: [
{ title: "Video files", extensions: "wmv,avi,mpg,mpeg,3gp,mov,mp4,flv,f4v,m4v,m2t,mts,rmvb,vob,mkv" }
],
max_file_size: '2gb' //termType == 'mobile' ? '30mb' : '2gb'
},
chunk_size: '2gb',
tbToken: getCookie('_tb_token_'),
snaps: 1, //0表示不获取
snap_url: `//ugc.taobao.com/ajax/getSnapshot.do`, // 获取视频快照
auth_url: '//pre-sell.fliggy.com/cruise/video/GetVideoToken.htm', // 获取token(业务方自己实现)
autostart: false,
multi_selection: false,
});
// 添加文件
uploader.bind('FilesAdded', function(up, files) {
setLoading(true);
uploader.start();
});
// 单个文件上传成功后触发
uploader.bind('FileComplete', function(up, file, info) {
setLoading(false);
tempState = {url: info.fileId, name: file.name};
});
// 单个文件上传成功并获取截图后触发
uploader.bind('GetSnapShots', function(up, file, info) {
setSnapPic(info[0])
changeValue([{...tempState, snapshot:info[0]}], 'headVideo')
setButtonId(() => uuid()); // 更新buttonId
});
// 上传错误时触发
uploader.bind('Error', function(up, err) {
console.log(err,'err')
});
}
我想只点击按钮的时候才上传,否则不上传,为什么点击图片也会触发上传的动作?
与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…