Angular2仿照微信UI实现9张图片上传和预览的示例代码

本来在看vue.js没多久，最近在赶一个项目用回了angular2，还是先把ng2搞定吧，毕竟还不怎么懂。这两天我做的是用户表单数据的提交，大部分很简单，双向绑定就完事了，主要还是沟通的问题哈哈哈哈，虽然沟通的时候有点暴躁想甩锅，不过出了门还是高高兴兴吃饭高高兴兴回去。

好了切入问题。这几天做得最久的是仿照微信UI做的图片上传/显示缩略图/预览/删除功能，要求图片1--9张。下面来记录下如何实现微信的图片预览/删除功能。

样式--weui.css

样式用的是微信官方ui，weui.min.css（生产环境下建议使用此压缩版）。

下载地址weui.css/weui.min.css。

样例--weui.io

微信官方自带了demo: weui.io。

主要步骤

在正式进入各个小功能的解说前，先上官方demo->weui.io查看图片上传组件的样式以及源代码。

官方ui显示如下，图片上传的ui在Uploader中。

图片上传的源码从审查元素中可获取，如下所示：

组件Gallery来使用。

<div class="weui-cells weui-cells_form"&gt;
  <div class="weui-cell"&gt;
    <div class="weui-cell__bd"&gt;
      <div class="weui-uploader"&gt;
        <div class="weui-uploader__hd"&gt;
          <p class="weui-uploader__title"&gt;图片上传</p >
          <div class="weui-uploader__info"&gt;0/2</div>
        </div>
        <div class="weui-uploader__bd"&gt;
          <ul class="weui-uploader__files" id="uploaderFiles"&gt;
            <li class="weui-uploader__file" style="background-image:url(./images/pic_160.png)"&gt;</li>
            <li class="weui-uploader__file" style="background-image:url(./images/pic_160.png)"&gt;</li>
            <li class="weui-uploader__file" style="background-image:url(./images/pic_160.png)"&gt;</li>
            <li class="weui-uploader__file weui-uploader__file_status" style="background-image:url(./images/pic_160.png)"&gt;
              <div class="weui-uploader__file-content"&gt;
                <i class="weui-icon-warn"&gt;</i>
              </div>
            </li>
            <li class="weui-uploader__file weui-uploader__file_status" style="background-image:url(./images/pic_160.png)"&gt;
              <div class="weui-uploader__file-content"&gt;50%</div>
            </li>
          </ul>
          <div class="weui-uploader__input-box"&gt;
            <input id="uploaderInput" class="weui-uploader__input" type="file" accept="image/*" multiple=""&gt;
          </div>
        </div>
      </div>
    </div>
  </div>
</div>