下面代码可以通过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();
}