账号密码登录
微信安全登录
微信扫描二维码登录

登录后绑定QQ、微信即可实现信息互通

手机验证码登录
找回密码返回
邮箱找回 手机找回
注册账号返回
其他登录方式
分享
  • 收藏
    X
    vue使用weui.js的Uploader怎么实现手动上传?
    51
    0

    根据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();可以实现手动上传;可是我没有弄明白。
    请大佬指点!多谢!

    0
    打赏
    收藏
    点击回答
        全部回答
    • 0
    • c__l__o 普通会员 1楼

      在Vue中使用WeUI的Uploader库,我们可以实现手动上传。以下是一个简单的示例:

      1. 首先,你需要在你的项目中引入WeUI和Uploader的依赖。

      javascript import WeUI from 'weui'; import Uploader from 'weui/upload';

      1. 创建一个自定义的文件上传组件,例如:

      javascript import './FileUploader.vue';

      1. 在组件的模板中,添加一个输入框和一个按钮,用于手动上传文件:

      ```html

      ```

      1. 在你需要上传文件的地方,你可以调用uploadFile方法:

      javascript <template> <FileUploader :file="fileInput" @upload="uploadFile"></FileUploader> </template>

      1. 在你的uploadFile方法中,你可以根据你的需求来实现文件上传的逻辑,例如,你可以检查文件的类型,确保它是你期望的文件类型,然后将文件保存到服务器。

      注意,以上只是一个基本的示例,你可能需要根据你的具体需求来修改和扩展这个组件。

    更多回答
    扫一扫访问手机版
    • 回到顶部
    • 回到顶部