1.七牛云上传前台页面

1.1 安装相关包

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

1.2 index.html 引入qiniu.min.js

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<meta name="viewport" content="width=device-width,initial-scale=1.0">

<title>qiniu_vue</title>

<script src="./static/qiniu.min.js"></script>

</head>

<body>

<div id="app"></div>

<!-- built files will be auto injected -->

</body>

</html>

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

<template>

<div>

<!-- 1.上传时的点击框 -->

<div id="container">

<div>

<div id="uploadImage">选择文件{{uptoken}}</div>

<div class="upload-progress"></div>

</div>

</div>

<!-- 2.测试上传成功后播放功能 -->

<div v-show="true">

<video id="video" width="320" height="240" :src="qn_url"

controls="controls" autoplay="autoplay" muted loop="loop" >

您的浏览器不支持 video 标签。

</video>

</div>

</div>

</template>

<script>

import $ from 'jquery'

import { qn_token_get } from './axios_api/api'

export default {

data() {

return {

uptoken: '', // 从django后端获取的七牛云

认证token

qn_url: 'http://qi11dgv17.hn-bkt.clouddn.com/', // 七牛云给的空间测试域名

};

},

methods: {

// 1.获取七牛云认证token

getQiniuToken: function (callback){

qn_token_get({ }).then(resp => {

// debugger

this.uptoken = resp.data.uptoken;

callback() // callback 出入的是回调函数 initQiniu() 用来初始化

Qiniu.uploader()

}).catch( err=>{

console.log(err,'err')

})

},

// 2.初始化七牛云对象

initQiniu: function () {

var ths = this // 避免七牛云对象覆盖vue的this对象，在这里提前赋值

var uploader = Qiniu.uploader({

disable_statistics_report: false, //

禁止自动发送上传统计信息到七牛，默认允许发送

runtimes: 'html5,flash,html4', //

上传模式，依次退化

browse_button: 'uploadImage', //

上传选择的点选按钮，必需

container: 'container', //

上传区域DOM ID，默认是browser_button的父元素

max_file_size: '500mb', //

最大文件体积限制

flash_swf_url: 'Moxie.swf', //

引入flash，相对路径

dragdrop: false, //

关闭可拖曳上传

chunk_size: '4mb', //

分块上传时，每块的体积

multi_selection: !(moxie.core.utils.Env.OS.toLowerCase() === "ios"),

uptoken: this.uptoken, // 在初始化时，uptoken，uptoken_url，

uptoken_func三个参数中必须有一个被设置,uptoken是上传凭证，由其他程序生成;uptoken_url是提

供了获取上传凭证的地址，如果需要定制获取uptoken的过程则可以设置uptoken_func;其优先级为

uptoken > uptoken_url > uptoken_func

// uptoken_url: 'http://127.0.0.1:8000/uptoken',

// 在初始化时，uptoken，uptoken_url，uptoken_func三个参数中

必须有一个被设置,uptoken是上传凭证，由其他程序生成;uptoken_url是提供了获取上传凭证的地址，

如果需要定制获取uptoken的过程则可以设置uptoken_func;其优先级为uptoken > uptoken_url >

uptoken_func

// uptoken:'q06bq54Ps5JLfZyP8AxqvByMBdu8AoIVJpMco2m:kyTiuN6GBUpfNt1nJIA7C8CCStY=:eyJzY29wZSI6IjEzMTIzMTIzMTIzIiw

iZGVhZGxpbmUiOjE1NzY0MTM3MTB9',

domain: 'redinnovation.s3-cn-north-1.qiniucs.com', //

bucket域名，下载资源时用到，必需

get_new_uptoken: false, //

设置上传文件的时候是否每次都重新获取新的uptoken

auto_start: true, //

选择文件后自动上传，若关闭需要自己绑定事件触发上传

max_retries: 3, //

上传失败最大重试次数

save_key: true,

resize: { //

想限制上传图片尺寸，直接用resize这个属性

width: 300,

height: 300

},

init: {

'FilesAdded': function(up, files) { // 文

件添加进队列后，处理相关的事情

plupload.each(files, function(file) {

console.log(file)

});

},

'BeforeUpload': function(up, file) { // 每

个文件上传前，处理相关的事情

console.log("开始上传之前");

$(".upload-progress").show();

},

'UploadProgress': function(up, file) { // 每

个文件上传时，处理相关的事情

console.log("上传中");

$(".upload-progress").html("上传进度:"+file.percent + "%");

},

'FileUploaded': function(up, file, info) { //

每个文件上传成功后，处理相关的事情

console.log("上传成功");

console.log(info,4567890);

$(".upload-progress").hide();

var img = new Image(); //创建一

个Image对象，实现图片的预下载

var res = JSON.parse( info.response )

// debugger

console.log(ths.qn_url)

ths.qn_url = ths.qn_url + res.key;

},

'Error': function(up, err, errTip) {

console.log("上传出错")

},

'UploadComplete': function() {

//队列文件处理完毕后，处理相关的事情

}

}

});

}

},

mounted(){

this.getQiniuToken(() => {

this.initQiniu() // 将initQiniu()当做callback回调函数传入给getQiniuToken函数

})

}

}

</script>

<style>

#container{

width:200px;

height:200px;

border:1px solid #9d9d9d;

border-radius: 6px;

margin:50px auto;

position: relative;

overflow: hidden;

}

.upload-progress{

width:100%;

height:100%;

position: absolute;

top:0;

left:0;

background: rgba(0,0,0,0.5);

z-index: 5;

color:#fff;

line-height: 200px;

text-align: center;

display: none;

}

#uploadImage{

width:100%;

height:100%;

position: absolute;

top:0;

left:0;

z-index: 2;

text-align: center;

line-height: 200px;

cursor: pointer;

}

#container img{

width:100%;

position: absolute;

top:0;

left:0;

z-index: 1;

}

</style>

1.4 router\index.js 引入路由

import qn_upload from '@/components/QnUpload'

var routes = [

{ path: '/qn_upload/', name: 'qn_upload', component: qn_upload,},

]

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

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. [LuoguP2147] [SDOI2008]洞穴勘测 (LCT维护连通性)

    题面 传送门:https://www.luogu.org/problemnew/show/P2147 Solution 这题...... 我们可以发现题目要求我们维护一个动态森林,而且只查询连通性.. ...

  2. DCL单例模式中的缺陷及单例模式的其他实现

    DCL:Double Check Lock ,意为双重检查锁.在单例模式中懒汉式中可以使用DCL来保证程序执行的效率. 1 public class SingletonDemo { 2 private ...

  3. Git--gitLab远程仓库分支代码回退的两种方案

    事由:作为仓库的master,一时老眼昏花,把同事说的不合并看成了合并,直接合并了. 解决方法: 一.粗鲁的代码回退--直接在远程仓库合并 1. 在gitLab远程仓库中,基于想回退的代码的节点(co ...

  4. Java项目——嗖嗖移动业务大厅

    嗖嗖移动业务大厅包类(如下图): SosoMgr: 1 package cn.biz; 2 3 import java.util.Scanner; 4 5 import cn.common.Commo ...

  5. 英特尔与 Facebook 合作采用第三代英特尔® 至强® 可扩展处理器和支持 BFloat16 加速的英特尔® 深度学习加速技术，提高 PyTorch 性能

    英特尔与 Facebook 曾联手合作,在多卡训练工作负载中验证了 BFloat16 (BF16) 的优势:在不修改训练超参数的情况下,BFloat16 与单精度 32 位浮点数 (FP32) 得到了 ...

  6. 炸了！一口气问了我18个JVM问题！

    前言 GC 对于Java 来说重要性不言而喻,不论是平日里对 JVM 的调优还是面试中的无情轰炸. 这篇文章我会以一问一答的方式来展开有关 GC 的内容. 不过在此之前强烈建议先看这篇文章深度揭秘垃圾 ...

  7. Windows defender历史记录闪退解决方案

    删除C:\ProgramData\Microsoft\Windows defender\Scans\History\Service文件夹 另外defender可以设置保护文件夹,选择病毒和威胁防护-管 ...

  8. TPE-ThreadPoolExecutor

    TPE: java.util.concurrent.ThreadPoolExecutor public ThreadPoolExecutor(int corePoolSize, int maximum ...

  9. 第二章epoll

    epoll_create:函数实现分析 /* * Open an eventpoll file descriptor. */ SYSCALL_DEFINE1(epoll_create1, int, f ...

  10. MySQL架构(面)

    和其它数据库相比,MySQL有点与众不同,它的架构可以在多种不同场景中应用并发挥良好作用.主要体现在存储引擎的架构上,插件式的存储引擎架构将查询处理和其它的系统任务以及数据的存储提取相分离.这种架构可 ...