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上传实现办法的更多相关文章

前端js上传文件后端C#接收文件
本文粗略的讲下前端文件上传和后端文件接收的原理前端代码 html <form onsubmit="uploadFile(event)"> <input type ...
前端js上传文件到后端接收文件
下面是前端js代码: <html> <head> <meta http-equiv="Content-Type" content="text ...
Android开发中使用七牛云存储进行图片上传下载
Android开发中的图片存储本来就是比较耗时耗地的事情,而使用第三方的七牛云,便可以很好的解决这些后顾之忧,最近我也是在学习七牛的SDK,将使用过程在这记录下来,方便以后使用. 先说一下七牛云的存储 ...
前端js上传文件插件
1. plupload文件上传 2.ajaxfileupload文件上传
七牛云存储的 Javascript Web 前端文件上传
因为我的个人网站 restran.net 已经启用,博客园的内容已经不再更新.请访问我的个人网站获取这篇文章的最新内容,七牛云存储的 Web 前端文件上传七牛是不错的云存储产品,特别是有免费的配额可 ...
web前端图片上传(3)--filereader
这篇文章主要是为了介绍一种文件上传的方式.当然文件中是包含图片的.如果大家仔细看我的第一篇web前端图片上传(1)就会知道,其实也是按照这种方式上传你的,但是由于上次时间比较紧张,没有详细的介绍今天的 ...
jq实现前端文件上传
FormData FormData是XMLHttpRequest Level 2 新增的一个接口. 使用FormData可以实现各种文件上传. 使用 // 创建FormData的实例 var form ...
django + dropzone.js 上传文件
1.dropzone.js http://www.dropzonejs.com/ dropzone.js是一个可预览\可定制化的文件拖拽上传,实现AJAX异步上传文件的工具 2.dropzone.js ...
JS上传大文件的解决方案
最近遇见一个需要上传百兆大文件的需求,调研了七牛和腾讯云的切片分段上传功能,因此在此整理前端大文件上传相关功能的实现. 在某些业务中,大文件上传是一个比较重要的交互场景,如上传入库比较大的Excel表 ...

随机推荐

13、form组件
Form介绍我们之前在HTML页面中利用form表单向后端提交数据时,都会写一些获取用户输入的标签并且用form标签把它们包起来. 与此同时我们在好多场景下都需要对用户的输入做校验,比如校验用户是否 ...
WPF应用中一种比较完美的权限控制设计方式
如题近段时间需要在wpf应用中设计一个权限控制 , 简而言之的说你懂的对于IT人员来说都知道的常见的软件功能首先要有用户用户,然后用户属于哪个角色 ,然后各个角色都有自己的可供操作的一堆功 ...
SSM工作流程与原理详解
自学ssm->springboot->springcloud,所以很多东西会用但理解较浅,所以现在从最开始的ssm开始进行对原理以及运行过程的整理知识归纳,若有错误感谢指正. Spring ...
主题包含一张index.html
有半年之久没有更新新作品了,但这个小小领地我并没有忘记,我会坚持下去,一直在这等你,等你的每次回眸,感恩你的每次驻足,这已经足够成为我坚守的动力和理由,尽管现在有很多不足和不尽人意,也没很多的时间管理 ...
CSS3之transition属性
transition属性可直译为"过渡",主要用于检索或设置对象变换的过渡. 语法: transition:property duration [timing-function] ...
html中创建并调用vue组件的几种方法
最近在写项目的时候,总是遇到在html中使用vue.js的情况,且页面逻辑较多,之前的项目经验都是使用脚手架等已有的项目架构,使用.vue文件完成组价注册,及组件之间的调用,还没有过在html中创建组 ...
cephfs根据存储池显示df容量
前言如果用cephfs比较多,应该都知道,在cephfs的客户端进行mount以后,看到的容量显示的是集群的总的容量,也就是你的总的磁盘空间是多少这个地方显示的就是多少这个一直都是这样显示的,我们 ...
JWT鉴权
一.HTTP基本认证 Basic Authentication--当浏览器访问使用基本认证的网站的时候, 浏览器会提示你输入用户名和密码. http auth的过程: 客户端发送http请求服务器发 ...
Python_opencv库
1.车牌检测 ''' 项目名称:opencv/cv2 车牌检测简介: 1.训练级联表 ***.xml [跳过...] 2.用如下代码加载级联表和目标图片识别车牌注:推荐用anconda安装open ...
5、Spring Boot缓存
1.JSR107 Java Caching定义了5个核心接口,分别是CachingProvider.CacheManager.Cache.Entry.Expiry. CachingProvider:定 ...

七牛云实现前端js上传实现办法

1.七牛云上传前台页面

1.1 安装相关包

1.2 index.html 引入qiniu.min.js

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

1.4 router\index.js 引入路由

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

2.测试页面结果

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

随机推荐

热门专题