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


Posted in Javascript onJuly 28, 2017

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

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

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

上传流程

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

图不重要看文字

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的使用,势必会回到兼容性这个老大难上来,慎重的选择性使用吧‘

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

Javascript 相关文章推荐
javascript qq右下角滑出窗口 sheyMsg
Mar 21 Javascript
jquery attr 设定src中含有&amp;(宏)符号问题的解决方法
Jul 26 Javascript
ASP.NET jQuery 实例17 通过使用jQuery validation插件校验ListBox
Feb 03 Javascript
JS上传图片前的限制包括(jpg jpg gif及大小高宽)等
Dec 19 Javascript
JavaScript使用push方法添加一个元素到数组末尾用法实例
Apr 06 Javascript
jQuery实现彩带延伸效果的网页加载条loading动画
Oct 29 Javascript
jQuery 3.0中存在问题及解决办法
Jul 15 Javascript
微信小程序 toast 详解及实例代码
Nov 09 Javascript
Node.js服务器开启Gzip压缩教程
Aug 11 Javascript
简单谈谈vue的过渡动画(推荐)
Oct 11 Javascript
JavaScript数据结构之双向链表和双向循环链表的实现
Nov 28 Javascript
layer弹出的iframe层在执行完毕后关闭当前弹出层的方法
Aug 17 Javascript
vue使用vue-cli快速创建工程
Jul 28 #Javascript
用JS实现简单的登录验证功能
Jul 28 #Javascript
基于JavaScript实现图片连播和联级菜单实例代码
Jul 28 #Javascript
vue中七牛插件使用的实例代码
Jul 28 #Javascript
Vue.js中的图片引用路径的方式
Jul 28 #Javascript
将 vue 生成的 js 上传到七牛的实例
Jul 28 #Javascript
详解Vue2中组件间通信的解决全方案
Jul 28 #Javascript
You might like
PH P5.2至5.5、5.6的新增功能详解
2014/07/14 PHP
php基于curl实现随机ip地址抓取内容的方法
2016/10/11 PHP
php实现的网页版剪刀石头布游戏示例
2016/11/25 PHP
ThinkPHP5框架中使用JWT的方法示例
2020/06/03 PHP
PHPstorm启用自动换行的方法详解(IDE)
2020/09/17 PHP
对frameset、frame、iframe的js操作示例代码
2013/08/16 Javascript
14个有用的Jquery技巧分享
2015/01/08 Javascript
JQuery中serialize()用法实例分析
2015/02/06 Javascript
基于jQuery实现的双11天猫拆红包抽奖效果
2015/12/01 Javascript
正则表达式优化JSON字符串的技巧
2015/12/24 Javascript
JS实现登录页密码的显示和隐藏功能
2017/12/06 Javascript
vue2.0页面前进刷新回退不刷新的实现方法
2018/07/31 Javascript
微信小程序适配iphoneX的实现方法
2018/09/18 Javascript
详解使用WebPack搭建React开发环境
2019/08/06 Javascript
浅谈TypeScript 用 Webpack/ts-node 运行的配置记录
2019/10/11 Javascript
vue iview的菜单组件Mune 点击不高亮的解决方案
2019/11/01 Javascript
[13:38]2015国际邀请赛中国战队出征仪式
2015/05/29 DOTA
利用python获取某年中每个月的第一天和最后一天
2016/12/15 Python
python3第三方爬虫库BeautifulSoup4安装教程
2018/06/19 Python
Scrapy使用的基本流程与实例讲解
2018/10/21 Python
Django多数据库的实现过程详解
2019/08/01 Python
python matplotlib库直方图绘制详解
2019/08/10 Python
pandas read_excel()和to_excel()函数解析
2019/09/19 Python
Python可变对象与不可变对象原理解析
2020/02/25 Python
python中@property的作用和getter setter的解释
2020/12/22 Python
解决pycharm修改代码后第一次运行不生效的问题
2021/02/06 Python
HTML5各种头部meta标签的功能(推荐)
2017/03/13 HTML / CSS
中医专业应届生求职信
2013/11/17 职场文书
市场营销专业个人求职信范文
2013/12/14 职场文书
《孔繁森》教学反思
2014/04/17 职场文书
2014年毕业演讲稿范文
2014/05/13 职场文书
学雷锋倡议书
2015/01/19 职场文书
稽核岗位职责
2015/02/10 职场文书
卫生院义诊活动总结
2015/05/07 职场文书
酒桌上的开场白
2015/06/01 职场文书
victoriaMetrics库布隆过滤器初始化及使用详解
2022/04/05 Golang