最近在项目中有这么一个需求,就是上传一个视频文件,然后要获取视频文件的第一帧图片,这个可以通过canvas获取得到,得到的是一个dataURL,之后还要将这个图片上传到云,这个时候如何操作就不清楚了,于是乎,google一番,总结如下:

  1. 将dataURL转成Blob
  2. 利用formData
  3. 异步上传
 
function b64toBlob(b64Data, contentType='', sliceSize=512) {
const byteCharacters = atob(b64Data);
const byteArrays = []; for (let offset = 0; offset < byteCharacters.length; offset += sliceSize) {
const slice = byteCharacters.slice(offset, offset + sliceSize); const byteNumbers = new Array(slice.length);
for (let i = 0; i < slice.length; i++) {
byteNumbers[i] = slice.charCodeAt(i);
} const byteArray = new Uint8Array(byteNumbers); byteArrays.push(byteArray);
} const blob = new Blob(byteArrays, {type: contentType});
return blob;
}
// dataURL to blob

// 假设一个dataURL
const ImageURL = "转成Base64的变量"; // Split the base64 string in data and contentType
const block = ImageURL.split(";"); // Get the content type of the image
const contentType = block[0].split(":")[1];// In this case "image/jpeg" // get the real base64 content of the file
const realData = block[1].split(",")[1];// In this case "R0lGODlhPQBEAPeoAJosM...." // Convert it to a blob to upload
var blob = b64toBlob(realData, contentType);
// new a formData const formData = new FormData();
formData.append('blob', blob);
// upload $.ajax({
url:url,
data: formData
type:"POST",
contentType:false,
processData:false,
error:function(err){
},
success:function(data){
},
});

后台接受代码

@RequestMapping(value = "/uploadImage")
@ResponseBody
public ApiMessage uploadImage(MultipartFile file, HttpServletRequest request) {
  try {
    //自定义处理图片保存方法
    return ApiMessage.succeed(Utils.getImageUrl2(file));
  } catch (Exception e) {
    return ApiMessage.error();
  }
}

最新文章

  1. iOS如何彻底避免数组越界
  2. 调用Ajax返回500错误的解决方法
  3. SpringMVC控制器设值原理分析(ModelAndView的值通过HttpServletRequest直接取到的原因)
  4. Good Sentences
  5. ecshop的smarty库还原成smarty原生库方法
  6. linux命令:Linux命令大全
  7. 【源代码】基于Android和蓝牙的单片机温度採集系统
  8. 在Mac电脑上为Dash制作docSet文档
  9. Laravel路由
  10. 解决-Django使用filter过滤时间,无法获取月份的问题
  11. webbrowser设置为相应的IE版本
  12. GNU make 汇总
  13. zabbix简易安装指南
  14. myBatis 3.2.7 如何打印 sql
  15. MySql排名查询
  16. photoshop,钢笔工具锚点类型
  17. Deal with relational data using libFM with blocks
  18. (转)深入浅出K-Means算法
  19. 【JSP】jsp报错:Syntax error, insert &quot;}&quot; to complete MethodBody
  20. 20155229 实验一《Java开发环境的熟悉》实验报告

热门文章

  1. hdu 1159 Common Subsequence(LCS)
  2. VC6.0开发OCX按钮控件
  3. 为TextView增加onclick
  4. 个人发现的createProcess调用漏洞
  5. 微信证书 javax.net.ssl.SSLException: java.lang.RuntimeException: Unexpected error: java.security.InvalidAlgorithmParameterException: the trustAnchors parameter must be non-empty
  6. mac和windows自动清理内存工具
  7. AJAX原生JavaScript写法
  8. CountDownLatch的简单使用
  9. [EffectiveC++]item34:区分接口继承和实现继承
  10. spring集成ehcache本地缓存