vue手机端图片上传组件

由于作者并非专业前台开发人员，是一位后端开发者，组件也是与我们前台人员查询资料合并的；由于时间过长已也没保存那些资料博客，如有不妥处请联系我；QQ:1836302994 。

这是作者开发的时候遇到的问题，希望可以帮到你。此组件在电脑界面测试时，会出现时灵时不灵的情况，但在手机上使用时无此情况发生。

组件中使用了BASE64编码 后台需要BASE64解码

<template>

    <div id="imgUploader">

        <div class="file-list">

          <!-- <section class="file-item draggable-item" v-for="(item,index) in files" :key="index"> -->

            <div class="thumbnails my-gallery">

                <figure itemprop="associatedMedia" itemscope  class="thumbnail" v-for="(item,index) in files" :key="index">

                    <a :href="item.src" itemprop="contentUrl" data-size="400x400" class="img-wrapper">

                        <img :src="item.src" itemprop="thumbnail"  />

                        <!-- <div :style="{background:'url('+item.src+')  no-repeat',  backgroundPosition:'center center',backgroundSize:'cover'}" style="width:100%;height:110px;" itemprop="thumbnail"></div> -->

                    </a>

                    <span class="file-remove" @click="remove(index,$event)">×</span>

                </figure>

                <section class="thumbnail" v-if="this.files.length < 9">

                  <div class="add">

                    <span>+</span>

                    <!-- accept="image/jpeg,image/png" capture="camera" -->

                    <input type="file" @change="selectImgs()" multiple accept="image/*" ref="file">

                  </div>

                </section>

            </div>

            <!-- <img :src="item.src" alt="" ondragstart="return false;">

            <span class="file-remove" @click="remove(index)">×</span> -->

          <!-- </section> -->

          <!-- PhotoSwipe插件需要的元素， 一定要有类名 pswp -->

          <div class="pswp" tabindex="-1" role="dialog" aria-hidden="true">

              <div class="pswp__bg"></div>

              <div class="pswp__scroll-wrap">

                  <div class="pswp__container">

                      <div class="pswp__item"></div>

                      <div class="pswp__item"></div>

                      <div class="pswp__item"></div>

                  </div>

                  <!-- 预览区域顶部的默认UI，可以修改 -->

                  <div class="pswp__ui pswp__ui--hidden">

                      <div class="pswp__top-bar">

                          <!--  与图片相关的操作 -->

                          <div class="pswp__counter"></div>

                          <button class="pswp__button pswp__button--close" title="Close (Esc)"></button>

                          <!--将分享按钮去掉 -->

                          <!-- <button class="pswp__button pswp__button--share" title="Share"></button>

                          <button class="pswp__button pswp__button--fs" title="Toggle fullscreen"></button>

                          <button class=