H5移动开发Ajax上传多张Base64格式图片到服务器
- 作者: 请叫我李二哈丶
- 来源: 51数据库
- 2021-09-01
废话不多说,直接看代码吧
1、上传组件
<div class="imgbox"> <img class="goodsimg" src="../../assets/addimg.png"> <input id="file" type="file" class="fileupload" accept="image/*" multiple capture="camera" @change="viewimg()"/> </div>
2、展示添加上的图片
viewimg($event) {
//获取当前的input标签
var currentobj = event.currenttarget;
//找到要预览的图片img标签,亦可动态生成
var img = currentobj.parentnode.children[0];
setimagepreview(currentobj, img);
function setimagepreview(docobj, imgobjpreview) {
if (docobj.files && docobj.files[0]) {
imgobjpreview.style.display = 'block';
imgobjpreview.src = window.url.createobjecturl(docobj.files[0]);
}
}
}
3、获取图片并上传到服务器
//单张图片上传
var inputs = $("input.fileupload");
for (var i = 0; i < inputs.length; i++) {
//图片转base64上传
var file = inputs[i].files;
if (file[0]) {
var reader = new filereader();
reader.readasdataurl(file[0]);
reader.onload = function(e) {
var event = this;
console.log(event.result);
$.ajax({
type: 'post',
url: 'http://10.145.0.05/goods/addgoodsbase64',
datatype: "json",
data: {
"base64": event.result,
},
success: function(data) {
console.log(data);
}
});
}
}
}
好了,就是这个过程,接下来的就交给后端的同学处理了。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
推荐阅读
