下面代码可以通过Ajax请求,直接向一个正常的文件上传接口提交请求,上传已经base64编码的图片文件。
直接贴代码:
function ajaxSubmitImageFile(base64Codes) { let convertBase64UrlToBlob = function(urlData) { let arr = urlData.split(','); let mime = arr[0].match(/:(.*?);/)[1]; let bytes = window.atob(urlData.split(',')[1]); // 去掉url的头,并转换为byte // 处理异常,将ascii码小于0的转换为大于0 let ab = new ArrayBuffer(bytes.length); let ia = new Uint8Array(ab); for (let i = 0; i < bytes.length; i++) { ia[i] = bytes.charCodeAt(i); } return new Blob([ab], { type: mime }); }; let getFileExt = function(urlData) { let arr = urlData.split(','); let mime = arr[0].match(/:(.*?);/)[1]; return mime.replace('image/', ''); }; let deferred = $.Deferred(); // let form = document.forms[0]; // var formData = new FormData(form); // 这里连带form里的其他参数也一起提交了,如果不需要提交其他参数可以直接FormData无参数的构造函数 let formData = new FormData(); let fileExt = getFileExt(base64Codes); // convertBase64UrlToBlob函数是将base64编码转换为Blob formData.append( 'upfile', convertBase64UrlToBlob(base64Codes), 'file_' + Date.parse(new Date()) + '.' + fileExt ); // append函数的第一个参数是后台获取数据的参数名,和html标签的input的name属性功能相同 // ajax 提交form $.ajax({ url: window.location.origin + '/article/ueditor/asp/controller.asp?action=uploadimage', type: 'POST', data: formData, // dataType: "text", processData: false, // 告诉jQuery不要去处理发送的数据 contentType: false, // 告诉jQuery不要去设置Content-Type请求头 success: function(data) { // console.log(data); if (data) { data = JSON.parse(data); if (data.state === 'SUCCESS') { deferred.resolve(window.location.origin + data.url); } else { deferred.reject('error'); } } else { deferred.reject('error'); } // window.location.href = "${ctx}" + data; }, xhr: function() { // 在jquery函数中直接使用ajax的XMLHttpRequest对象 let xhr = new XMLHttpRequest(); xhr.upload.addEventListener( 'progress', function(evt) { if (evt.lengthComputable) { let percentComplete = Math.round( (evt.loaded * 100) / evt.total ); window.console.log( '正在提交.' + percentComplete.toString() + '%' ); // 在控制台打印上传进度 } }, false ); return xhr; } }); return deferred.promise(); }