Vue2.0利用vue-resource上传文件到七牛的实例代码

 更新时间:2017年07月28日 09:54:24   作者:Smohan  
本篇文章主要介绍了Vue2.0利用vue-resource上传文件到七牛的实例代码,具有一定的参考价值,有兴趣的可以了解一下

本文介绍了Vue2.0利用vue-resource上传文件到七牛,分享给大家,希望对大家有帮助

关于上传,总是有很多可以说道的。

16年底,公司项目番茄表单的前端部分,开始了从传统的jquery到vue 2.0的彻底重构。但是上传部分,无论是之前的传统版本,还是Vue新版本,都是在使用着FileAPI这款优秀的开源库,只是进行了简单的directive化。为什么呢?因为兼容性。没办法,公司项目不等同于个人项目,必须要考虑大多数浏览器。否则,上传部分完全可以利用Vue-Resource以及FormData来抛开对FileAPI的依赖。这让我深感遗憾,幸好这个简单的遗憾在个人博客Vue化重构的时候得以弥补。

上传流程

图不重要看文字

input[type="file"] change事件触发后,先去(如果是图片,可以同时通过FileReader以及readAsDataURL将图片预览在页面上)后台请求七牛的上传token,将拿到的token和key以及通过change传递过来的files一起append到formData中。然后将formData通过post传递给七牛,七牛在处理后将返回真正的文件地址

获取token

const qiniu = require('qiniu')
const crypto = require('crypto')
const Config = require('qiniu-config')

exports.token = function*() {
  //构建一个保存文件名
  //这里没有处理文件后缀,需要自己传递过来,然后在这里处理加在key上,非必须
  const key = crypto.createHash('md5').update(((new Date()) * 1 + Math.floor(Math.random() * 10).toString())).digest('hex')
  //Config 七牛的秘钥等配置
  const [ACCESS_KEY, SECRET_KEY, BUCKET] = [Config.accessKey, Config.secretKey, Config.bucket] 
  qiniu.conf.ACCESS_KEY = ACCESS_KEY
  qiniu.conf.SECRET_KEY = SECRET_KEY
  const upToken = new qiniu.rs.PutPolicy(BUCKET + ":" + key)
  try {
    const token = upToken.token()
    return this.body = {
      key: key,
      token: token
    }
  } catch (e) {
    // throw error
  }
}

//假设api 地址是 /api/token 

上传组件 upload.vue

<template>
  <label class="mo-upload">
    <input type="file" :accept="accepts" @change="upload">
    <slot></slot>
  </label>
</template>
<style lang="scss">
  .mo-upload {
    display: inline-block;
    position: relative;
    margin-bottom: 0;
    input[type="file"] {
      display: none;
    }
    .mo-upload--label {
      display: inline-block;
      position: relative;
    }
  }
</style>
<script>
  export default {
    name : 'MoUpload',
    props : {
      accepts : { //允许的上传类型
        type : String,
        default : 'image/jpeg,image/jpg,image/png,image/gif'
      },
      flag : [String, Number], //当前上传标识,以便于在同一个监听函数中区分不同的上传域
      maxSize : {
        type : Number,
        default : 0 //上传大小限制
      }, 
    },
    methods: {
      upload (event) {
        let file = event.target.files[0]
        const self = this
        const flag = this.flag
        if (file) {
          if (this.maxSize) {
            //todo filter file
          }
          //filter file, 文件大小,类型等过滤
          //如果是图片文件
          // const reader = new FileReader()
          // const imageUrl = reader.readAsDataURL(file)
          // img.src = imageUrl //在预览区域插入图片

          const formData = new FormData()
          formData.append('file', file)
          
          //获取token
          this.$http.get(`/api/token/`)
          .then(response => {
            const result = response.body
            formData.append('token', result.token)
            formData.append('key', result.key)
            //提交给七牛处理
            self.$http.post('https://up.qbox.me/', formData, {
              progress(event) {
                //传递给父组件的progress方法
                self.$emit('progress', parseFloat(event.loaded / event.total * 100), flag) 
              }
            })
            .then(response => {
              const result = response.body
              if (result.hash && result.key) {
                //传递给父组件的complete方法
                self.$emit('complete', 200 , result, flag)
                //让当前target可以重新选择
                event.target.value = null
              } else {
                self.$emit('complete', 500, result, flag)
              }
            }, error => self.$emit('complete', 500, error.message), flag)
          })
        }
      }
    }
  }
</script>

父组件调用

<template>
  <section>
    ...
    <figure class="upload-preview">
      <img :src="thumbnail" v-if="thumbnail"/>
    </figure>
    <mo-upload flag="'thumbnail'" @complete="uploadComplete" @progress="uploadProgress">
      <a>选择图片文件<i class="progress" :style="{width:progress + '%'}"></i></a>
    </mo-upload>
    ...
  </section>
</template>
<script>
  import MoUpload from 'upload'
  export default {
    components : {
      MoUpload,
    },
    data () {
      return {
        thumbnail : null,
        progress : 0 //上传进度
      }
    },
    methods : {
      uploadProgress (progress, flag) {
        //这里可以通过回调的flag对不同上传域做处理
        this.progress = progress < 100 ? progress : 0;
      },
      uploadComplete(status, result, flag) {
        if (status == 200) { //
          this.thumbnail = `domain.com/${result.key}` //七牛域名 + 返回的key 组成文件url
        } else {
          //失败处理
        }
      },
    }
  }
</script>

小结

相比于FILEApi 或者其他上传组件,这种方法代码量最小。但是缺点也是显而易见的,大量html5 API的使用,势必会回到兼容性这个老大难上来,慎重的选择性使用吧‘

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

相关文章

  • Vue下的国际化处理方法

    Vue下的国际化处理方法

    下面小编就为大家分享一篇Vue下的国际化处理方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2017-12-12
  • Vue中错误图片的处理的实现代码

    Vue中错误图片的处理的实现代码

    这篇文章主要介绍了Vue中错误图片的处理的实现代码,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-11-11
  • 基于vue2的table分页组件实现方法

    基于vue2的table分页组件实现方法

    这篇文章主要为大家详细介绍了基于vue2的table分页组件实现方法,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-03-03
  • vuex根据不同的用户权限展示不同的路由列表功能

    vuex根据不同的用户权限展示不同的路由列表功能

    最近接到一个新的需求,要求将系统的用户进行分类,用户登陆后根据不同的用户权限展示不同的功能列表。这篇文章主要介绍了vuex根据不同的用户权限展示不同的路由列表,需要的朋友可以参考下
    2019-09-09
  • Vue中的components组件与props的使用解读

    Vue中的components组件与props的使用解读

    这篇文章主要介绍了Vue中的components组件与props的使用解读,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2023-05-05
  • vuex学习进阶篇之getters的使用教程

    vuex学习进阶篇之getters的使用教程

    getters用于获取state里的数据,它类似于计算属性,如果要获取的数据并没有发生变化的话,就会返回缓存的数据,下面这篇文章主要给大家介绍了关于vuex学习进阶篇之getters的使用教程,需要的朋友可以参考下
    2022-10-10
  • 在vue-cli搭建的项目中增加后台mock接口的方法

    在vue-cli搭建的项目中增加后台mock接口的方法

    这篇文章主要介绍了在vue-cli搭建的项目中增加后台mock接口的方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-04-04
  • vue.js全局组件和局部组件示例代码

    vue.js全局组件和局部组件示例代码

    组件是Vue.js的最核心的功能,所谓的组件化就是把页面拆分成多个组件,每个组件单独使用CSS,JS,模板,图片等资源进行开发与维护,然后在制作网页的时候根据需要调用相关的组件,这篇文章主要给大家介绍了关于vue.js全局组件和局部组件的相关资料,需要的朋友可以参考下
    2022-12-12
  • vue-cli中实现响应式布局的方法

    vue-cli中实现响应式布局的方法

    这篇文章主要介绍了vue-cli中实现响应式布局的方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2021-03-03
  • vue列表自动滚动实例

    vue列表自动滚动实例

    这篇文章主要介绍了vue列表自动滚动实例代码,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2023-10-10

最新评论