架构师_程序员

 找回密码
 注册[Register]

QQ登录

只需一步,快速开始

查看: 233|回复: 0

[JavaScript] javascript 实现图片资源(base64,blob)的互转,及上传到服务器

[复制链接]
发表于 2019-3-14 11:13:46
1. 将本地上传的图片转化为 dataUrl供图片预览,可以使用
URL.createObjectURL(Blob/File) 或者 FileReader,参考 https://www.cnblogs.com/zhangdiIT/p/7895903.html

2.将本地图片转化为base64,可使用FileReader
3. 将网络上的图片转化为base64, 可使用canvas.toDataURL()
4.将base 64转成blob,可使用canvas.toDataURL()
5. 将base64图片提交到服务器

  1. /**  
  2. * 通过ueditor将base64图片提交到服务器,依赖jquery.
  3. * var base64str = "data:image/png;base64,/9j/4AAQSkZJRg................ABAQAAAQABAAD/2wBDAAMCAgICOK//Z";
  4. * sumitImageFile(base64str).then(function (data) {
  5. *     console.log(data);
  6. * });
  7. */
  8. function sumitImageFile(base64Codes) {

  9.     var convertBase64UrlToBlob = function (urlData) {
  10.         var arr = urlData.split(',');
  11.         var mime = arr[0].match(/:(.*?);/)[1];
  12.         var bytes = window.atob(urlData.split(',')[1]);        //去掉url的头,并转换为byte  

  13.         //处理异常,将ascii码小于0的转换为大于0  
  14.         var ab = new ArrayBuffer(bytes.length);
  15.         var ia = new Uint8Array(ab);
  16.         for (var i = 0; i < bytes.length; i++) {
  17.             ia[i] = bytes.charCodeAt(i);
  18.         }

  19.         return new Blob([ab], { type: mime });
  20.     };

  21.     var getFileExt = function (urlData) {
  22.         var arr = urlData.split(',');
  23.         var mime = arr[0].match(/:(.*?);/)[1];
  24.         return mime.replace("image/", "");
  25.     };

  26.     var deferred = $.Deferred();

  27.     var form = document.forms[0];

  28.     //var formData = new FormData(form);   //这里连带form里的其他参数也一起提交了,如果不需要提交其他参数可以直接FormData无参数的构造函数  
  29.     var formData = new FormData();

  30.     var fileExt = getFileExt(base64Codes);

  31.     //convertBase64UrlToBlob函数是将base64编码转换为Blob  
  32.     formData.append("upfile", convertBase64UrlToBlob(base64Codes), "file_" + Date.parse(new Date()) + "." + fileExt);  //append函数的第一个参数是后台获取数据的参数名,和html标签的input的name属性功能相同  

  33.     //ajax 提交form  
  34.     $.ajax({
  35.         url: window.location.origin + '/article/ueditor/asp/controller.asp?action=uploadimage',
  36.         type: "POST",
  37.         data: formData,
  38.         //dataType: "text",
  39.         processData: false,         // 告诉jQuery不要去处理发送的数据  
  40.         contentType: false,        // 告诉jQuery不要去设置Content-Type请求头  

  41.         success: function (data) {
  42.             //console.log(data);
  43.             if (data) {
  44.                 data = JSON.parse(data);
  45.                 if (data.state == "SUCCESS") {
  46.                     deferred.resolve(window.location.origin + data.url);
  47.                 }
  48.                 else {
  49.                     deferred.reject("error");
  50.                 }
  51.             }

  52.             else {
  53.                 deferred.reject("error");
  54.             }

  55.             //window.location.href = "${ctx}" + data;
  56.         },
  57.         xhr: function () {            //在jquery函数中直接使用ajax的XMLHttpRequest对象  
  58.             var xhr = new XMLHttpRequest();

  59.             xhr.upload.addEventListener("progress", function (evt) {
  60.                 if (evt.lengthComputable) {
  61.                     var percentComplete = Math.round(evt.loaded * 100 / evt.total);
  62.                     console.log("正在提交." + percentComplete.toString() + '%');        //在控制台打印上传进度  
  63.                 }
  64.             }, false);

  65.             return xhr;
  66.         }

  67.     });

  68.     return deferred.promise();
  69. }
复制代码






上一篇:React16+Redux 实战企业级大众点评WebApp
下一篇:使用jQuery清空file文件域的方法
码农网,只发表在实践过程中,遇到的技术难题,不误导他人。
您需要登录后才可以回帖 登录 | 注册[Register]

本版积分规则

免责声明:
码农网所发布的一切软件、编程资料或者文章仅限用于学习和研究目的;不得将上述内容用于商业或者非法用途,否则,一切后果请用户自负。本站信息来自网络,版权争议与本站无关。您必须在下载后的24个小时之内,从您的电脑中彻底删除上述内容。如果您喜欢该程序,请支持正版软件,购买注册,得到更好的正版服务。

Mail To:help@itsvse.com

QQ|Archiver|手机版|小黑屋|架构师 ( 鲁ICP备14021824号-2 )|网站地图

GMT+8, 2019-5-27 07:50

Powered by Discuz! X3.4

© 2001-2014 Comsenz Inc.

快速回复 返回顶部 返回列表