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里使用Dom操作Xml
Jan 22 Javascript
一个加载js文件的小脚本
Jun 28 Javascript
jQuery实现购物车计算价格功能的方法
Mar 25 Javascript
JavaScript使用cookie实现记住账号密码功能
Apr 27 Javascript
jQuery+PHP实现可编辑表格字段内容并实时保存
Oct 09 Javascript
使用JQuery实现的分页插件分享
Nov 05 Javascript
纯js实现手风琴效果
Apr 17 Javascript
jQuery实现的自定义轮播图功能详解
Dec 28 jQuery
Vue中使用canvas方法总结
Feb 12 Javascript
实例分析Array.from(arr)与[...arr]到底有何不同
Apr 09 Javascript
初试vue-cli使用HBuilderx打包app的坑
Jul 17 Javascript
微信小程序 flexbox layout快速实现基本布局的解决方案
Mar 24 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/06/02 PHP
PHP记录页面停留时间的方法
2016/03/30 PHP
yii2简单使用less代替css示例
2017/03/10 PHP
php swoole多进程/多线程用法示例【基于php7nts版】
2019/08/12 PHP
javascript网页关闭时提醒效果脚本
2008/10/22 Javascript
你必须知道的JavaScript 中字符串连接的性能的一些问题
2013/05/07 Javascript
Jquery多选下拉列表插件jquery multiselect功能介绍及使用
2013/05/24 Javascript
js导出table数据到excel即导出为EXCEL文档的方法
2013/10/10 Javascript
100个不能错过的实用JS自定义函数
2014/03/05 Javascript
浅析Bootstrip的select控件绑定数据的问题
2016/05/10 Javascript
JS实现兼容各种浏览器的高级拖动方法完整实例【测试可用】
2016/06/21 Javascript
HTML Table 空白单元格补全的简单实现
2016/10/13 Javascript
AngularJS路由实现页面跳转实例
2017/03/03 Javascript
React组件之间的通信的实例代码
2017/06/27 Javascript
Vue导出页面为PDF格式的实现思路
2018/07/31 Javascript
详解vue.js移动端配置flexible.js及注意事项
2019/04/10 Javascript
微信小程序 确认框的实现(附代码)
2019/07/23 Javascript
茶余饭后聊聊Vue3.0响应式数据那些事儿
2019/10/30 Javascript
有趣的JavaScript隐式类型转换操作实例分析
2020/05/02 Javascript
利用Python实现简单的相似图片搜索的教程
2015/04/23 Python
11月编程语言排行榜 Python逆袭C#上升到第4
2017/11/15 Python
python标准库OS模块函数列表与实例全解
2020/03/10 Python
基于python实现计算两组数据P值
2020/07/10 Python
Tirendo比利时:在线购买轮胎
2018/10/22 全球购物
Aurora London官网:奢华、负担得起的皮革手袋
2020/08/01 全球购物
AURALog面试题软件测试方面
2013/10/22 面试题
传统软件工程与面向对象的软件工程有什么区别
2012/05/31 面试题
合伙经营协议书
2014/04/18 职场文书
会计求职信范文
2014/05/24 职场文书
2014年设计师工作总结
2014/11/25 职场文书
2015年教师业务工作总结
2015/05/26 职场文书
入团介绍人意见范文
2015/06/04 职场文书
周一给客户的问候语
2015/11/10 职场文书
golang特有程序结构入门教程
2021/06/02 Python
redis sentinel监控高可用集群实现的配置步骤
2022/04/01 Redis
阿里云国际版 使用Nginx作为HTTPS转发代理服务器
2022/05/11 Servers