vue 使用weui和weuijs上传图片

上传组件

<template>
  <div class="weui-cells weui-cells_form" id="uploader">
      <div class="weui-cell">
          <div class="weui-cell__bd">
              <div class="weui-uploader">
                  <div class="weui-uploader__hd">
                      <p class="weui-uploader__title">图片上传</p>
                      <div class="weui-uploader__info"><span id="uploadCount">{{uploadCount}}</span></div>
                  </div>
                  <div class="weui-uploader__bd">
                      <ul class="weui-uploader__files" id="uploaderFiles"></ul>
                      <div class="weui-uploader__input-box">
                          <input id="uploaderInput" class="weui-uploader__input" type="file" accept="image/*,video/*" capture="camera" multiple="" />
                      </div>
                  </div>
              </div>
          </div>
      </div>
    </div>
</template>

<script>
export default {
  name: 'Uploader',
  data () {
    return {
      attachments: [],
      uploadCount: 0
    }
  },
  mounted () {
    this.uploadFile()
  },
  methods: {
    uploadFile() {
      var _self = this
      _self.$weui.uploader('#uploader', {
        url: this.$global.domain + '/upload',
        auto: true,
        type: 'file',
        fileVal: 'file',
        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){
                _self.$weui.alert('请上传图片');
                return false; // 阻止文件添加
            }
            if(this.size > 10 * 1024 * 1024){
                _self.$weui.alert('请上传不超过10M的图片');
                return false;
            }
            if (files.length > 9) { // 防止一下子选择过多文件
                _self.$weui.alert('最多只能上传9张图片，请重新选择');
                return false;
            }
            if (_self.uploadCount + 1 > 9) {
                _self.$weui.alert('最多只能上传9张图片');
                return false;
            }
            _self.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);
            if (ret.code == 1) {
              _self.attachments.push(ret.data.attachment_id)
            }
            // return true; // 阻止默认行为，不使用默认的成功态
        },
        onError: function(err){
            //console.log(this, err);
            // return true; // 阻止默认行为，不使用默认的失败态
        }
      });
    }
  }
}
</script>

 

使用

import Uploader from '../uploader/Uploader'

components: {
      Uploader
  },

 <Uploader ref="upload"></Uploader>

取值

images: this.$refs.upload.attachments,