A

src/components/uploader.vue

 <template>
 
-  <el-upload
-    class="upload-demo"
-    :action="actionUrl"
-    list-type="picture-card"
-    :http-request="onUpload"
-    :auto-upload="true"
-    :on-success="onSuccessUpload"
-    :on-remove="onRemoved"
-    :on-exceed="onExceed"
-    :limit="max"
-    :file-list="fileList">
-    <i class="el-icon-plus"></i>
-  </el-upload>
+  <div class="gallery">
+    <div v-for="(file, index) in fileList" :key="index" class="image_holder" :style="picStyle">
+      <el-image v-loading="file.status == 'ready'" v-if="showImage(file)" class="image_content" :src="file.url"
+        fit="cover"></el-image>
+      <div v-loading="file.status == 'ready'" class="video_holder" v-if="showVideo(file)">
+        <el-image src="/images/zanting_b.png" :style="playStyle" />
+      </div>
+      <div class="image_mask">
+        <div class="layout_h_c">
+          <el-button v-if="showDelete(file)" type="text" icon="el-icon-delete"
+            class="dustbin" @click="onDeleteImage(index)"></el-button>
+          <el-button v-if="showPlay(file)" type="text" icon="el-icon-video-play"
+            class="dustbin" @click="onPlayVideo(index)"></el-button>
+        </div>
+      </div>
+    </div>
+    <el-upload v-if="showTrigger" class="upload-demo" :action="actionUrl" :show-file-list="false"
+      :http-request="onUpload" :auto-upload="true" :on-success="onSuccessUpload" :on-exceed="onExceed"
+      :on-change="onFileChanged" :limit="max" :style="picStyle" :file-list="fileList">
+      <div class="plus_loader" slot="trigger" :style="picStyle">
+        <i class="el-icon-plus"></i>
+      </div>
+    </el-upload>
+
+    <core-player :show="showPlayer" :url="nowUrl" @close="showPlayer = false" />
+    <span v-if="tips.default" style="color:#2790e0;white-space: nowrap;">{{tips.content}}</span>
+  </div>
 
 </template>
 
 <script>
-
   export default {
+    components: {
+      'core-player': () => import('@/components/player.vue')
+    },
     props: {
+      tips:{
+        type: Object,
+        default: () => {
+          return {
+            content:"",
+            default: false,
+          }
+        }
+      },
       max: {
         type: Number,
         default: 1
+      },
+      size: {
+        type: Object,
+        default: () => {
+          return {
+            width: "120px",
+            height: "160px"
+          }
+        }
+      },
+      playSize: {
+        type: Object,
+        default: () => {
+          return {
+            width: '60px',
+            height: '60px'
+          }
+        }
+      },
+      urls: {
+        type: String,
+        default: ""
+      },
+      lazyList: {
+        type: String,
+        default: ""
+      },
+      image: {
+        type: Boolean,
+        default: true
+      },
+      video: {
+        type: Boolean,
+        default: false
       }
     },
     data() {
       return {
-        fileList: []
+        nowUrl: '',
+        showPlayer: false,
+        lazyLoaded: false,
+        fileList: [],
+      }
+    },
+    watch: {
+      lazyList(n, o) {
+        if(n && n.length > 0 && !this.lazyLoaded) {
+          this.lazyLoaded = true
+          this.pushList(n.split(",").map(url => {
+            return {
+              url: url,
+              name: url
+            }
+          }))
+        }
+      }
+    },
+    created() {
+      if(this.urls && this.urls.length > 0) {
+        this.pushList(this.urls.split(",").map(url => {
+          return {
+            url: url,
+            name: url
+          }
+        }))
       }
     },
     methods: {
       onUpload(req) {
         let f = req.file
-        this.$oss.upload('images', f)
-        .then(r => {
-          req.onSuccess(r)
-        })
-        .catch(e => {
-          req.onError(e)
-        })
+        let bucket = ""
+        if (f.type.startsWith('image') && this.image) {
+          bucket = 'images'
+        } else if (f.type.startsWith('video') && this.video) {
+          bucket = 'videos'
+        } else {
+          req.onError('不支持的文件格式')
+          return
+        }
+        this.$oss.upload(bucket, f)
+          .then(r => {
+            req.onSuccess(r)
+          })
+          .catch(e => {
+            req.onError(e)
+          })
       },
       onSuccessUpload(r, f, l) {
         f.url = r.url
-        this.fileList = l
-      },
-      onRemoved(f, l) {
-        this.fileList = l
       },
       onExceed(f, l) {
         this.$message({
-          message: '图片数量不能超过' + this.max + "张",
+          message: '文件数量不能超过' + this.max + "个",
           type: 'warning'
         })
       },
+      onFileChanged(f, l) {
+        if (f.status == 'ready') {
+          f.url = window.URL.createObjectURL(f.raw)
+        }
+        this.fileList = l
+        this.$emit('change', this.getList())
+      },
+      //删除文件
+      onDeleteImage(index) {
+        this.fileList.splice(index, 1)
+      },
+      //播放视频
+      onPlayVideo(index) {
+        let f = this.fileList[index]
+        if(f.url) {
+          this.showPlayer = true
+          this.nowUrl = f.url
+        }
+      },
+      initList(list) {
+        this.fileList = list
+      },
       pushList(list) {
         this.$nextTick(() => {
           this.fileList = this.fileList.concat(list)
         })
       },
       getList() {
-        return this.fileList.filter(r => { return r.status == 'success' }).map(r => { return r.url })
+        return this.fileList.filter(r => {
+          return r.status == 'success' || r.url
+        }).map(r => {
+          return r.url
+        })
+      },
+      isImage(str) {
+        let sufix = ['png', 'jpg', 'jpeg', 'bmp', 'gif', 'webp', 'psd', 'svg', 'tiff']
+        for (let i = 0; i < sufix.length; i++) {
+          let sf = sufix[i]
+          if (str.endsWith(sf)) {
+            return true
+          }
+        }
+        return false
+      },
+      isVideo(str) {
+        let sufix = ['mp4', 'avi', 'wmv', 'asf', 'rmvb', 'mov', 'm4v', 'mkv', 'flv', 'vob', 'dat', 'rm']
+        for (let i = 0; i < sufix.length; i++) {
+          let sf = sufix[i]
+          if (str.endsWith(sf)) {
+            return true
+          }
+        }
+        return false
       }
     },
     computed: {
       actionUrl() {
         return ""
+      },
+      showHolder() {
+        return this.fileList.length < this.max
+      },
+      picStyle() {
+        let size = this.size
+        return {
+          width: size.width,
+          height: size.height,
+          marginRight: "10px"
+        }
+      },
+      playStyle() {
+        let size = this.playSize
+        return {
+          width: size.width,
+          height: size.height
+        }
+      },
+      showTrigger() {
+        return this.fileList.length < this.max
+      },
+      //是否显示图片
+      showImage() {
+        return f => {
+          return (f.type != null && f.type.startsWith('image')) || this.isImage(f.url)
+        }
+      },
+      //是否显示视频
+      showVideo() {
+        return f => {
+          return (f.type != null && f.type.startsWith('video')) || this.isVideo(f.url)
+        }
+      },
+      //是否显示删除按钮
+      showDelete() {
+        return f => {
+          return f.status == undefined || f.status == 'success'
+        }
+      },
+      //显示播放按钮
+      showPlay() {
+        return f => {
+          return (f.status == undefined || f.status == 'success') && this.isVideo(f.url)
+        }
       }
     }
   }
-
 </script>
 
 <style scoped>
-  .avatar-uploader .el-upload {
-      border: 1px dashed #d9d9d9;
-      border-radius: 6px;
-      cursor: pointer;
-      position: relative;
-      overflow: hidden;
-    }
-    .avatar-uploader .el-upload:hover {
-      border-color: #409EFF;
+  .plus_loader {
+    height: 100%;
+    width: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border-color: #409EFF;
+    border: 1px dashed #d9d9d9;
+    border-radius: 6px;
+  }
+
+  .plus_loader:hover {
+    border-color: #409EFF;
+  }
+
+  .gallery {
+    display: flex;
+    flex-direction: row;
+  }
+
+  .dustbin {
+    height: 32px;
+    width: 32px;
+    align-self: center;
+  }
+
+  .image_holder {
+    position: relative;
+    border-color: #409EFF;
+    border: 1px dashed #d9d9d9;
+    border-radius: 6px;
+    overflow: hidden;
+  }
+
+  .image_content {
+     width: 100%;
+     height: 100%;
+  }
+
+  .video_holder {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    background: black;
+  }
+
+  .image_mask {
+    width: 100%;
+    height: 100%;
+    position: absolute;
+    left: 0;s
+    top: 0;
+    background: rgba(0, 0, 0, 0.65);
+    opacity: 0;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+  }
+
+  .image_mask:hover {
+    animation: fade 0.3s linear;
+    animation-fill-mode: forwards;
+  }
+
+  @keyframes fade {
+    0% {
+      opacity: 0;
     }
-    .avatar-uploader-icon {
-      font-size: 28px;
-      color: #8c939d;
-      width: 178px;
-      height: 178px;
-      line-height: 178px;
-      text-align: center;
+    50% {
+      opacity: 0.5;
     }
-    .avatar {
-      width: 178px;
-      height: 178px;
-      display: block;
+    100% {
+      opacity: 1;
     }
+  }
 </style>

src/util/oss.js

@@ -7,7 +7,7 @@ let OSSObj = {
 }
 
 const headers = {
-  "x-oss-forbid-overwrite": "true",
+  "x-oss-forbid-overwrite": "false",
 };
 
 export const Uploader = {
@@ -64,7 +64,8 @@ export const Uploader = {
       return Promise.reject("文件不能为空")
     }
     return this.getOSS().then(oss => {
-      return oss.put(dir + '/' + file.name, file, {headers})
+      let name = Math.floor(Math.random()*1000);
+      return oss.put(dir + '/' + name + file.name, file, {headers})
     })
   }