vue中七牛插件使用的实例代码


Posted in Javascript onJuly 28, 2017

本文介绍了vue中七牛插件使用,我也正在学习,分享给大家,顺便留个笔记,废话不说了,如下:

<template>
  <div id="cxUpload" class="cx-upload">
   <button id="pickfiles" class="uploadBtn">上传</button> 
 </div>
</template>

<script>
  // import $ from 'jquery'
  // import "../../common/plugin/qiniu/moxie"
  // import "../../common/plugin/qiniu/plupload.dev"
  // import "../../common/plugin/qiniu/qiniu"
  import * as tools from '../../common/js/app.js'
  export default {
    props: {
      uptokenObj: Object
    },
    methods: {
      upLoadQiniu() { // 加载七牛
        let qiniuSetInter = setInterval(() => {
          if (this.uptokenObj.upToken) {
            this.initQiniu();
            // 清除定时器
            clearInterval(qiniuSetInter);
          }
        }, 1000)
      },
      initQiniu() { // 初始化七牛
        let self = this;
        let uploader = Qiniu.uploader({
          runtimes: 'html5,flash,html4', // 上传模式,依次退化
          browse_button: 'pickfiles', // 上传选择的点选按钮,**必需**
          // 其中 uptoken 是直接提供上传凭证,uptoken_url 是提供了获取上传凭证的地址,如果需要定制获取 uptoken 的过程则可以设置 uptoken_func
          uptoken: this.uptokenObj.upToken, // uptoken 是上传凭证,由其他程序生成
          get_new_uptoken: false, // 设置上传文件的时候是否每次都重新获取新的 uptoken
          // Ajax请求downToken的Url,私有空间时使用,JS-SDK 将向该地址POST文件的key和domain,服务端返回的JSON必须包含`url`字段,`url`值为该文件的下载地址
          unique_names: false, // 默认 false,key 为文件名。若开启该选项,JS-SDK 会为每个文件自动生成key(文件名)
          save_key: false, // 默认 false。若在服务端生成 uptoken 的上传策略中指定了 `save_key`,则开启,SDK在前端将不对key进行任何处理
          domain: this.uptokenObj.imgPath, // bucket 域名,下载资源时用到,如:'http://xxx.bkt.clouddn.com/' **必需**
          container: 'cxUpload', // 上传区域 DOM ID,默认是 browser_button 的父元素,
          max_file_size: '6mb', // 最大文件体积限制
          flash_swf_url: 'path/of/plupload/Moxie.swf', //引入 flash,相对路径
          max_retries: 1, // 上传失败最大重试次数
          dragdrop: false, // 开启可拖曳上传
          drop_element: 'cxUpload', // 拖曳上传区域元素的 ID,拖曳文件或文件夹后可触发上传
          chunk_size: '4mb', // 分块上传时,每块的体积
          filters: { //文件类型过滤,这里限制为图片类型
            mime_types: [{
                title: "Image files",
                extensions: "jpg,jpeg,gif,png"
              }]
              // prevent_duplicates : false //不允许选取重复文件 
          },
          auto_start: true, // 选择文件后自动上传,若关闭需要自己绑定事件触发上传,
          init: {
            'FilesAdded': function(up, files) {
              plupload.each(files, function(file) {
                // 文件添加进队列后,处理相关的事情

              });
            },
            'BeforeUpload': function(up, file) {
              // 每个文件上传前,处理相关的事情
            },
            'UploadProgress': function(up, file) {
              // 每个文件上传时,处理相关的事情
            },
            'FileUploaded': function(up, file, info) {
              // 每个文件上传成功后,处理相关的事情
              // console.log('info+++++++++++++++');
              // console.log(info);
              // 其中 info 是文件上传成功后,服务端返回的json,形式如
              // {
              //  "hash": "Fh8xVqod2MQ1mocfI4S4KpRL6D98",
              //  "key": "gogopher.jpg"
              // }
              var domain = up.getOption('domain');
              var res = eval('(' + info + ')');

              // 获取上传成功后的文件的Url
              // var sourceLink = domain + res.key;
              // var symbolLink = self.uptokenObj.imgPlaceholder + res.key;
              var linkObject = {
                "sourceLink": domain + res.key,
                "symbolLink": self.uptokenObj.imgPlaceholder + res.key
              }

              self.$emit('get-path', linkObject);
            },
            'Error': function(up, err, errTip) {
              //上传出错时,处理相关的事情
              // console.log('失败----------');
            },
            'UploadComplete': function() {
              //队列文件处理完毕后,处理相关的事情
            },
            'Key': function(up, file) {
              // 若想在前端对每个文件的key进行个性化处理,可以配置该函数
              // 该配置必须要在 unique_names: false , save_key: false 时才生效
              // 获取当前时间戳
              var timestamp = new Date().getTime();
              var key = "image/cxw/" + timestamp + ".png";
              // do something with key here
              return key
            }
          }

        });
      }
    },
    mounted() {
      this.upLoadQiniu();
    }
  }
</script>

<style lang="scss" scoped>
  .cx-upload {
    display: inline-block;
    .uploadBtn {
      width: 64px;
      height: 30px;
      color: #2f363c;
      outline: none;
      border: 2px solid #2f363c;
    }
  }
  
  @media screen and (max-width:648px) {
    .cx-upload {
      float: left;
    }
  }
</style>

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

Javascript 相关文章推荐
不用写JS也能使用EXTJS视频演示
Dec 29 Javascript
javascript 表单的友好用户体现
Jan 07 Javascript
JavaScript 类的定义和引用 JavaScript高级培训 自定义对象
Apr 27 Javascript
jquery获取选中的文本和值的方法
Jul 08 Javascript
JavaScript访问CSS属性的几种方式介绍
Jul 21 Javascript
js实现滚动条滚动到页面底部继续加载
Dec 19 Javascript
AngularJS入门(用ng-repeat指令实现循环输出
May 05 Javascript
详解jQuery插件开发方式
Nov 22 Javascript
使用UrlConnection实现后台模拟http请求的简单实例
Jan 04 Javascript
js实现图片360度旋转
Jan 22 Javascript
vue ssr 指南详读
Jun 29 Javascript
详解基于原生JS验证表单组件xy-form
Aug 20 Javascript
Vue.js中的图片引用路径的方式
Jul 28 #Javascript
将 vue 生成的 js 上传到七牛的实例
Jul 28 #Javascript
详解Vue2中组件间通信的解决全方案
Jul 28 #Javascript
详解React 16 中的异常处理
Jul 28 #Javascript
JavaScript截屏功能的实现代码
Jul 28 #Javascript
BootStrap selectpicker后台动态绑定数据的方法
Jul 28 #Javascript
详解angularjs的数组传参方式的简单实现
Jul 28 #Javascript
You might like
php存储过程调用实例代码
2013/02/03 PHP
ThinkPHP缓存方法S()概述
2014/06/13 PHP
PHP mkdir()无写权限的问题解决方法
2014/06/19 PHP
PHP购物车类Cart.class.php定义与用法示例
2016/07/20 PHP
thinkPHP5.0框架简单配置作用域的方法
2017/03/17 PHP
解决laravel5.4下的group by报错的问题
2019/10/16 PHP
Laravel 5.1 框架Blade模板引擎用法实例分析
2020/01/04 PHP
PHP获取类私有属性的3种方法
2020/09/10 PHP
javascript Array.sort() 跨浏览器下需要考虑的问题
2009/12/07 Javascript
JavaScript使用cookie实现记住账号密码功能
2015/04/27 Javascript
Javascript实现苹果悬浮虚拟按钮
2016/04/10 Javascript
JavaScript函数柯里化详解
2016/04/29 Javascript
JavaScript中ES6 Babel正确安装过程
2016/07/18 Javascript
jQuery命名空间与闭包用法示例
2017/01/12 Javascript
在使用JSON格式处理数据时应该注意的问题小结
2017/05/20 Javascript
详解10分钟学会vue滚动行为
2017/09/21 Javascript
Nodejs中crypto模块的安全知识讲解
2018/01/03 NodeJs
vue 自定义 select内置组件
2018/04/10 Javascript
微信小程序项目实践之验证码倒计时功能
2018/07/18 Javascript
es6中比较有用的7个技巧小结
2019/07/12 Javascript
Layui数据表格之单元格编辑方式
2019/10/26 Javascript
[06:30]DOTA2英雄梦之声_第15期_死亡先知
2014/06/21 DOTA
Python中使用第三方库xlutils来追加写入Excel文件示例
2015/04/05 Python
python3 发送任意文件邮件的实例
2018/01/23 Python
django输出html内容的实例
2018/05/27 Python
tensorflow通过模型文件,使用tensorboard查看其模型图Graph方式
2020/01/23 Python
python程序文件扩展名知识点详解
2020/02/27 Python
解决python Jupyter不能导入外部包问题
2020/04/15 Python
在python中求分布函数相关的包实例
2020/04/15 Python
将HTML5 Canvas的内容保存为图片借助toDataURL实现
2013/05/20 HTML / CSS
德国旅游网站:weg.de
2018/06/03 全球购物
越南母婴用品购物网站:Kids Plaza
2020/04/09 全球购物
Java里面有没有全局变量?为什么?
2015/02/06 面试题
葡萄牙语专业个人求职信
2013/12/10 职场文书
服装设计专业自荐信
2014/06/17 职场文书
vue如何在data中引入图片的正确路径
2022/06/05 Vue.js