+拖拽上传功能

src/components/upload_file.vue

 <template>
   <div>
-    <div v-if="type != 'cropper'">
+    <div class="img_crop" v-if="type == 'cropper'">
+      <div v-for="(item, index) in fileArray" :key="'img' + index" class="list_img">
+        <div v-if="!readOnly" @click="deleteImg(item, index)" class="list_img_back">
+          <i class="el-icon-delete img_del"></i>
+        </div>
+        <el-image class="list_img_item" :src="item.url" :fit="fit"></el-image>
+      </div>
+      <cropper v-if="fileArray.length <= max" @getNewUrl="getNewUrl"></cropper>
+    </div>
+    <div v-else>
       <el-upload
         action="ssurl"
         :file-list="fileArray"
@@ -13,20 +22,19 @@
         :class="{hide:hideUpload || readOnly}"
         :readOnly="readOnly"
         :data="anotherData"
+        :drag="drag"
       >
-        <el-button size="small" type="primary" v-if="type=='mp3'">上传文件</el-button>
-        <div slot="tip" class="el-upload__tip" v-if="type=='mp3'">支持文件格式：.mp3，单个文件不能超过20M。</div>
-        <i class="el-icon-plus" v-if="type=='picture'"></i>
-      </el-upload>
-    </div>
-    <div class="img_crop" v-else>
-      <div v-for="(item, index) in fileArray" :key="'img' + index" class="list_img">
-        <div v-if="!readOnly" @click="deleteImg(item, index)" class="list_img_back">
-          <i class="el-icon-delete img_del"></i>
+        <div v-if="drag">
+          <i class="el-icon-upload"></i>
+          <div class="el-upload__text">
+            将文件拖到此处，或
+            <em>点击上传</em>
+          </div>
         </div>
-        <el-image class="list_img_item" :src="item.url" :fit="fit"></el-image>
-      </div>
-      <cropper v-if="fileArray.length <= max" @getNewUrl="getNewUrl"></cropper>
+        <el-button size="small" type="primary" v-if="!drag && type=='default'">上传文件</el-button>
+        <div slot="tip" class="el-upload__tip" v-if="!drag && type=='mp3'">支持文件格式：.mp3，单个文件不能超过20M。</div>
+        <i class="el-icon-plus" v-if="!drag && type=='picture'"></i>
+      </el-upload>
     </div>
   </div>
 </template>
@@ -55,7 +63,7 @@ export default {
     },
     list: {
       type: Array,
-      default: []
+      default: () => []
     },
     type: {
       type: String,
@@ -68,6 +76,10 @@ export default {
     fit: {
       type: String,
       default: ""
+    },
+    drag: {
+      type: Boolean,
+      default: false
     }
   },
   watch: {
@@ -131,8 +143,8 @@ export default {
       this.hideUpload = fileList.length >= this.max;
     },
     handleRemove(file, fileList) {
-      if(!(fileList&&fileList.length>0)){
-         return
+      if (!(fileList && fileList.length > 0)) {
+        return;
       }
       let url = file.url;
       let detection = true;

src/pages/example_upload.vue

 <template>
   <div class="up_ex_container">
+    <h3>压缩包上传</h3>
+    <upload-file
+      :multiple="false"
+      :max="1"
+      type="zip"
+      :readOnly="false"
+      :drag="true"
+      @getNewList="getNewList"
+    ></upload-file>
     <h3>带有裁剪功能的图片上传</h3>
     <upload-file
       :multiple="false"
@@ -23,7 +32,7 @@
     <upload-file
       :multiple="false"
       :max="4"
-      type="mp3"
+      type="default"
       :readOnly="false"
       fit="fill"
       :list="imgList"