版权声明：本文为博主原创文章，未经博主允许不得转载。 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,可以查阅:点击打开链接