vue中使用vant上传组件，上传到七牛

vue中使用七牛上传

首先要获取七牛的toke，我这里使用了vant的上传组件，在上传完成后调用七牛的上传，替换vant原来本地图片的地址；

      let that = this
      let file = files.file // 本地上传的文件
      let key =
        that.directory + new GUID().newGUID() + '.' + file.type.split('/')[1] // 设置图片的名字，生产随机uid，避免重复调用名字重复
      files.content = '' //图片的展示的地址
      files.status = 'uploading'
      files.message = '0%'
      files.id = index //存一个唯一的id，以便于排序，解决上传顺序错误
      let config = {
        useCdnDomain: true,//cdn加速
        retryCount: 5 // 上传错误重新上传次数
      }
      let putExtra = {
        fname: files,
        params: {},
        mimeType: ['image/png', 'image/jpeg', 'image/gif', 'video/mp4'] //可以上传的type
      }
      let observer = {
        next(res) {
        	// res.total.percent 上传进度
        	files.message = parseInt(res.total.percent)+'%'
        },
        error(code, message, isRequestError) {
        //错误信息
          console.log(code)
          console.log(message)
          console.log(isRequestError)
        },
        complete(res) {
  		//上传成功
  		//json对象 有宽高，和url
  		// 视频宽高会返回null
        }
      let observable = qiniu.upload(file, key, that.token, putExtra, config) //调用七牛的上传
      let subscription = observable.subscribe(observer)//上传监听

最后把上传成功的图片组成数组就大功告成啦。