版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/sinat_40257787/article/details/79123886
最近刚完成一个活动,其中有涉及到图片上传的,在这说下自己体会。
主要用到的还是H5的新的API: FormData
结构:
<style>
#app {
position: relative;
width: 100px;
height: 100px;
background: #f1f1f1;
}
img {
display: block;
width: 100px;
height: 100px;
}
input {
position: absolute;
top: 0;
right: 0;
width: 100px;
height: 100px;
border: 0;
/*background: rgba(0,0,0,0);*/
/*opacity: 0;*/
z-index: 99;
}
</style>
</head>
<body>
<div id="app">
<div>
<img :src="userPhoto1" alt="">
<input type="file" id="photo1" @change="onUpLoad($event,'photo1')">
</div>
</div>
这里为了大家看着方便,我把input的opacity设置为显示。在项目中是隐藏的。demo的效果是这样的,点击框内任何地方,唤起本地文件选择框:
然后要做的就是上传图片信息获取图片链接了:
onUpLoad: function (e, pho) {
let self = this;
let formData = new FormData();
formData.append('file', e.target.files[0]); //e.target相当于this,直接指的是目标DOM. e.target.files[0] 为上传图片的信息;
//这块可以加上loading图片
$.post('上传图片的地址', formData,function(data){
self.userPhoto1 = data; //img图片回显,也就是图片链接赋值给img的src
})
}
整个流程大致是:上传图片>生成图片链接>链接值赋值给img的src。
对了,这个用的是vue,jquery
初次记录,也是记录自己当初开始时的不知所措,缺漏之处,还望提出……
关于FormData,可以查阅:点击打开链接