创建项目

2023-01-29 09:13:43 +08:00
parent e8c34e4758
commit f000da0167
212 changed files with 64998 additions and 0 deletions
--- a/code/web/项目源码/src/components/control/upload/index.vue
+++ b/code/web/项目源码/src/components/control/upload/index.vue
@@ -0,0 +1,86 @@
+<template>
+    <el-upload
+        class="avatar-uploader"
+        action="#"
+        :http-request="handlerUpload"
+        :before-upload="handlerBeforeOnUpload"
+        :on-error="handlerOnError"
+        :show-file-list="false"
+        :disabled="disabled"
+    >
+        <img v-if="data.image_url" :src="data.image_url" class="avatar" />
+        <span v-else>+</span>
+    </el-upload>
+</template>
+
+<script>
+import { reactive, getCurrentInstance, watch } from 'vue';
+import { UploadFile } from "@/api/common";
+export default {
+    name: "BasisUpload",
+    components: {},
+    props: {
+        value: {
+            type: String,
+            default: ""
+        },
+        disabled: {
+            type: Boolean,
+            default: false
+        }
+    },
+    emits: ["update:value", 'callback'],
+    setup(props, { emit }){
+        // 获取实例上下文
+        const { proxy } = getCurrentInstance();
+        const data = reactive({
+            image_url: ""
+        })
+        const handlerOnError = (res, file) => {}
+        const handlerBeforeOnUpload = async (file) => {
+            const isLt2M = file.size / 1024 / 1024 < 2; // 限制文件大小不能大于 2M
+            if (!isLt2M) {
+                proxy.$message.error("上传图片大小不能超过 2MB!");
+                return false;
+            }
+            return isJPG && isLt2M;
+        }
+        const handlerUpload = async (params) => {
+            const file = params.file;
+            // 实例化表单对象
+            const form = new FormData();
+            // 表单添加 files 字段
+            form.append("files", file);
+            // 上传接口
+            try{
+                const url = await startUpload(form)
+                data.image_url = url;
+                emit("update:imageUrl", url)
+            }catch{
+                console.log("上传失败")
+            }
+        }
+        /**
+         * 开始文件上传
+         */
+        const startUpload = (form) => {
+            return new Promise((resolve, reject) => {
+                UploadFile(form).then(response => {
+                    resolve(response.data.files_path);
+                })
+            })
+        }
+        watch(() => props.value, (newValue, oldValue) => {
+            data.image_url = newValue
+        })
+        return { 
+            data,
+            handlerUpload,
+            handlerOnError,
+            handlerBeforeOnUpload
+        }
+    }
+}
+</script>
+<style lang='scss' scoped>
+</style>