基于vu和element-ui的多张图片上传和删除

基于vue和element-ui 多张图片上传和删除

<template>
    <div class="myBox">
    <div v-for="(item,index) in imageUrl" :key="index" style="display: inline-block;margin-right: 11px;position: relative;">
      <el-image 
          style="width: 148px; height: 148px;border-radius: 5px;"
          :src="item" 
          :preview-src-list="imageUrl">
        </el-image>
        <i @click="del(item)" class="el-icon-remove" id="myIcon"></i>
      </div>
      <el-upload
        class="upload-demo"
        style="width:148px;display: inline-block"
        drag
        :show-file-list="false"
        :on-success="handleAvatarSuccess"
        action="https://jsonplaceholder.typicode.com/posts/"
        multiple>
        <i  class="el-icon-plus"></i>
      </el-upload>
    </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  props: {
    msg: String
  },
  data() {
    return {
      imageUrl: []
    }
  },
  methods: {
    // 上传
    handleAvatarSuccess(res) {
      // console.log(res)
      this.imageUrl.push(res.data)
        // this.imageUrl = URL.createObjectURL(file.raw);
      },
    // 删除
    del(item) {
      this.imageUrl.map((val,index) => {
        if (val === item) {
          this.imageUrl.splice(index, 1)
        }
      })
      // console.log(this.imageUrl)
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style>
.myBox .el-upload-dragger {
  width: 148px;
  line-height: 148px;
  height: 148px;
}
.myBox [class^=el-icon-] {
  font-size: 28px;
}
.myBox #myIcon {
  font-size: 20px;
  position: absolute;
  top: 5px;
  right: 5px;
  color: red;
  cursor: pointer;
}
</style>

把上传地址换成自己后端的地址，