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 相关文章推荐
javascript显示隐藏层比较不错的方法分析
Sep 30 Javascript
jQuery powerFloat万能浮动层下拉层插件使用介绍
Dec 27 Javascript
Jquery实现弹出层分享微博插件具备动画效果
Apr 03 Javascript
js实现动态添加、删除行、onkeyup表格求和示例
Aug 18 Javascript
js函数在frame中的相互调用详解
Mar 03 Javascript
JavaScript link方法入门实例(给字符串加上超链接)
Oct 17 Javascript
javascript制作网页图片上实现下雨效果
Feb 26 Javascript
简介JavaScript中toUpperCase()方法的使用
Jun 06 Javascript
很棒的一组js图片轮播特效
Jan 12 Javascript
webpack实现热更新(实施同步刷新)
Jul 28 Javascript
JavaScript学习笔记之数组基本操作示例
Jan 09 Javascript
Node.js之删除文件夹(含递归删除)代码实例
Sep 09 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怎样调用MSSQL的存储过程
2006/10/09 PHP
解析coreseek for sphinx的使用
2013/06/21 PHP
php gd等比例缩放压缩图片函数
2016/06/12 PHP
PHP搭建大文件切割分块上传功能示例
2017/01/04 PHP
thinkphp项目如何自定义微信分享描述内容
2017/02/20 PHP
广告切换效果(缓动切换)
2009/05/27 Javascript
11款基于Javascript的文件管理器
2009/10/25 Javascript
JS和JQUERY获取页面大小,滚动条位置,元素位置(示例代码)
2013/12/14 Javascript
使用JavaScript的ActiveXObject对象检测应用程序是否安装的方法
2014/04/15 Javascript
Bootstrap组件系列之福利篇几款好用的组件(推荐)
2016/06/23 Javascript
一个非常好用的文字滚动的案例,鼠标悬浮可暂停[两种方案任选]
2016/12/01 Javascript
利用angularjs1.4制作的简易滑动门效果
2017/02/28 Javascript
VUE开发一个图片轮播的组件示例代码
2017/03/06 Javascript
微信小程序动态的加载数据实例代码
2017/04/14 Javascript
详解使用vuex进行菜单管理
2017/12/21 Javascript
vue-router配合ElementUI实现导航的实例
2018/02/11 Javascript
浅谈Vue Element中Select下拉框选取值的问题
2018/03/01 Javascript
vue-cli3跨域配置的简单方法
2019/09/06 Javascript
原生JS实现无缝轮播图片
2020/06/24 Javascript
一个简单的python程序实例(通讯录)
2013/11/29 Python
横向对比分析Python解析XML的四种方式
2016/03/30 Python
Python玩转加密的技巧【推荐】
2019/05/13 Python
Python3 翻转二叉树的实现
2019/09/30 Python
python小白切忌乱用表达式
2020/05/29 Python
Python 实现 T00ls 自动签到脚本代码(邮件+钉钉通知)
2020/07/06 Python
解决Python3.7.0 SSL低版本导致Pip无法使用问题
2020/09/03 Python
Python使用grequests并发发送请求的示例
2020/11/05 Python
CSS3制作翻转效果_动力节点Java学院整理
2017/07/11 HTML / CSS
2014年重阳节活动策划方案书
2014/09/16 职场文书
2014大四本科生自我鉴定总结
2014/10/04 职场文书
2014年外贸业务员工作总结
2014/12/11 职场文书
公司回复函格式
2015/07/14 职场文书
SQL Server数据定义——模式与基本表操作
2021/04/05 SQL Server
redis连接被拒绝的解决方案
2021/04/12 Redis
python操作xlsx格式文件并读取
2021/06/02 Python
Java框架入门之简单介绍SpringBoot框架
2021/06/18 Java/Android