本文共 702 字，大约阅读时间需要 2 分钟。

最近刚完成一个活动，其中有涉及到图片上传的，在这说下自己体会。

主要用到的还是H5的新的API: FormData

结构：

这里为了大家看着方便，我把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,可以查阅: