封装上传图片和视频

src/components/ImageAndVideoUpload/index.vue

 <template>
   <div class="component-upload-image">
  <div style="display: flex;flex-wrap: wrap ">
-   <div v-for="(item, index) in fileList " :key="index"  style="height: 148px; width:148px; border:1px solid;margin:5px 10px">
-     <el-image  style="height: 148px; width:148px;" fit="fit" :src="item.url">
+   <div v-for="(item, index) in fileList " :key="index"  style="height: 148px; width:148px; margin:5px 10px;position: relative;box-sizing: border-box;">
+     <el-image @click="dialogImageUrl = item.url; dialogVisible = true; "    style="height: 148px; width:148px;" fit="fit" :src="item.url">
        <video controls width="148px" height="148px" slot="error" :src="item.url" ></video>
      </el-image>
+     <div @click="handleRemove(index)" class="el-icon-error" style="font-size: 25px;cursor: pointer;position: absolute;right: -10px; top: -10px" ></div>
    </div>
   <div>
     <el-upload
@@ -15,7 +16,6 @@
       :before-upload="handleBeforeUpload"
       :on-error="handleUploadError"
       name="file"
-      :on-remove="handleRemove"
       :show-file-list="false"
       :headers="headers"
       :on-preview="handlePictureCardPreview"
@@ -79,7 +79,7 @@ export default {
       headers: {
         Authorization: "Bearer " + getToken(),
       },
-      fileList: []
+      fileList: [],
     };
   },
   watch: {
@@ -105,7 +105,8 @@ export default {
         }
       },
       deep: true,
-      immediate: true
+      immediate: true,
+
     }
   },
   computed: {
@@ -116,12 +117,10 @@ export default {
   },
   methods: {
     // 删除图片
-    handleRemove(file, fileList) {
-      const findex = this.fileList.map(f => f.name).indexOf(file.name);
-      if(findex > -1) {
-        this.fileList.splice(findex, 1);
+    handleRemove(index) {
+        this.fileList.splice(index, 1);
         this.$emit("input", this.listToString(this.fileList));
-      }
+
     },
     // 上传成功回调
     handleUploadSuccess(res) {
@@ -202,6 +201,7 @@ export default {
   opacity: 0;
   transform: translateY(0);
 }
+
 </style>