1.七牛云上传前台页面

1.1 安装相关包

npm install --save jquery@1.12.1 # 安装jquery

1.2 index.html 引入qiniu.min.js

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <meta name="viewport" content="width=device-width,initial-scale=1.0">
  6. <title>qiniu_vue</title>
  7. <script src="./static/qiniu.min.js"></script>
  8. </head>
  9. <body>
  10. <div id="app"></div>
  11. <!-- built files will be auto injected -->
  12. </body>
  13. </html>

1.3 新建 components\QnUpload.vue 上传视频页面

  1. <template>
  2. <div>
  3. <!-- 1.上传时的点击框 -->
  4. <div id="container">
  5. <div>
  6. <div id="uploadImage">选择文件{{uptoken}}</div>
  7. <div class="upload-progress"></div>
  8. </div>
  9. </div>
  10. <!-- 2.测试上传成功后播放功能 -->
  11. <div v-show="true">
  12. <video id="video" width="320" height="240" :src="qn_url"
  13. controls="controls" autoplay="autoplay" muted loop="loop" >
  14. 您的浏览器不支持 video 标签。
  15. </video>
  16. </div>
  17. </div>
  18. </template>
  19. <script>
  20. import $ from 'jquery'
  21. import { qn_token_get } from './axios_api/api'
  22. export default {
  23. data() {
  24. return {
  25. uptoken: '', // 从django后端获取的七牛云
  26. 认证token
  27. qn_url: 'http://qi11dgv17.hn-bkt.clouddn.com/', // 七牛云给的空间测试域名
  28. };
  29. },
  30. methods: {
  31. // 1.获取七牛云认证token
  32. getQiniuToken: function (callback){
  33. qn_token_get({ }).then(resp => {
  34. // debugger
  35. this.uptoken = resp.data.uptoken;
  36. callback() // callback 出入的是回调函数 initQiniu() 用来初始化
  37. Qiniu.uploader()
  38. }).catch( err=>{
  39. console.log(err,'err')
  40. })
  41. },
  42. // 2.初始化七牛云对象
  43. initQiniu: function () {
  44. var ths = this // 避免七牛云对象覆盖vue的this对象，在这里提前赋值
  45. var uploader = Qiniu.uploader({
  46. disable_statistics_report: false, //
  47. 禁止自动发送上传统计信息到七牛，默认允许发送
  48. runtimes: 'html5,flash,html4', //
  49. 上传模式，依次退化
  50. browse_button: 'uploadImage', //
  51. 上传选择的点选按钮，必需
  52. container: 'container', //
  53. 上传区域DOM ID，默认是browser_button的父元素
  54. max_file_size: '500mb', //
  55. 最大文件体积限制
  56. flash_swf_url: 'Moxie.swf', //
  57. 引入flash，相对路径
  58. dragdrop: false, //
  59. 关闭可拖曳上传
  60. chunk_size: '4mb', //
  61. 分块上传时，每块的体积
  62. multi_selection: !(moxie.core.utils.Env.OS.toLowerCase() === "ios"),
  63. uptoken: this.uptoken, // 在初始化时，uptoken，uptoken_url，
  64. uptoken_func三个参数中必须有一个被设置,uptoken是上传凭证，由其他程序生成;uptoken_url是提
  65. 供了获取上传凭证的地址，如果需要定制获取uptoken的过程则可以设置uptoken_func;其优先级为
  66. uptoken > uptoken_url > uptoken_func
  67. // uptoken_url: 'http://127.0.0.1:8000/uptoken',
  68. // 在初始化时，uptoken，uptoken_url，uptoken_func三个参数中
  69. 必须有一个被设置,uptoken是上传凭证，由其他程序生成;uptoken_url是提供了获取上传凭证的地址，
  70. 如果需要定制获取uptoken的过程则可以设置uptoken_func;其优先级为uptoken > uptoken_url >
  71. uptoken_func
  72. // uptoken:'q06bq54Ps5JLfZyP8AxqvByMBdu8AoIVJpMco2m:kyTiuN6GBUpfNt1nJIA7C8CCStY=:eyJzY29wZSI6IjEzMTIzMTIzMTIzIiw
  73. iZGVhZGxpbmUiOjE1NzY0MTM3MTB9',
  74. domain: 'redinnovation.s3-cn-north-1.qiniucs.com', //
  75. bucket域名，下载资源时用到，必需
  76. get_new_uptoken: false, //
  77. 设置上传文件的时候是否每次都重新获取新的uptoken
  78. auto_start: true, //
  79. 选择文件后自动上传，若关闭需要自己绑定事件触发上传
  80. max_retries: 3, //
  81. 上传失败最大重试次数
  82. save_key: true,
  83. resize: { //
  84. 想限制上传图片尺寸，直接用resize这个属性
  85. width: 300,
  86. height: 300
  87. },
  88. init: {
  89. 'FilesAdded': function(up, files) { // 文
  90. 件添加进队列后，处理相关的事情
  91. plupload.each(files, function(file) {
  92. console.log(file)
  93. });
  94. },
  95. 'BeforeUpload': function(up, file) { // 每
  96. 个文件上传前，处理相关的事情
  97. console.log("开始上传之前");
  98. $(".upload-progress").show();
  99. },
  100. 'UploadProgress': function(up, file) { // 每
  101. 个文件上传时，处理相关的事情
  102. console.log("上传中");
  103. $(".upload-progress").html("上传进度:"+file.percent + "%");
  104. },
  105. 'FileUploaded': function(up, file, info) { //
  106. 每个文件上传成功后，处理相关的事情
  107. console.log("上传成功");
  108. console.log(info,4567890);
  109. $(".upload-progress").hide();
  110. var img = new Image(); //创建一
  111. 个Image对象，实现图片的预下载
  112. var res = JSON.parse( info.response )
  113. // debugger
  114. console.log(ths.qn_url)
  115. ths.qn_url = ths.qn_url + res.key;
  116. },
  117. 'Error': function(up, err, errTip) {
  118. console.log("上传出错")
  119. },
  120. 'UploadComplete': function() {
  121. //队列文件处理完毕后，处理相关的事情
  122. }
  123. }
  124. });
  125. }
  126. },
  127. mounted(){
  128. this.getQiniuToken(() => {
  129. this.initQiniu() // 将initQiniu()当做callback回调函数传入给getQiniuToken函数
  130. })
  131. }
  132. }
  133. </script>
  134. <style>
  135. #container{
  136. width:200px;
  137. height:200px;
  138. border:1px solid #9d9d9d;
  139. border-radius: 6px;
  140. margin:50px auto;
  141. position: relative;
  142. overflow: hidden;
  143. }
  144. .upload-progress{
  145. width:100%;
  146. height:100%;
  147. position: absolute;
  148. top:0;
  149. left:0;
  150. background: rgba(0,0,0,0.5);
  151. z-index: 5;
  152. color:#fff;
  153. line-height: 200px;
  154. text-align: center;
  155. display: none;
  156. }
  157. #uploadImage{
  158. width:100%;
  159. height:100%;
  160. position: absolute;
  161. top:0;
  162. left:0;
  163. z-index: 2;
  164. text-align: center;
  165. line-height: 200px;
  166. cursor: pointer;
  167. }
  168. #container img{
  169. width:100%;
  170. position: absolute;
  171. top:0;
  172. left:0;
  173. z-index: 1;
  174. }
  175. </style>

1.4 router\index.js 引入路由

  1. import qn_upload from '@/components/QnUpload'
  2. var routes = [
  3. { path: '/qn_upload/', name: 'qn_upload', component: qn_upload,},
  4. ]

1.5 axios_api\api.js 中引入后端路由

  1. export const qn_token_get = p => axios_get("/oauth/qntoken/", p) // 获取七牛云token

2.测试页面结果

七牛云实现前端js上传实现办法的更多相关文章

  1. 前端js上传文件后端C#接收文件

    本文粗略的讲下前端文件上传和后端文件接收的原理 前端代码 html <form onsubmit="uploadFile(event)"> <input type ...

  2. 前端js上传文件 到后端接收文件

    下面是前端js代码: <html> <head> <meta http-equiv="Content-Type" content="text ...

  3. Android开发中使用七牛云存储进行图片上传下载

    Android开发中的图片存储本来就是比较耗时耗地的事情,而使用第三方的七牛云,便可以很好的解决这些后顾之忧,最近我也是在学习七牛的SDK,将使用过程在这记录下来,方便以后使用. 先说一下七牛云的存储 ...

  4. 前端js上传文件插件

    1. plupload文件上传 2.ajaxfileupload文件上传

  5. 七牛云存储的 Javascript Web 前端文件上传

    因为我的个人网站 restran.net 已经启用,博客园的内容已经不再更新.请访问我的个人网站获取这篇文章的最新内容,七牛云存储的 Web 前端文件上传 七牛是不错的云存储产品,特别是有免费的配额可 ...

  6. web前端图片上传(3)--filereader

    这篇文章主要是为了介绍一种文件上传的方式.当然文件中是包含图片的.如果大家仔细看我的第一篇web前端图片上传(1)就会知道,其实也是按照这种方式上传你的,但是由于上次时间比较紧张,没有详细的介绍今天的 ...

  7. jq实现前端文件上传

    FormData FormData是XMLHttpRequest Level 2 新增的一个接口. 使用FormData可以实现各种文件上传. 使用 // 创建FormData的实例 var form ...

  8. django + dropzone.js 上传文件

    1.dropzone.js http://www.dropzonejs.com/ dropzone.js是一个可预览\可定制化的文件拖拽上传,实现AJAX异步上传文件的工具 2.dropzone.js ...

  9. JS上传大文件的解决方案

    最近遇见一个需要上传百兆大文件的需求,调研了七牛和腾讯云的切片分段上传功能,因此在此整理前端大文件上传相关功能的实现. 在某些业务中,大文件上传是一个比较重要的交互场景,如上传入库比较大的Excel表 ...

随机推荐

  1. mkdir()和mkdirs()区别

    mkdir()和mkdirs()区别如下: mkdirs()可以建立多级文件夹, mkdir()只会建立一级的文件夹, 如下: new File("/tmp/one/two/three&qu ...

  2. Vue的生命周期--代码片段

    Vue 实例有一个完整的生命周期,也就是从开始创建. 初始化数据. 编译模板. 挂载 Dom. 渲染→更新→渲染. 销毁等一系列过程,我们称这是 Vue 的生命周期.通俗说就是 Vue 实例从创建到销 ...

  3. ubuntu18.04 安装RabbitVCS

    因为仓库安装一直安装不上所以手动安装 第一步:下载 https://github.com/rabbitvcs/rabbitvcs/ 安装 解压安装 python setup.py install -- ...

  4. leetcode 43:construct-binary-tree-from-inorder

    题目描述 给出一棵树的中序遍历和后序遍历,请构造这颗二叉树 注意: 保证给出的树中不存在重复的节点 Given inorder and postorder traversal of a tree, c ...

  5. .NET EF实现NoLock

    sql实现方法:  select * from 表名(nolock)            加上(nolock)    EF实现办法:    程序集引用    System.Transactions  ...

  6. Gromacs分子动力学模拟流程概述

    Gromacs分子动力学模拟主要可以分为以下几个步骤,不同的体系步骤可能略有不同. 在开始之前,先简单了解一下预平衡: 分子动力学模拟的最终目的是对体系进行抽样,然后计算体系的能量,各种化学键,成分分 ...

  7. 协程gevent模块和猴子补丁

    # pip 装模块 greenlet和gevent # 协程 # 与进程.线程一样也是实现并发的手段 # 创建一个线程.关闭一个线程都需要创建寄存器.栈等.需要消耗时间 # 协程本质上是一个线程 # ...

  8. nacos服务注册源码解析

    1.客户端使用 compile 'com.alibaba.cloud:spring-cloud-starter-alibaba-nacos-discovery:2.2.3.RELEASE' compi ...

  9. Qt QPainter画个球啊

    Qt QPainter画个球啊 目录 Qt QPainter画个球啊 看效果 方法 代码 看效果 方法 使用绘图事件,绘制一个图形 使用定时事件,不停更新图形位置 代码 .h #pragma once ...

  10. [head first 设计模式] 第一章 策略模式

    [head first 设计模式] 第一章 策略模式 让我们先从一个简单的鸭子模拟器开始讲起. 假设有个简单的鸭子模拟器,游戏中会出现各种鸭子,此系统的原始设计如下,设计了一个鸭子超类,并让各种鸭子继 ...