原生js实现图片上传功能

在项目中用到了原生的上传功能，html5代码如下

        <div class="uploadimg">
          <div  v-for="(item, index) in checkList" :key="index" >
              <image
                class="mask"
                :src="checkList[index]"
                place-holder="imageLoad('person-center-doctor-default.png')"
                @click="picClick(item)"
              ></image>
              <image class="img-cancel" v-if="item" :src="imageLoad('erase',true)" @click="imgCancel(index,'check')"></image>
          </div>
          <image
            class="mask"
            @click="addClick('check')"
            :src="imageLoad('add', true)"
          ></image>
        </div>

列表循环显示的是已经上传的图片，点击功能为添加的预览功能，下面的image标签为相对定位的删除图标，点击可删除对应图片，最下面的image是点击上传图标，点击图标可上传对应图片。
再来看下js代码

    imgCancel(index,type){
         this.checkList.splice(index,1)
    },
     addClick(type) {
      if(type=='check'&&this.checkList.length>8){
        normal.toast("最多上传9张图片");
        return
      }
      if(type=='desc'&&this.miaoShuList.length>8){
        normal.toast("最多上传9张图片");
        return
      }
      this.chooseFile().then((res) => {
        let file = res;
        console.log(res);
        let fileUrl = URL.createObjectURL(file[0]); // 获取文件url
        console.log("输出选择的图片的路径 :", fileUrl, file, this.idCardUrl);
        if (fileUrl.length == 0) {
          return;
        }

        // let imgList = [];
        // imgList.push({
        //   src: file[0].name,
        // });

        let param = new FormData(); // 创建form对象
        param.append("file", file[0], file[0].name); // 通过append向form对象添加数据
        // alertUtil.loading(true, "正在上传中...");
        var cacheUrl = api.UPLOAD_PATIENT_IMAGE + "?token=" + userInfoCache.getUserToken();
        business.req(
          "post",
          cacheUrl,
          param,
          function (resp) {
            // this.portrait = resp.extra;
            if(type=='desc'){
                this.miaoShuList.push(resp.extra);
            }else if(type=='check'){
                this.checkList.push(resp.extra)
            }
            // normal.saveStorage(
            //   cacheKeys.PhotoImageUrl,
            //   this.portrait,
            //   function () {}
            // );
            normal.toast("图片上传成功");
            console.log("this.portrait========", resp.extra);
          }.bind(this),
          function(err){
            console.log(err);
            normal.toast("超时");
          }.bind(this)
        );
      });
    },
    //唤起上传文件
        chooseFile() {
      return new Promise((resolve, reject) => {
        let fileinput = document.createElement("input");
        fileinput.type = "file";
        // fileinput.multiple = true
        fileinput.accept = "image/*";
        fileinput.setAttribute(
          "style",
          "position:fixed;left:-500px;top:-500px;"
        );
        fileinput.addEventListener("change", () => {
          resolve(fileinput.files);
          document.body.removeChild(fileinput);
          if (!fileinput.files || fileinput.files.length === 0)
            reject(new Error("文件选择出错"));
        });
        document.body.appendChild(fileinput);
        fileinput.click();
      });
    },
    //点击进行图片预览
        picClick(item){
            console.log(item);
            let pswpElement = document.querySelectorAll('.pswp')[0];
            let items=[{
                src:item,
                w:200,
                h:200
            }]
                let options = {
                    pinchToClose:true,
                    shareEl:false,
                    tapToToggleControls:false,
                    tapToClose:true,
                    index:0 
                };
                let gallery = new PhotoSwipe( pswpElement, PhotoSwipeUI_Default, items, options);
                gallery.init();
    },

预览功能用的photoswipe插件，采用的cdn引入的方式，在index.html中引入地址如下

    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/photoswipe/4.1.1/photoswipe.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/photoswipe/4.1.1/default-skin/default-skin.min.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/photoswipe/4.1.1/photoswipe.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/photoswipe/4.1.1/photoswipe-ui-default.min.js"></script>

然后在app.vue页面还要加上如下代码

    <div class="pswp" tabindex="-1" role="dialog" aria-hidden="true">
      <!-- Background of PhotoSwipe. 
         It's a separate element as animating opacity is faster than rgba(). -->
      <div class="pswp__bg"></div>

      <!-- Slides wrapper with overflow:hidden. -->
      <div class="pswp__scroll-wrap">
        <!-- Container that holds slides. 
            PhotoSwipe keeps only 3 of them in the DOM to save memory.
            Don't modify these 3 pswp__item elements, data is added later on. -->
        <div class="pswp__container">
          <div class="pswp__item"></div>
          <div class="pswp__item"></div>
          <div class="pswp__item"></div>
        </div>

        <!-- Default (PhotoSwipeUI_Default) interface on top of sliding area. Can be changed. -->
        <div class="pswp__ui pswp__ui--hidden">
          <div class="pswp__top-bar">
            <!--  Controls are self-explanatory. Order can be changed. -->

            <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="pswp__button pswp__button--zoom"
              title="Zoom in/out"
            ></button>

            <!-- Preloader demo https://codepen.io/dimsemenov/pen/yyBWoR -->
            <!-- element will get class pswp__preloader--active when preloader is running -->
            <div class="pswp__preloader">
              <div class="pswp__preloader__icn">
                <div class="pswp__preloader__cut">
                  <div class="pswp__preloader__donut"></div>
                </div>
              </div>
            </div>
          </div>

          <div
            class="pswp__share-modal pswp__share-modal--hidden pswp__single-tap"
          >
            <div class="pswp__share-tooltip"></div>
          </div>

          <!-- <button class="pswp__button pswp__button--arrow--left" title="Previous (arrow left)">
            </button>

            <button class="pswp__button pswp__button--arrow--right" title="Next (arrow right)">
            </button> -->

          <div class="pswp__caption">
            <div class="pswp__caption__center"></div>
          </div>
        </div>
      </div>
    </div>

样式如下

.pswp__top-bar {
  display: inline !important;
}

完成上述代码后，预览图片时直接调用预览方法即可不需要额外引入