weui uploader的用法

weui uploader的用法

执行顺序 先把uploader的html和js写了 在把js中的url改成后台存储照片的地址，(必须要注意fileVal的值)
在一个事件中调用uploader的click(这个事件根据需求加在所需位置)。在另一个函数中编写请求服务器的代码，在uploader js 的onSuccess事件中调用请求服务器的函数。

1.这上传一张图片的时候（只复制这个就行）
js 必须要再mounted函数中

mounted () {
    const self = this
    weui.uploader('#uploadera', {
      url: 'http://192.168.1.113:3000/cgi/post/uploadimg',
      auto: true,
      type: 'file',
     // 注意 fileVal
      fileVal: 'image',
      compress: {
        width: 1600,
        height: 1600,
        quality: 0.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
        }
      },
      onBeforeSend: function (data, headers) {
        const token = document.cookie.split('=')[1]
        headers['wec-access-token'] = token
      },
      onSuccess: function (ret) {
      //调用请求服务器的函数
        self.avatar(this)
        // console.log(this)
      }
    })
  }

2. 使用weui另一个组件actionSheet来调用uploader的click事件
   这个是调用后台服务器的代码

  async avatar (ret) {
      const res = await service.post('users/update', {
        userId: this.$store.state.currentUser._id,
        avatar: ret.url
      })
      const { code } = res.data
      if (code === 0) {
        const obj = {
          ...this.$store.state.currentUser,
          avatar: ret.url
        }
        this.$store.dispatch('setUser', obj)
      }
    }

流程：


效果图

self.$refs.uploader.click(）调用上面uploader的方法