这里提一点,base64和blob一般可以用来上传之前的预览
blob到底是个什么,可以直接传给后端吗
files文件列表的文件通过createObjectURL弄出来的是临时blob路径不是blob对象,不要误解,一般用来图片预览
base64通过new Blob弄出来的是真正的blob对象,而blob放入数组或者对象,再放到ajaxdata里,显示的是空,传不过去,如图
还是需要通过FormData,添加键值对放过去
所以说到底想要传blob过去,首先需要FileReader读成base64,然后通过FormData格式化数据,然后传过去
如图
前端代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<img src="./resource/Koala.jpg" id="imga"><br><br><br>
<input type="file" id="inputa" multiple="multiple"><br><br><br>
</body>
</html>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>
<script>
// 1.获取图片，文件上传，按钮的dom对象
var imga = document.getElementById('imga');
var inputa = document.getElementById('inputa');
// 3.当点击button时，调用ajax上传图片
// inputa.onchange = function () {
// var blob = URL.createObjectURL(this.files[0]);
// imga.src = blob;
// console.log(blob);
// imga.onload = function (e) {
// URL.revokeObjectURL(this.src); // 释放createObjectURL创建的对象##,最好主动释放,不占内存
// }
// }
// 把base64转为blob对象
function dataURItoBlob(base64Data) {
//console.log(base64Data);//data:image/png;base64,
var byteString;
if (base64Data.split(',')[0].indexOf('base64') >= 0)
byteString = atob(base64Data.split(',')[1]);//base64 解码
else {
byteString = unescape(base64Data.split(',')[1]);
}
var mimeString = base64Data.split(',')[0].split(':')[1].split(';')[0];//mime类型 -- image/png
// var arrayBuffer = new ArrayBuffer(byteString.length); //创建缓冲数组
// var ia = new Uint8Array(arrayBuffer);//创建视图
var ia = new Uint8Array(byteString.length);//创建视图
for (var i = 0; i < byteString.length; i++) {
ia[i] = byteString.charCodeAt(i);
}
var blob = new Blob([ia], {
type: mimeString
});
return blob;
}
inputa.onchange = function () {
let blob = URL.createObjectURL(this.files[0])
console.log(blob)//临时blob路径,不是blob对象,不要误解,一般用来图片预览
console.dir(blob)
let reader = new FileReader()
reader.readAsDataURL(this.files[0])
reader.onload = function (e) {
let sr = dataURItoBlob(e.target.result)//转换成的blob对象
console.log(sr)
let arr = []
arr.push(sr)
let fd = new FormData()
fd.append('file', sr)
$.ajax({
url: "http://localhost/upload",
type: "POST",
dataType: "json",
// data: JSON.stringify(arr),
data: fd,
contentType: false,
processData: false,
success(res) {
console.log(res)
},
error() {
}
})
}
}
// createObjectURL的兼容性处理
// function getObjectURL(file) {
// var url = null
// if (window.createObjectURL != undefined) { // basic
// url = window.createObjectURL(file)
// } else if (window.URL != undefined) { // mozilla(firefox)
// url = window.URL.createObjectURL(file)
// } else if (window.webkitURL != undefined) { // webkit or chrome
// url = window.webkitURL.createObjectURL(file)
// }
// return url;
// }
</script>后端代码
因为也是二进制raw文件,所以也可以通过multiparty处理,存储
关于multiparty 可以看看这篇博客
https://blog.csdn.net/weixin_34249367/article/details/86253509
router.post('/upload', function (req, res) {
console.log('req', req.body, req.request);
let form = new multiparty.Form({ uploadDir: './public/img' })
form.parse(req, function (err, filed, files) {
console.log('filed', filed)
console.log('files', files)
for (const key in files) {
console.log(key, files[key])
fs.renameSync(files[key][0].path, `./public/img/${key}`, function (err) {
console.log('object')
if (err) {
console.log('rename error: ' + err);
} else {
console.log('rename ok');
}
});
}
// let dataBuffer = new Buffer(filed, 'filed');
// console.log(dataBuffer)
})
res.send({ img: 'imgsrc' })
})
版权声明：本文为qq_41430522原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。