图片上传代码转换成Base64
代码语言：javascript复制<input type="file" name="upimg" id='upimg'>
<script>
window.onload = () => {
let upDOM = document.getElementById('upimg')
upDOM.addEventListener('change', (e) => {
console.log(e)
console.log(upDOM.files[0])
var reader = new FileReader();
reader.readAsDataURL(upDOM.files[0]);
reader.onload = function (ie) {
var Base64Val = this.result;
console.log('Base64')
console.log(Base64Val)
}
})
}
</script>将Base64格式的图片转换成file提交给后端
代码语言：javascript复制 // Base64Val base64格式的图片
// fileName 生成文件的名字 （可自定义）
var bytes=window.atob(Base64Val.split(',')[1]);
var ab = new ArrayBuffer(bytes.length);
var ia = new Uint8Array(ab);
for (var i = 0; i < bytes.length; i ) {
ia[i] = bytes.charCodeAt(i);
}
this[fileName] = new File( [ab] , fileName , {type : 'image/png'})
OR
/**
* @param base64Codes
* 图片的base64编码
*/
function sumitImageFile(base64Codes){
var form=document.forms[0];
var formData = new FormData(form); //这里连带form里的其他参数也一起提交了,如果不需要提交其他参数可以直接FormData无参数的构造函数
//convertBase64UrlToBlob函数是将base64编码转换为Blob
formData.append("imageName",convertBase64UrlToBlob(base64Codes)); //append函数的第一个参数是后台获取数据的参数名,和html标签的input的name属性功能相同
//ajax 提交form
$.ajax({
url : form.action,
type : "POST",
data : formData,
dataType:"text",
processData : false, // 告诉jQuery不要去处理发送的数据
contentType : false, // 告诉jQuery不要去设置Content-Type请求头 更多内容请见原文，原文转载自：https://blog.csdn.net/weixin_44519496/article/details/120055802
