废话不多说，直接看代码吧
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);
}
});
}
}
}
好了，就是这个过程，接下来的就交给后端的同学处理了。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
您可能感兴趣的文章:- vuejs开发组件分享之H5图片上传、压缩及拍照旋转的问题处理
- H5上传本地图片并预览功能
- H5手机端多文件上传预览插件
- 移动端利用H5实现压缩图片上传功能
- vue中用H5实现文件上传的方法实例代码
- H5移动端图片压缩上传开发流程
- H5图片压缩与上传实例
- 利用H5特性FormData实现不刷新文件上传
- H5实现手机拍照和选择上传功能
