fix 拖拽图片

src/components/ImageUpload/index.vue

@@ -1,23 +1,12 @@
 <template>
   <div class="component-upload-image">
-    <el-upload
-      multiple
-      :action="uploadImgUrl"
-      list-type="picture-card"
-      :on-success="handleUploadSuccess"
-      :before-upload="handleBeforeUpload"
-      :limit="limit"
-      :on-error="handleUploadError"
-      :on-exceed="handleExceed"
-      name="file"
-      :data="data"
-      :on-remove="handleRemove"
-      :show-file-list="true"
-      :headers="headers"
-      v-model:file-list="fileList"
-      :on-preview="handlePictureCardPreview"
-      :class="{ hide: fileList.length >= limit }">
-      <el-icon class="avatar-uploader-icon"><plus /></el-icon>
+    <el-upload multiple :action="uploadImgUrl" list-type="picture-card" :on-success="handleUploadSuccess"
+      :before-upload="handleBeforeUpload" :limit="limit" :on-error="handleUploadError" :on-exceed="handleExceed"
+      name="file" :data="data" :drag="drag" :on-remove="handleRemove" :show-file-list="true" :headers="headers"
+      v-model:file-list="fileList" :on-preview="handlePictureCardPreview" :class="{ hide: fileList.length >= limit }">
+      <el-icon class="avatar-uploader-icon">
+        <plus />
+      </el-icon>
     </el-upload>
     <!-- 上传提示 -->
     <div class="el-upload__tip" v-if="showTip">
@@ -66,6 +55,10 @@ const props = defineProps({
   data: {
     type: Object,
   },
+  // 是否可以拖拽
+  drag: {
+    type: Boolean,
+  },
 })
 
 const { proxy } = getCurrentInstance()
@@ -188,3 +181,16 @@ function listToString(list, separator) {
   return strs != '' ? strs.substr(0, strs.length - 1) : ''
 }
 </script>
+
+<style lang="scss" scoped>
+:deep(.hide .el-upload--picture-card) {
+  display: none !important;
+}
+
+:deep(.el-upload-dragger) {
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+</style>