大文件前端直接上传至七牛

大文件前端直接上传至七牛，根据官方demo修改出来一个简单的上传的例子，方便集成到项目中，需要后台获取token接口配合

后台返回json字符串，例：{"uptoken":"ssdads","domain":"http://xxx.xxx.xxx/"},domain: 为七牛空间对应的域名

后台获取七牛token方法

 /*** 获取七牛token* @param* @param* @return*/@RequestMapping(value = "/getQinniuToken")@ResponseBodypublic String getQinniuToken(){String qnToken = "";try {qnToken = QiniuupLoadUtil.getQNToken();} catch (JSONException e) {e.printStackTrace();} catch (AuthException e) {e.printStackTrace();}JSONObject json = new JSONObject();json.put("uptoken", qnToken);json.put("domain", "http://www.xxxx.www");return json.toJSONString();}

前端

引入js（附下载链接）

<script type="text/javascript" src="xxxxx/qiniu.min.js"></script>
<script src="xxxxx/jquery.min.js"></script>

页面内容

两个不同上传file，通过class（select）绑定上传事件

<div style="margin: 100px 50px;"><div style="margin: 50px 0" ><input  class="select" type="file" id="1111"><span id="jinDu_1111"></span></div><div style="margin: 50px 0" ><input  class="select" type="file" id="2222"><span id="jinDu_2222"></span></div></div>

js代码

$(function () {//获取上传token，成功后初始化绑定上传事件$.ajax({url: "http://192.168.1.111:8081/system/getQinniuToken",success: function(res){res = JSON.parse(res);var token = res.uptoken;var domain = res.domain;var config = {useCdnDomain: true,disableStatisticsReport: false,retryCount: 6};var putExtra = {fname: "",params: {},mimeType: null};uploadWithSDK(token, putExtra, config, domain);}})});function uploadWithSDK(token, putExtra, config, domain) {//通过class绑定多个上传file$(".select").unbind("change").bind("change",function(){//获取上传的input 的id用来区分多个上传时各自的进度及上传结果处理var thisId= $(this).attr("id");console.log("thisId："+thisId);var file = this.files[0];var finishedAttr = [];var compareChunks = [];var observable;if (file) {var key = file.name;// 判断文件大小100Mif (file.size > 100 * 1024 * 1024) {alert('判断文件大小100M');return false;}putExtra.params["x:name"] = key.split(".")[0];// 设置next,error,complete对应的操作，分别处理相应的进度信息，错误信息，以及完成后的操作var error = function(err) {console.log(err);alert("上传出错")};//上传完成后通知处理var complete = function(res) {//if(res.key ){if (res.key.match(/\.(jpg|jpeg|png|gif)$/)) {var fileUrl = domain+'/'+res.key;//图片文件$("#jinDu_"+thisId).append("<img style='width: 100px;max-height: 300px' src='"+fileUrl+"' >");}else{//非图片文件$("#jinDu_"+thisId).append("<img style='width: 100px;max-height: 300px' src='http://jssdk.demo.qiniu.io/images/default.png' >");}}else {//.......}};//上传进度var next = function(response) {var chunks = response.chunks||[];var total = response.total;// 这里对每个chunk更新进度，并记录已经更新好的避免重复更新，同时对未开始更新的跳过for (var i = 0; i < chunks.length; i++) {if (chunks[i].percent === 0 || finishedAttr[i]){continue;}if (compareChunks[i].percent === chunks[i].percent){continue;}if (chunks[i].percent === 100){finishedAttr[i] = true;}}$("#jinDu_"+thisId).html("进度：" + total.percent.toFixed(2) + "% ");compareChunks = chunks;};var subObject = {next: next,error: error,complete: complete};var subscription;//修改文件上传名称var nameTou = dateFtt(new Date(), "yyyyMMddhhmmss")+"-"+randomn(6)+"-";key = nameTou+key;console.log("文件名称："+domain+'/'+key);// 调用sdk上传接口获得相应的observable，控制上传和暂停observable = qiniu.upload(file, key, token, putExtra, config);//subscription = observable.subscribe(subObject);}})}function dateFtt(date,fmt) { //author: meizzif(fmt==null){fmt = 'yyyy-MM-dd hh:mm:ss';}var o = {"M+": date.getMonth() + 1, //月份"d+": date.getDate(), //日"h+": date.getHours(), //小时"m+": date.getMinutes(), //分"s+": date.getSeconds(), //秒"q+": Math.floor((date.getMonth() + 3) / 3), //季度"S": date.getMilliseconds() //毫秒};if(/(y+)/.test(fmt))fmt = fmt.replace(RegExp.$1, (date.getFullYear() + "").substr(4 - RegExp.$1.length));for(var k in o)if(new RegExp("(" + k + ")").test(fmt))fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));return fmt;}function randomn(n) {if(n==null){n=6;}var res = ''for (; res.length < n; res += Math.random().toString(36).substr(2).toUpperCase()) {}return res.substr(0, n)}

页面上传效果：

打开页面：

上传：

主要给像我一样的小白看看，有问题可私信

示例代码下载

大文件前端直接上传至七牛相关推荐

php大图片接口上传慢,七牛php sdk上传文件太慢
问题描述上传同一个文件(32kb)有时候需要2s,但有时候需要11s,上传速度太不稳定,且太慢. 上传的过程是由前端上传文件到后端php(使用yii2框架)的接口,由php调qiniu的sdk上传方 ...
thinkphp6+webuploader实现大文件(视频)分片上传/本地保存或上传OSS
thinkPHP6+webuploader分片上传大视频的解决方案: ①能解决视频太大,1G.2G直传服务器压力过大 ②部分追求完美的人不发接受直传,那只能分片上传 ③分片上传是我找到的比较合理的解决 ...
vue+element-ui大文件的分片上传和断点续传js-spark-md5和browser-md5-file
注意:以下共两份代码片段,第一份为原博主链接代码,第二份自己写的整体代码(比较乱) 1.参考 https://www.cnblogs.com/kelelipeng/p/10158599.html (j ...
七牛云图床php,PHP实现Markdown文章上传到七牛图床的实例内容
在使用 Markdown 编写文章之后,经常需要发布到不同的平台,这里会遇到一个问题,文章的图片需要手动的进行上传,管理起来非常不方便,因此,强烈建议将图片统一上传到图床中,这样的话一篇文章就可以轻松 ...
laravel上传到七牛图片插件
1.首先引入两个插件 2.在https://developer.qiniu.com/kodo/sdk/1241/php找到安装命令在终端运行composer require qiniu/php-sd ...
mysql备份七牛云存储_定时备份 Mysql并上传到七牛的方法
多数应用场景下,我们需要对重要数据进行备份.并放置到一个安全的地方,以备不时之需. 常见的 MySQL 数据备份方式有,直接打包复制对应的数据库或表文件(物理备份).mysqldump 全量逻辑备份. ...
定时备份 MySQL 并上传到七牛
定时备份 MySQL 并上传到七牛多数应用场景下,我们需要对重要数据进行备份.并放置到一个安全的地方,以备不时之需. 常见的 MySQL 数据备份方式有,直接打包复制对应的数据库或表文件(物理备份) ...
Vue爬坑之旅(二十一):vue使用富文本编辑器vue-quill-editor实现配合后台将图片上传至七牛
一.全局注册:main.js import Vue from 'vue' import VueQuillEditor, { Quill } from 'vue-quill-editor' import ...
H5 将html页面内容生成图片并上传至七牛
小编最近在做项目时遇到一个问题,那就是,需要将html页面生成图片后并传给app客户端,至于为什么要传给客户端,自然是因为小编的这个项目是客户端中嵌入h5页面,故而需要和客户端内部交互.那么问题就来了 ...
php - 基于 webuploader 视频大文件分片分段上传，支持断点续传（刷新、关闭页面、重新上传、网络中断等情况）带进度条，前端后端都有示例源码详细教程
效果图文件上传前先检测该文件是否已上传,如果已上传提示 "文件已存在",如果未上传则直接上传. 基于 php+webuploader的大文件分片上传,带进度条,支持断点续传(刷新 ...

大文件前端直接上传至七牛

大文件前端直接上传至七牛相关推荐

最新文章

热门文章