JavaScript如何上传⽂件到七⽜云（上传视频显⽰进度条）背景
之前在后端上传视频到七⽜云上，发现上传速度很慢，后来尝试直接在前端上传视频到七⽜云上，最后实测发现快了很多。采⽤前端上传也减轻了服务器压⼒。greensocks什么意思
除了，当然也可以考虑
参考
swf⽂件下载SDK⾥⾯有
步骤
视频上传
1、后台⽣成token字符串给前端:
pom⽂件引⼊
<!-- qiniu -->
<dependency>
<groupId>com.qiniu</groupId>
<artifactId>qiniu-java-sdk</artifactId>
<version>[7.2.0, 7.2.99]</version>
</dependency>
QiNiuUtil⼯具类
package com.jcmxmon.utils;
le.gson.Gson;
import com.qiniumon.QiniuException;
import com.qiniumon.Zone;
import com.qiniu.http.Response;
import com.qiniu.storage.Configuration;
import com.qiniu.storage.UploadManager;
import com.del.DefaultPutRet;
import com.qiniu.util.Auth;
import org.apache.logging.log4j.LogManager;
import org.apache.logging.log4j.Logger;
import java.io.FileInputStream;
import java.URLEncoder;
import java.time.LocalDateTime;
import java.time.ZoneOffset;
public class QiNiuUtil {
static Logger logger = Logger(LogManager.ROOT_LOGGER_NAME);
public static final String accessKey = "";//公钥
public static final String secretKey = "";//秘钥
public static final String bucket = "";//空间名
public static final String path = "";//加速域名
public static String uploadToken(FileInputStream file, String key) {
Configuration cfg = new ion0());//华东地区
UploadManager uploadManager = new UploadManager(cfg);
logger.info("path=" + path);
try {
Auth auth = ate(accessKey, secretKey);
Auth auth = ate(accessKey, secretKey);
String upToken = auth.uploadToken(bucket);
System.out.println("token:"+upToken);
//初始化时区对象，北京时间是UTC+8，所以⼊参为8
ZoneOffset zoneOffset=ZoneOffset.ofHours(8);
//初始化LocalDateTime对象
LocalDateTime w();
//获取LocalDateTime对象对应时区的Unix时间戳
System.out.EpochSecond(zoneOffset));
Long e = EpochSecond(zoneOffset);
try {
Response response = uploadManager.put(file, key, upToken, null, null);
/
/解析上传成功的结果
//DefaultPutRet putRet = JSON.parseObject(response.bodyString(), DefaultPutRet.class);
DefaultPutRet putRet = new Gson().fromJson(response.bodyString(), DefaultPutRet.class);
logger.info("key:" + putRet.key);
String encodedFileName = de(putRet.key, "utf-8");
//获取下载地址
/*String finalUrl1 = path+"/"+putRet.key;*/忘忧草研究所隐藏人口
String finalUrl = String.format("%s/%s", path, encodedFileName);//七⽜云公有空间
String finalUrl1 = auth.privateDownloadUrl(finalUrl,e);//七⽜云私有空间路径访问需给路径授权
logger.info("访问地址:" + finalUrl1);
return finalUrl1;
} catch (QiniuException ex) {
Response r = ex.response;
try {
} catch (QiniuException ex2) {
//ignore
}
}
} catch (Exception e) {
e.printStackTrace();
}
return "";
}
/**⽣成Token*/
public static String getToken() {
Auth auth = ate(accessKey, secretKey);
String upToken = auth.uploadToken(bucket);
return upToken;
}
}
⽣成token
/
/七⽜Token
@GetMapping("/gettoken")
@ResponseBody
public Map<String,Object> uptoken(){
Map<String,Object> resultMap = new HashMap<>();
String token = Token();
resultMap.put("uptoken",token);
return resultMap;
}
2、编写前端代码：
导⼊JS⽂件（这⾥我就不贴代码了，通过七⽜云存储⽰例F12就可以看到对应的JS和css，拷贝到⾃⼰的项⽬⾥就可以了）
这是我整理后放到项⽬⾥的js⽬录
页⾯引⼊JS⽂件
<script th:src="@{/js/jquery.min.js}"></script>
<script th:src="@{/js/qiniu/ui.js}"></script>
<script th:src="@{/js/qiniu/qiniu.min.js}"></script>
<script th:src="@{/js/qiniu/highlight.js}"></script>
<script th:src="@{/js/qiniu/main.js}"></script>
<script th:src="@{/js/bootstrap.min.js}"></script>
<script type="text/javascript">hljs.initHighlightingOnLoad();</script>引⼊css样式
<link th:href="@{/css/main.css}" rel="stylesheet"/>
Html页⾯上传视频按钮
<div class="form-group">
<label class="col-sm-3 control-label">视频⽂件：</label>
<div class="col-sm-8">
<div class="tab-content">
<div role="tabpanel" class="tab-pane fade in active" id="demo" aria-labelledby="demo-tab">
<div class="row" >
<div class="col-md-12">
<div id="container">
<a class="layui-btn" id="pickfiles" href="#" >
<i class="fa fa-cloud-upload"></i>
<span>选择⽂件</span>
</a>
<span class="lbl col-xs-10" >
<span class="red">请上传800M以内的MP4⽂件</span>
</span>
</div>
<button type="button" class="layui-btn" id="videoRevoke" >
<i class="fa fa-undo"></i>撤销视频
</button>
</div>
<div id="success" class="col-md-12">
<div class="alert-success">
队列全部⽂件处理完毕
</div>
</div>
<div class="col-md-12" >
<table id="uploadInfo" class="table table-striped table-hover text-left" > <thead>
<tr>
<th class="col-md-4">Filename</th>
<th class="col-md-2">Size</th>
<th class="col-md-6">Detail</th>
</tr>shell脚本循环调用存储过程
</thead>
<tbody id="fsUploadProgress">
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
JavaScript编写
/*撤销视频*/
$('#videoRevoke').bind('click',function(){
$("#container").css("display","block");
$('#success').css("display","none");
$('#videoRevoke').css("display","none");
$('#video_url').remove();
$('#fsUploadProgress>tr').remove();
})
通过隐藏标签获取上传视频路径传到后端保存到数据库
var resourcesUrl = ElementById("video_url").src;
到此上传视频的功能就完成了。
图⽚上传
下⾯贴上上传图⽚的⽅法（因为图⽚⽐较⼩，对速度影响不⼤，这⾥我是通过后端上传的图⽚）1、前端代码编写：
Html页⾯上传图⽚按钮
<div class="form-group">
<label class="col-sm-3 control-label">封⾯：</label>
<div class="col-sm-8">
<div class="layui-form-item" id="imageUp">
<input name="image_url" id="image_url" autocomplete="off" class="layui-input" type="hidden">
<button type="button" class="layui-btn" id="imageupload">
<i class="fa fa-cloud-upload"></i>上传图⽚
怎么给自己的代码加密</button>
<button type="button" class="layui-btn" id="imageRevoke">
<i class="fa fa-undo"></i>撤销图⽚
</button>
html模板大全网
<input class="layui-upload-file" type="file" accept="images" name="file">
<span class="lbl col-xs-10" >
<span class="red">请上传尺⼨为750*440的图⽚！</span>
</span>
<p id="demoText1"></p>
</div>
<div class="layui-upload-list" id="previewBox">
<div class="imgBox">
<img class="layui-upload-img" id="imgs">
</div>
</div>
jquery下载文件进度条
</div>
</div>
JavaScript编写
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论