Welcome to MLink Developer Q&A Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
1.3k views
in Technique[技术] by (71.8m points)

plupload多个按钮上传的问题

        <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')
    });
  } 

image.png
我想只点击按钮的时候才上传,否则不上传,为什么点击图片也会触发上传的动作?


与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Answer

0 votes
by (71.8m points)
等待大神解答

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome to MLink Developer Q&A Community for programmer and developer-Open, Learning and Share
...