H5上传图片
前端事件我碰见了最常见的评论上传(实现预览,上传,删除)功能,就整理了一下代码。弄了一个相对比较见简单的功能 。
<input type="file" accept="image/*" capture="camera" @change='changeimage($event)'> //accept="image/*" capture="camera" 这两处是移动端唤起直接照相操作 (可忽略)
新增操作(把获取的img路径存储起来) 再向服务器上传换取线上路径
changeimage(event) { //新增操作
var inmgbase64;
this.getObjectURL(event.target.files[0]).then((res) => {
inmgbase64 = res;
let myformdata = new FormData()
myformdata.set('data', inmgbase64); //看后太是否需要formdata
//请求接口
})
},
getObjectURL(file) {
return new Promise((resolve) => {
var reader = new FileReader();
reader.readAsDataURL(file);
reader.onload = function(e) {
resolve(e.target.result);
}
});
}
效果图