原生上传

<template>
  <div style="display: flex;margin: 0 0 12px 0;flex-wrap: wrap;">
    <template v-if="files.length > 0">
      <div class="imgItem" v-for="(v, i) in files" :key="i">
        <el-image style="width: 100%;height: 100%;" :src="v" fit="cover"></el-image>
        <div class="delImg_box">
          <i class="el-icon-delete" @click="delImg(i)"></i>
        </div>
      </div>
    </template>
    <div class="selBox" @click="selImg" v-if="limits > files.length">
      <i class="el-icon-plus"></i>
      <input class="updataInput" ref="changeInput" type="file" @change="updataFile" accept=".jpeg,.jpg,.png" />
    </div>
  </div>
</template>

<script>
import { uploadFile } from '@/api/common'
export default {
  name: 'GrainSubsidyUiIndex',
  props: ['limits', 'urls'],
  data () {
    return {
      files: [], //初始展示
      imgUrlList: [], //返回
      mask: true
    }
  },
  watch: {
    urls () {
      this.files = this.urls
    },
    files () {
      this.$emit('imgChange', this.files)
    }
  },

  methods: {
    delImg (val) {
      this.files.splice(val, 1)
    },
    selImg () {
      this.$refs.changeInput.click()
    },
    async updataFile (e) {
      let file = e.target.files[0]
      if (['image/jpeg', 'image/png', 'image/jpg'].includes(file.type)) {
        if ((file.size / 1024 / 1024) < 2) {
          let param = new FormData()//创建form对象
          param.append("file", file)//为创建的form对象增加上传的文件
          param.append("appKey", "lbzd")//如果需要上传其他字段，在这里增加
          const { data } = await uploadFile(param)
          this.files.push(data.data.fileUrl)
        } else {
          this.$message({
            message: '上传图片大小不能超过2M!',
            type: 'warning'
          })
        }
      } else {
        this.$message({
          message: '请上传jpeg，png，jpg类型图片文件',
          type: 'warning'
        })
      }
    },
  },
}
</script>

<style lang="less" scoped>
.selBox {
  width: 100px;
  height: 100px;
  background: #F9F9F9;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #DEDEDE;

  cursor: pointer;

  i {
    font-size: 30px;
  }
}

.imgItem {
  width: 100px;
  height: 100px;
  margin: 0 10px 10px 0;
  border-radius: 10px;
  overflow: hidden;
  position: relative;
}

.delImg_box {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  background: rgba(0, 0, 0, 0.5);
  transition: .3s;
  border-radius: 10px;
  overflow: hidden;

  i {
    font-size: 30px;
    color: #fff;
    cursor: pointer;
  }
}

.imgItem:hover .delImg_box {
  opacity: 1;
}


.updataInput {
  opacity: 0;
  z-index: -1;
  position: absolute;
}
</style>