新增 Uploader组件

src/components/Uploader.vue

@@ -0,0 +1,88 @@
+<template>
+  <div class="info-line-title">{{ title }} :</div>
+  <el-upload
+    drag
+    multiple
+    :action="actionUrl"
+    list-type="picture-card"
+    :on-preview="preview"
+    :on-remove="remove"
+    :data="{ type, userId: 0, location: '' }"
+    :on-success="uploadSuccess"
+    :file-list="fileList"
+    :disabled="disabled"
+  >
+    <div :class="['upload-plus-icon', `${disabled ? 'dn' : ''}`]">+</div>
+    <div :class="['upload-text', `${disabled ? 'dn' : ''}`]">
+      拖拽或点击上传
+    </div>
+  </el-upload>
+  <el-dialog v-model="dialogVisible" title="图片预览" width="30%">
+    <el-image
+      :src="dialogImageUrl"
+      style="height: 100%; width: 100%"
+    ></el-image>
+  </el-dialog>
+</template>
+<script>
+import { defineComponent, computed, ref, onMounted } from "vue";
+import store from "../store/index";
+
+export default defineComponent({
+  props: {
+    actionUrl: {
+      type: String,
+      default: store.state.uploadUrl,
+    },
+    title: {
+      type: String,
+      default: "上传文件",
+    },
+    type: String,
+    disabled: Boolean,
+    fileList: Array,
+  },
+  emits: ["onPreview", "onSendFileList"],
+  setup(props, { emit }) {
+    let dialogVisible = ref(false);
+    let dialogImageUrl = ref("");
+    function preview(file) {
+      dialogVisible.value = true;
+      dialogImageUrl.value = file.url;
+    }
+    function remove(file, list) {
+      emit("onSendFileList", list);
+    }
+    function uploadSuccess(res, file, list) {
+      emit("onSendFileList", list);
+    }
+    onMounted(() => {});
+
+    return {
+      preview,
+      remove,
+      uploadSuccess,
+      dialogVisible,
+      dialogImageUrl,
+      preview,
+    };
+  },
+});
+</script>
+<style scoped>
+.upload-plus-icon {
+  height: 15%;
+  color: rgb(139, 147, 156);
+  line-height: 100px;
+  font-size: 40px;
+  font-weight: 200;
+}
+.upload-text {
+  height: 25%;
+  color: rgb(139, 147, 156);
+}
+
+.dn {
+  display: none;
+}
+</style>

src/main.js

@@ -4,10 +4,11 @@ import "element-plus/dist/index.css";
 import App from "./App.vue";
 import router from "./router";
 import store from "./store";
-import md5 from "md5";
-
+import Uploader from "./components/Uploader.vue";
+import "./styles/index.css";
 
 const app = createApp(App);
+app.component("Uploader", Uploader);
 
 router.beforeEach(async (to, from, next) => {
   let id = localStorage.id;