原生文件上传

<input
    id="uplode"
    ref="imgFile"
    accept=".jpeg,.png,.gif,.jpg"
    hidden
    multiple="multiple"
    type="file"
    @change="uploadFile($event)"
/>
<!--          图片预览-->
<div class="imgsBox flex">
  <div v-for="(urlImg,uIndex) in form.pictures" class="imgBox">
    <img :src="urlImg">
    <div class="previewIcon">
      <a-icon :style="{fontSize:'20px',marginRight:'16px'}" type="eye" @click="previewImg(urlImg)"/>
      <a-icon :style="{fontSize:'20px'}" type="delete" @click="delImg(uIndex)"/>
    </div>
  </div>

  <div v-if="form.pictures.length<4" class="uploadBox" @click="$refs.imgFile.click()">
    <a-icon type="plus"/>
    <span>文件上传</span>
  </div>
  <a-modal :footer="null" :visible="previewVisible" @cancel="previewVisible=false">
    <div style="margin-top: 30px">
      <img :src="previewImage" alt="example" style="width: 100%"/>

    </div>
  </a-modal>
</div>
------------------------------------------------------------------

uploadFile(e) {
  if(e.target.files.length>0) {
    let files = e.target.files;
    let file = files[0];
    let formData = new FormData();
    formData.append('file', file);
    console.log("文件:", formData);
    api.uploadFile(formData).then((res) => {
      if (res.code === 200) {
        this.form.pictures.push(res.data.HttpUrl)
      }
    })
  }
},
previewImg(url) {
  this.previewImage = url
  this.previewVisible = true;
},
---------------------------

.imgsBox {
  .imgBox {
    position: relative;
    margin-right: 12px;

    img {
      width: 100px;
      height: 100px;
    }

    .previewIcon {
      position: absolute;
      top: 0;
      left: 0;
      width: 100px;
      height: 100px;
      text-align: center;
      line-height: 100px;
      color: transparent;

      &:hover {
        display: block;
        color: #fff;
        background-color: rgba(255, 255, 255, .5);
      }
    }


  }

  .uploadBox {
    width: 100px;
    height: 100px;
    border: 1px solid #e7e7e7;
    color: #999;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }
}