可以用webuploader插件，上传成功后，服务端返回图片地址，客户端<img>显示图片
X关闭按钮这个得自己用css样式控制，点击X后，服务端删除图片，然后前端移除该X掉的图片
1 页面HTML内容
2 获取input[file]元素
3 对获取的file元素操作，也就是操作fileReader属性
1：Blob
2: File
3: FileList
4: FileReader
FileList ：
这里，默认状态下选择文件 每次files属性上FileList对象里只有一个file文件。
file对象中包含了name 文件名size type 文件类型lastModified 最后修改时间；
FileReader：异步读取本地文件内容；包括File 和Blob ；
创建FileReader对象读取file文件
关于fileReader的几个属性：
FileReader.error 只读一个 DOMException 代表在读取文件中出现的错误。 FileReader.readyState 只读一个数字表明的状态FileReader。这是以下之一：
FileReader.result 只读文件的内容。该属性仅在读取操作完成后才有效，并且数据的格式取决于使用哪种方法来启动读取操作。
fileReader的几个事件处理程序：
1 . FileReader.onbort:在读取操作中止时触发。
2 . FileReader.onerror:在读取操作遇到错误时触发。
3 . FileReader.onload:在读取操作成功完成时触发。
4 . FileReader.onloadstart:在开始阅读时触发。
5 . FileReader.onloadend:无论是否成功 只要读取操作完成都会触发。
6 . FileReader.onprogress:阅读Blob内容时触发。
FileReader的方法：
1 . FileReader.abort()中止读取操作
2 . FileReader.readAsArrayBuffer()完成时result属性包含ArrayBuffer表示文件数据
3 . FileReader.readAsBinaryString()完成时result属性将包含来自文件的原始二进制数据作为字符串。
4 . FileReader.readAsDataURL()完成时result属性包含data：表示文本数据的URL；
5 . FileReader.readAsText()完成时result属性包含文本的内容作为文本字符串。
上传图片在项目中属于一个常见场景。在小程序中同样遇到了这样的需求。如何去解决呢？
利用wx.chooseImage()，wx.uploadFile()两个接口即可完成小程序的批量上传图片。
wx.chooseImage()
主要参数：
count：控制选择图片张数至多9张；
sizeType： 选择图片尺寸（压缩：compressed or 原图：original）；
sourceType： 图片来源（相册：album or 拍照：camera）
wx.uploadFile()
主要参数：
url： 图片上传接口；
filePath： 上传资源路径（string）
name: 文件对应的 key,(与后台接口约定的key)
util.js
index.js
[图片上传失败...(image-353ab7-1553483695861)]
[图片上传失败...(image-a789e3-1553483695861)]
a, 批量封装函数中对上传文件大小的监控
b, 加上uploadTask可以实现上传进度的监控
...
