上传图片（原生）

html

 <button
     type="button"
     @click="F_Open_dialog()"
   >上传图片</button>
   <input
     type="file"
     id="fileId"
     ref="refFile"
     value="文件上传"
     @change="handleFile()"
   >

显示上传的图片

<!-- 自己上传显示的图片 -->
   <div
      v-for="(item, index) in fileList"
      :key="index"
    >
      <div>
        <img :src="item.url" alt>
        //删除按钮
        <img
          @click="delImgFun(item,item.time,Index)"
          src="./../assets/del.png"
          alt
        >
      </div>
  </div>

js

//  打开文件上传窗口
F_Open_dialog(id) {
      document.getElementById(id).click()
  },
//   上传图片
handleFile() {
      let fs = document.getElementById(‘fileId’).files[0]
      let reg = /\.(jpg|jpeg|png|bmp|BMP|JPG|PNG|JPEG)$/
      let imgFlag = false
       let max_size = 2 * 1024 * 1024
      if (reg.test(fs.name)) {
         if (fs.size < max_size) {
           imgFlag = true
         } else {
          Toast({
            message: '图片必须小于2MB！',
            type:'fail',
            duration: 2000
           })
           imgFlag = true
         }
      } else {
        Toast({
          message: '请上传图片！',
          type:'fail',
          duration: 2000
        })
        imgFlag = false
      }
      if (imgFlag) {
        // 显示图片
        var reader = new FileReader()
        reader.readAsDataURL(fs)
        var url = window.URL.createObjectURL(fs)
        let time = new Date().getTime()
        this.fileList.push({ time: time, file: fs，url:url })
      }
    },
   // 删除自己上传的显示图片
    delImgFun(ii, time, index) {
      this.Obj.ejkpzbList[index].fileurl.splice(ii, 1)
      this.fileList.forEach((item, i) => {
        if (item.time === time) {
          this.fileList.splice(i, 1)
          return
        }
      })
    },