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的alert弹出框出现乱码解决方案
Sep 02 Javascript
详细分析JavaScript函数定义
Jul 16 Javascript
基于javascript实现句子翻牌网页版小游戏
Mar 23 Javascript
JS实现页面载入时随机显示图片效果
Sep 07 Javascript
javascript中活灵活现的Array对象详解
Nov 30 Javascript
jQuery生成假加载动画效果
Dec 01 Javascript
基于webpack4搭建的react项目框架的方法
Jun 30 Javascript
详解Vue源码学习之双向绑定
Apr 10 Javascript
layui form表单提交之后重新加载数据表格的方法
Sep 11 Javascript
解决node终端下运行js文件不支持ES6语法
Apr 04 Javascript
有趣的JavaScript隐式类型转换操作实例分析
May 02 Javascript
Node.js path模块,获取文件后缀名操作
Nov 07 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过滤XSS攻击的函数
2013/11/12 PHP
利用PHP获取汉字首字母并且分组排序详解
2017/10/22 PHP
PHP+MySQL实现消息队列的方法分析
2018/05/09 PHP
juqery 学习之五 文档处理 插入
2011/02/11 Javascript
让textarea自动调整大小的js代码
2011/04/12 Javascript
JQuery扩展插件Validate 1 基本使用方法并打包下载
2011/09/05 Javascript
JS实现的网页倒计时数字时钟效果
2015/03/02 Javascript
浅谈Jquery为元素绑定事件
2015/04/27 Javascript
Angular Js文件上传之form-data
2015/08/28 Javascript
JavaScript中字面量与函数的基本使用知识
2015/10/20 Javascript
js实现对ajax请求面向对象的封装
2016/01/08 Javascript
原生javascript实现的一个简单动画效果
2016/03/30 Javascript
微信小程序开发之数据存储 参数传递 数据缓存
2017/04/13 Javascript
vue axios 给生产环境和发布环境配置不同的接口地址(推荐)
2018/05/08 Javascript
angularJs中ng-model-options设置数据同步的方法
2018/09/30 Javascript
vue中slot(插槽)的介绍与使用
2018/11/12 Javascript
15 分钟掌握vue-next响应式原理
2019/10/13 Javascript
python中星号变量的几种特殊用法
2016/09/07 Python
Python实现定时任务
2017/02/08 Python
Python实现的中国剩余定理算法示例
2017/08/05 Python
python实现对文件中图片生成带标签的txt文件方法
2018/04/27 Python
使用Python来开发微信功能
2018/06/13 Python
Python解析多帧dicom数据详解
2020/01/13 Python
Python要求O(n)复杂度求无序列表中第K的大元素实例
2020/04/02 Python
菲律宾领先的在线时尚商店:Zalora菲律宾
2018/02/08 全球购物
alice McCALL官网:澳大利亚时尚品牌
2020/11/16 全球购物
建筑专业毕业生自荐信
2014/05/25 职场文书
模具专业自荐信
2014/05/29 职场文书
工厂标语大全
2014/10/06 职场文书
百年孤独读书笔记
2015/06/29 职场文书
田径运动会通讯稿
2015/07/18 职场文书
优化经济发展环境工作总结
2015/08/11 职场文书
团结主题班会
2015/08/13 职场文书
初中体育教学随笔
2015/08/15 职场文书
python 如何用terminal输入参数
2021/05/25 Python
oracle索引总结
2021/09/25 Oracle