vue使用weui.js的Uploader怎么实现手动上传?

卓小生
  • 2
新手上路,请多包涵

根据weui.js文档示例;

var uploadCount = 0;
weui.uploader('#uploader', {
   url: 'http://localhost:8081',
   auto: true,
   type: 'file',
   fileVal: 'fileVal',
   compress: {
       width: 1600,
       height: 1600,
       quality: .8
   },
   onBeforeQueued: function(files) {
       // `this` 是轮询到的文件, `files` 是所有文件

       if(["image/jpg", "image/jpeg", "image/png", "image/gif"].indexOf(this.type) < 0){
           weui.alert('请上传图片');
           return false; // 阻止文件添加
       }
       if(this.size > 10 * 1024 * 1024){
           weui.alert('请上传不超过10M的图片');
           return false;
       }
       if (files.length > 5) { // 防止一下子选择过多文件
           weui.alert('最多只能上传5张图片,请重新选择');
           return false;
       }
       if (uploadCount + 1 > 5) {
           weui.alert('最多只能上传5张图片');
           return false;
       }

       ++uploadCount;

       // return true; // 阻止默认行为,不插入预览图的框架
   },
   onQueued: function(){
       console.log(this);

       // console.log(this.status); // 文件的状态:'ready', 'progress', 'success', 'fail'
       // console.log(this.base64); // 如果是base64上传,file.base64可以获得文件的base64

       // this.upload(); // 如果是手动上传,这里可以通过调用upload来实现;也可以用它来实现重传。
       // this.stop(); // 中断上传

       // return true; // 阻止默认行为,不显示预览图的图像
   },
   onBeforeSend: function(data, headers){
       console.log(this, data, headers);
       // $.extend(data, { test: 1 }); // 可以扩展此对象来控制上传参数
       // $.extend(headers, { Origin: 'http://127.0.0.1' }); // 可以扩展此对象来控制上传头部

       // return false; // 阻止文件上传
   },
   onProgress: function(procent){
       console.log(this, procent);
       // return true; // 阻止默认行为,不使用默认的进度显示
   },
   onSuccess: function (ret) {
       console.log(this, ret);
       // return true; // 阻止默认行为,不使用默认的成功态
   },
   onError: function(err){
       console.log(this, err);
       // return true; // 阻止默认行为,不使用默认的失败态
   }
});

并不能实现我想要的手动上传。
this.upload();可以实现手动上传;可是我没有弄明白。
请大佬指点!多谢!

回复
阅读 1.8k
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
你知道吗?

宣传栏