原生js实现图片上传功能

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

        <div class="uploadimg">
          <div  v-for="(item, index) in checkList" :key="index" >
              <image
                class="mask"
                :src="checkList[index]"
                place-holder="imageLoad('')"
                @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){
         (index,1)
    },
     addClick(type) {
      if(type=='check'&&>8){
        ("最多上传9张图片");
        return
      }
      if(type=='desc'&&>8){
        ("最多上传9张图片");
        return
      }
      ().then((res) => {
        let file = res;
        (res);
        let fileUrl = (file[0]); // 获取文件url
        ("输出选择的图片的路径 :", fileUrl, file, );
        if ( == 0) {
          return;
        }

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

        let param = new FormData(); // 创建form对象
        ("file", file[0], file[0].name); // 通过append向form对象添加数据
        // (true, "正在上传中...");
        var cacheUrl = api.UPLOAD_PATIENT_IMAGE + "?token=" + ();
        (
          "post",
          cacheUrl,
          param,
          function (resp) {
            //  = ;
            if(type=='desc'){
                ();
            }else if(type=='check'){
                ()
            }
            // (
            //   ,
            //   ,
            //   function () {}
            // );
            ("图片上传成功");
            ("========", );
          }.bind(this),
          function(err){
            (err);
            ("超时");
          }.bind(this)
        );
      });
    },
    //唤起上传文件
        chooseFile() {
      return new Promise((resolve, reject) => {
        let fileinput = ("input");
         = "file";
        //  = true
         = "image/*";
        (
          "style",
          "position:fixed;left:-500px;top:-500px;"
        );
        ("change", () => {
          resolve();
          (fileinput);
          if (! ||  === 0)
            reject(new Error("文件选择出错"));
        });
        (fileinput);
        ();
      });
    },
    //点击进行图片预览
        picClick(item){
            (item);
            let pswpElement = ('.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);
                ();
    },

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

    <link rel="stylesheet" href="/ajax/libs/photoswipe/4.1.1/">
    <link rel="stylesheet" href="/ajax/libs/photoswipe/4.1.1/default-skin/">
    <script src="/ajax/libs/photoswipe/4.1.1/"></script>
    <script src="/ajax/libs/photoswipe/4.1.1/"></script>

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

    <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 /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;
}

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