你是不是好奇现在手机照相能好多，那怎么把拍好的图弄到电脑或者别的设备上看？其实用H5移动开发上传多张Base64格式的图片到服务器，没你想得那么复杂，我这就给你用大白话说。
上传组件的选择
首先，选个靠谱的上传插件就是关键！这个其实就跟买衣服似的，要选合适的才行。现在网上有好多这样的插件像是jQueryFileUpload、Dropzone.js啥的。它们都能让你更好地上传图片和整理文件！选定好上传插件后，咱们就可以开启下一步了。
展示添加的图片
选好了上传组件后，就得把挑选好的图片弄上去了。这个步骤挺关键的，因为只能看到图片才知道传对了没。通常，咱们可以用图片列表这玩意儿，图片下面还可以配个删除按钮，方便咱删除不要的图片。
获取图片并上传到服务器
图片放完了，现在就是关键时刻——往服务器传图！你可能觉得像Ajax这种sofisticated的东西会让人望而却步，buttrustme，其实超级easy！我们只需把图片变成Base64格式，然后用Ajax发出去给服务器，等它收到并存好后，我们就能在任何地方看到它们！
Base64格式是什么
你可能在想，什么是Base64?很简单，就是把那些复杂的二进制数字变成可爱的文字。上传图片时，要是直接交上去，那可是有够麻烦的！因此，咱们得先把它们变成Base64的方式，然后才能顺利地传上服务器！这样一来，不仅上传变得容易了，而且还能缩减图片尺寸，上传起来嗖嗖的快！
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]);
}
}
}
Ajax技术简介
Ajax就是个好东西！它能帮我们和服务器悄悄地更新网页局部内容，不对整个页面重载。用这个技术上传图片，不仅能使网页更顺畅，也提高了用户体验。还有，万一遇到上传出错啥的，Ajax都能帮我们处理，就像应对网路问题、服务器故障这些情况一样稳当可靠。
上传过程中的注意事项
上传照片时有些关键点得留心，比如说要看照片大小别超了网站设定的范围不然传不了；再者，记得压缩下照片减小体积以提升上传速度；最后，别忘了检查下上传的照片是否无毒无害！
后端同学的工作
前端搞定！下一步就交给后端伙伴~他们要搞定咱们传上去的图片，放到服务器里，然后给大家看图的接口。这事儿跟咱们前端有点儿距离，不过还挺关键，毕竟后端搞得定，我们才能从别的地方看到图。
//单张图片上传
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);
}
});
}
}
}
总结与展望
搞定！跟着刚才说的那些步骤，咱已经熟练地把好几张Base64编码过的图像传到了服务器上。这个过程确实挺麻烦的，但别急，只要咱们耐心点，肯定没问题的。以后，说不定随着科技进步，传图片的方式会更简便，那样的话大家就更开心！
评论0