ace-front-end 1.0.0

package/ace-install-system-ui/src/components/Uploader/GlobalUploader.vue

@@ -0,0 +1,297 @@
+<template>
+    <div class="sfc-global-uploader">
+        <div class="action-bar">
+            <el-button ref="uploadBtnRef" id="uploadBtn" type="primary">
+                <el-icon style="margin-right: 6px"><Upload /></el-icon>
+                选择文件
+            </el-button>
+            <p class="tips">{{ props.tipsText }}</p>
+        </div>
+
+        <!-- @uploader-drop="uploaderDrop" -->
+        <uploader
+            class="install-custom-uploader"
+            ref="uploaderRef"
+            autoStart
+            :options="options"
+            :file-status-text="props.statusText"
+            @file-complete="fileComplete"
+            @complete="complete"
+            @change="change"
+            @uploadStart="uploadStart"
+            @file-added="fileAdded"
+            @files-added="filesAdded"
+            @file-error="fileError"
+            @file-success="fileSuccess"
+        >
+            <template v-slot="slotProps">
+                <div
+                    class="empty-prompt"
+                    v-if="slotProps.files.length === 0 && slotProps.fileList.length === 0"
+                >
+                    <el-image
+                        fit="contain"
+                        style="width: 100px; height: 100px"
+                        src="/images/uploader/upload-empty.svg"
+                    ></el-image>
+                    <p>{{ props.emptyPromptText }}</p>
+                </div>
+                <uploader-list v-else></uploader-list>
+            </template>
+            <!-- <uploader-btn>select files</uploader-btn> -->
+            <!-- <p class="">请选择需要上传的文件</p> -->
+
+            <!-- <uploader-unsupport></uploader-unsupport>
+            <uploader-drop>
+                <p>Drop files here to upload or</p>
+                <uploader-btn>select files</uploader-btn>
+                <uploader-btn :attrs="attrs">select images</uploader-btn>
+                <uploader-btn :directory="true">select folder</uploader-btn>
+            </uploader-drop>
+            <uploader-list></uploader-list> -->
+        </uploader>
+    </div>
+</template>
+
+<script setup lang="ts">
+import {
+    nextTick,
+    ref,
+    onMounted,
+    reactive,
+    getCurrentInstance,
+    ComponentInternalInstance,
+} from "vue";
+import type { ElButton } from "element-plus";
+import { ElNotification } from "element-plus";
+const uploaderRef = ref<any>(null);
+const uploaderInstance = ref<any>(null);
+const uploadBtnRef = ref<InstanceType<typeof ElButton> | null>(null);
+const emit = defineEmits([
+    "fileSuccess",
+    "fileError",
+    "fileAdded",
+    "filesAdded",
+    "complete",
+    "fileComplete",
+    "change",
+    "uploadStart",
+]);
+const { proxy }: any = getCurrentInstance();
+
+const props = defineProps({
+    tipsText: {
+        type: String,
+        default: "请上传指定类型文件",
+    },
+    emptyPromptText: {
+        type: String,
+        default: "暂无文件，请点击上方上传按钮选择文件。",
+    },
+    uploadMethod: {
+        type: String,
+        default: "POSt",
+    },
+    target: {
+        type: String,
+        requered: true,
+    },
+    accept: {
+        type: String,
+        default: "file",
+    },
+    chunkSize: {
+        type: Number,
+        default: 10 * 1024,
+    },
+    isDirectory: {
+        type: Boolean,
+        default: false,
+    },
+    singleFile: {
+        type: Boolean,
+        default: false,
+    },
+    processParams: {
+        type: Function,
+        default(params: Object) {
+            return params;
+        },
+    },
+    fileAdded: {
+        type: Function,
+        default() {
+            return true;
+        },
+    },
+    filesAdded: {
+        type: Function,
+        default() {
+            return true;
+        },
+    },
+    statusText: {
+        type: Object,
+        default() {
+            return {
+                success: "上传成功",
+                error: "出错了",
+                uploading: "上传中",
+                paused: "暂停中",
+                waiting: "等待中",
+            };
+        },
+    },
+});
+
+const options = reactive({
+    target: (import.meta as any).env.DEV ? "/ace" + props.target : props.target, //
+    singleFile: true, //单文件上传。
+    chunkSize: props.chunkSize, //分块时按照该值来分。最后一个上传块的大小是可能是大于等于1倍的这个值但是小于两倍的这个值大小
+    forceChunkSize: true, //是否强制所有的块都是小于等于 chunkSize 的值。
+    //simultaneousUploads: 3, //并发上传数，默认 3。
+    //其他额外的参数，这个可以是一个对象或者是一个函数，如果是函数的话，则会传入 Uploader.File 实例、当前块 Uploader.Chunk 以及是否是测试模式，默认为 {}。
+    // query() {},
+    testChunks: false,
+    uploadMethod: props.uploadMethod,
+    // testMethod: "POST",
+    //额外的一些请求头，如果是函数的话，则会传入 Uploader.File 实例、当前块 Uploader.Chunk 以及是否是测试模式，默认 {}。
+    // headers(){},
+    //withCredentials: true, //标准的 CORS 请求是不会带上 cookie 的，如果想要带的话需要设置 withCredentials 为 true，默认 false。
+    //method:'multipart、octet，默认' 当上传的时候所使用的是方式，可选 multipart、octet，默认 multipart，参考 multipart vs octet。
+    //testChunks: false, //是否测试每个块是否在服务端已经上传了，主要用来实现秒传、跨浏览器上传等，默认 true。
+    //initFileFn(){}, //可选函数用于初始化文件对象，传入的参数就是 Uploader.File 实例。
+    //readFileFn(){}, //可选的函数用于原始文件的读取操作，传入的参数就是 Uploader.File 实例、文件类型、开始字节位置 startByte，结束字节位置 endByte、以及当前块 Uploader.Chunk 实例。并且当完成后应该调用当前块实例的readFinished 方法，且带参数-已读取的 bytes。
+    //checkChunkUploadedByResponse(){}, 可选的函数用于根据 XHR 响应内容检测每个块是否上传成功了，传入的参数是：Uploader.Chunk 实例以及请求响应信息。这样就没必要上传（测试）所有的块了，具体细节原因参考 Issue #1，使用示例.
+    //generateUniqueIdentifier:null, 可覆盖默认的生成文件唯一标示的函数，默认 null。
+    // maxChunkRetries: 2, //最大自动失败重试上传次数，值可以是任意正整数，如果是 undefined 则代表无限次，默认 0。
+    // chunkRetryInterval: 3, // 重试间隔，值可以是任意正整数，如果是 null 则代表立即重试，默认 null。
+    //progressCallbacksInterval: 500, // 进度回调间隔，默认是 500。
+    //speedSmoothingFactor: 0, //主要用于计算平均速度，值就是从 0 到 1，如果是 1 那么上传的平均速度就等于当前上传速度，如果说长时间上传的话，建议设置为 0.02，这样剩余时间预估会更精确，这个参数是需要和 progressCallbacksInterval 一起调整的，默认是 0.1。
+    //successStatuses: [200], //认为响应式成功的响应码，默认 [200, 201,  202]。
+    permanentErrors: [400, 404, 415, 500, 501], //认为是出错的响应码，默认 [400,404, 415, 500, 501]。
+    //initialPaused: true, //初始文件 paused 状态，默认 false。
+    //处理请求结果，默认 function (response, cb) { cb(null, response) }。 0.5.2版本后，processResponse 会传入更多参数：(response, cb, Uploader.File, Uploader.Chunk)。
+    // processResponse() {},
+    //处理请求参数，默认 function (params) {return params}，一般用于修改参数名字或者删除参数。0.5.2版本后，processParams 会有更多参数：(params, Uploader.File, Uploader.Chunk, isTest)。
+    processParams(params: any, file: any, chunk: any) {
+        return props.processParams(params, file, chunk);
+    },
+});
+
+function uploadStart() {
+    emit("uploadStart");
+}
+
+function complete() {
+    emit("complete");
+}
+const fileComplete = function (rootFile: any) {
+    emit("fileComplete", rootFile);
+};
+/**
+ *  input 的 change 事件。
+ */
+function change() {
+    emit("change");
+}
+/**
+ * 拖拽区域的 dragover 事件。
+ */
+// function uploaderDrop() {
+//     console.log("dragover", arguments);
+// }
+
+/**
+ * 这个事件一般用作文件校验，如果说返回了 false，那么这个文件就会被忽略，不会添加到文件上传列表中。
+ */
+function fileAdded(file: any, event: any) {
+    return props.fileAdded(file, event);
+    // console.log("fileAdded", file, event);
+    // emit("fileAdded", file, event);
+}
+/**
+ * 和 fileAdded 一样，但是一般用作多个文件的校验。
+ */
+function filesAdded(files: any, fileList: any, event: any) {
+    return props.filesAdded(files, fileList, event);
+    // console.log("filesAdded", files, fileList, event);
+    // emit("filesAdded", files, fileList, event);
+}
+
+/**
+ * fileError
+ */
+function fileError(rootFile: any, file: any, message: string, chunk: any) {
+    const errorMsg = JSON.parse(message);
+    ElNotification({
+        title: "上传错误",
+        message: errorMsg.message,
+        type: "error",
+        duration: 6000,
+    });
+    emit("fileError", rootFile, file, message, chunk);
+}
+/**
+ * fileSuccess
+ */
+function fileSuccess(rootFile: any, file: any, message: any, chunk: any) {
+    emit("fileSuccess", rootFile, file, message, chunk);
+}
+onMounted(() => {
+    nextTick(() => {
+        uploaderInstance.value = uploaderRef.value.uploader;
+        window.uploaderInstance = uploaderRef.value.uploader;
+        proxy.mittBus.emit("uploaderInit", uploaderInstance.value);
+    });
+});
+defineExpose({
+    upload: uploaderInstance,
+});
+</script>
+
+<style scoped lang="scss">
+.sfc-global-uploader {
+    width: 100%;
+    .action-bar {
+        display: flex;
+        flex-direction: row;
+    }
+    .tips {
+        margin: 0;
+        padding-left: 16px;
+        color: var(--el-text-color-regular);
+    }
+    .empty-prompt {
+        color: var(--el-text-color-secondary);
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        align-items: center;
+        p {
+            padding: 0;
+            margin: 0;
+        }
+    }
+    :deep(.uploader.install-custom-uploader) {
+        margin-top: 8px;
+        border: 1px solid var(--el-border-color);
+        border-radius: 4px;
+        overflow: hidden;
+        // padding: 8px 16px;
+        .uploader-list {
+            padding: 8px 16px;
+            .uploader-file:first-child {
+                margin-bottom: 0 !important;
+            }
+            .uploader-file {
+                border-bottom: none;
+                border-radius: 2px;
+                overflow: hidden;
+                margin-bottom: 8px;
+                // border-style: dashed;
+            }
+        }
+    }
+}
+</style>

package/ace-install-system-ui/src/components/Uploader/Uploader.vue

@@ -0,0 +1,346 @@
+<template>
+    <div class="sfc-uploader">
+        <div class="action-bar" v-if="props.allowUpload">
+            <el-button ref="uploadBtnRef" id="uploadBtn" type="primary">
+                <i class="aceicon icon-upload_3_line"></i>
+                选择文件
+            </el-button>
+            <p class="tips">{{ props.tipsText }}</p>
+        </div>
+
+        <!-- @uploader-drop="uploaderDrop" -->
+        <uploader
+            class="install-custom-uploader"
+            ref="uploaderRef"
+            autoStart
+            :options="options"
+            :file-status-text="props.statusText"
+            @file-complete="fileComplete"
+            @complete="complete"
+            @change="change"
+            @uploadStart="uploadStart"
+            @file-added="fileAdded"
+            @files-added="filesAdded"
+            @file-error="fileError"
+            @file-success="fileSuccess"
+        >
+            <template v-slot="slotProps">
+                <div
+                    class="empty-prompt"
+                    v-if="slotProps.files.length === 0 && slotProps.fileList.length === 0"
+                >
+                    <el-image
+                        fit="contain"
+                        style="width: 100px; height: 100px"
+                        src="/images/uploader/upload-empty.svg"
+                    ></el-image>
+                    <p>{{ props.emptyPromptText }}</p>
+                </div>
+                <uploader-list v-else></uploader-list>
+            </template>
+            <!-- <uploader-btn>select files</uploader-btn> -->
+            <!-- <p class="">请选择需要上传的文件</p> -->
+
+            <!-- <uploader-unsupport></uploader-unsupport>
+            <uploader-drop>
+                <p>Drop files here to upload or</p>
+                <uploader-btn>select files</uploader-btn>
+                <uploader-btn :attrs="attrs">select images</uploader-btn>
+                <uploader-btn :directory="true">select folder</uploader-btn>
+            </uploader-drop>
+            <uploader-list></uploader-list> -->
+        </uploader>
+    </div>
+</template>
+
+<script setup lang="ts">
+import { nextTick, ref, onMounted, reactive } from "vue";
+import type { ElButton } from "element-plus";
+import { ElNotification } from "element-plus";
+import { useCookies } from "@vueuse/integrations/useCookies";
+const uploaderRef = ref<any>(null);
+const uploaderInstance = ref<any>(null);
+const cookies = useCookies();
+const uploadBtnRef = ref<InstanceType<typeof ElButton> | null>(null);
+const emit = defineEmits([
+    "fileSuccess",
+    "fileError",
+    "fileAdded",
+    "filesAdded",
+    "complete",
+    "fileComplete",
+    "change",
+    "uploadStart",
+    "addFileError",
+]);
+
+const props = defineProps({
+    allowUpload: {
+        type: Boolean,
+        default: true,
+    },
+    maxFilesNumber: {
+        type: Number,
+        default: 0,
+    },
+    tipsText: {
+        type: String,
+        default: "请上传指定类型文件",
+    },
+    emptyPromptText: {
+        type: String,
+        default: "暂无文件，请点击上方上传按钮选择文件。",
+    },
+    uploadMethod: {
+        type: String,
+        default: "POSt",
+    },
+    target: {
+        type: String,
+        requered: true,
+    },
+    accept: {
+        type: String,
+        default: "file",
+    },
+    chunkSize: {
+        type: Number,
+        default: 10 * 1024,
+    },
+    isDirectory: {
+        type: Boolean,
+        default: false,
+    },
+    singleFile: {
+        type: Boolean,
+        default: false,
+    },
+    processParams: {
+        type: Function,
+        default(params: Object) {
+            return params;
+        },
+    },
+    fileAdded: {
+        type: Function,
+        default() {
+            return true;
+        },
+    },
+    filesAdded: {
+        type: Function,
+        default() {
+            return true;
+        },
+    },
+    statusText: {
+        type: Object,
+        default() {
+            return {
+                success: "上传成功",
+                error: "出错了",
+                uploading: "上传中",
+                paused: "暂停中",
+                waiting: "等待中",
+            };
+        },
+    },
+});
+
+const options = reactive({
+    target: import.meta.env.DEV ? "/ace" + props.target : props.target, //
+    singleFile: true, //单文件上传。
+    chunkSize: props.chunkSize, //分块时按照该值来分。最后一个上传块的大小是可能是大于等于1倍的这个值但是小于两倍的这个值大小
+    forceChunkSize: true, //是否强制所有的块都是小于等于 chunkSize 的值。
+    //simultaneousUploads: 3, //并发上传数，默认 3。
+    //其他额外的参数，这个可以是一个对象或者是一个函数，如果是函数的话，则会传入 Uploader.File 实例、当前块 Uploader.Chunk 以及是否是测试模式，默认为 {}。
+    // query() {},
+    testChunks: false,
+    uploadMethod: props.uploadMethod,
+    // testMethod: "POST",
+    //额外的一些请求头，如果是函数的话，则会传入 Uploader.File 实例、当前块 Uploader.Chunk 以及是否是测试模式，默认 {}。
+    headers: {
+        "X-XSRF-TOKEN": cookies.get("XSRF-TOKEN"),
+    },
+    //withCredentials: true, //标准的 CORS 请求是不会带上 cookie 的，如果想要带的话需要设置 withCredentials 为 true，默认 false。
+    //method:'multipart、octet，默认' 当上传的时候所使用的是方式，可选 multipart、octet，默认 multipart，参考 multipart vs octet。
+    //testChunks: false, //是否测试每个块是否在服务端已经上传了，主要用来实现秒传、跨浏览器上传等，默认 true。
+    //initFileFn(){}, //可选函数用于初始化文件对象，传入的参数就是 Uploader.File 实例。
+    //readFileFn(){}, //可选的函数用于原始文件的读取操作，传入的参数就是 Uploader.File 实例、文件类型、开始字节位置 startByte，结束字节位置 endByte、以及当前块 Uploader.Chunk 实例。并且当完成后应该调用当前块实例的readFinished 方法，且带参数-已读取的 bytes。
+    //checkChunkUploadedByResponse(){}, 可选的函数用于根据 XHR 响应内容检测每个块是否上传成功了，传入的参数是：Uploader.Chunk 实例以及请求响应信息。这样就没必要上传（测试）所有的块了，具体细节原因参考 Issue #1，使用示例.
+    //generateUniqueIdentifier:null, 可覆盖默认的生成文件唯一标示的函数，默认 null。
+    // maxChunkRetries: 2, //最大自动失败重试上传次数，值可以是任意正整数，如果是 undefined 则代表无限次，默认 0。
+    // chunkRetryInterval: 3, // 重试间隔，值可以是任意正整数，如果是 null 则代表立即重试，默认 null。
+    //progressCallbacksInterval: 500, // 进度回调间隔，默认是 500。
+    //speedSmoothingFactor: 0, //主要用于计算平均速度，值就是从 0 到 1，如果是 1 那么上传的平均速度就等于当前上传速度，如果说长时间上传的话，建议设置为 0.02，这样剩余时间预估会更精确，这个参数是需要和 progressCallbacksInterval 一起调整的，默认是 0.1。
+    //successStatuses: [200], //认为响应式成功的响应码，默认 [200, 201,  202]。
+    permanentErrors: [400, 404, 415, 500, 501], //认为是出错的响应码，默认 [400,404, 415, 500, 501]。
+    //initialPaused: true, //初始文件 paused 状态，默认 false。
+    //处理请求结果，默认 function (response, cb) { cb(null, response) }。 0.5.2版本后，processResponse 会传入更多参数：(response, cb, Uploader.File, Uploader.Chunk)。
+    // processResponse() {},
+    //处理请求参数，默认 function (params) {return params}，一般用于修改参数名字或者删除参数。0.5.2版本后，processParams 会有更多参数：(params, Uploader.File, Uploader.Chunk, isTest)。
+    processParams(params: any, file: any, chunk: any) {
+        return props.processParams(params, file, chunk);
+    },
+});
+
+function uploadStart() {
+    emit("uploadStart");
+}
+
+function complete() {
+    emit("complete");
+}
+const fileComplete = function (rootFile: any) {
+    emit("fileComplete", rootFile);
+};
+
+/**
+ * 验证文件数量
+ */
+function validateFilesNumber(filesNum: number, uploadFileNum: number) {
+    //如果数量为0 则不显示上传数量 直接返回 true
+    if (props.maxFilesNumber === 0) return true;
+    if (filesNum > props.maxFilesNumber - uploadFileNum) {
+        ElNotification({
+            title: "上传文件提示",
+            message: `最多只能上传${props.maxFilesNumber}个文件`,
+            type: "warning",
+        });
+        return false;
+    }
+    return true;
+}
+
+/**
+ *  input 的 change 事件。
+ */
+function change() {
+    emit("change");
+}
+/**
+ * 拖拽区域的 dragover 事件。
+ */
+// function uploaderDrop() {
+//     console.log("dragover", arguments);
+// }
+
+/**
+ * 这个事件一般用作文件校验，如果说返回了 false，那么这个文件就会被忽略，不会添加到文件上传列表中。
+ */
+function fileAdded(file: any, event: any) {
+    const validateNumRes = validateFilesNumber(file.fileList.length, 1);
+    if (!validateNumRes) {
+        file.removeFile();
+        emit("addFileError", file, "超出最大文件上传数量");
+        return false;
+    } else {
+        return props.fileAdded(file, event);
+    }
+}
+/**
+ * 和 fileAdded 一样，但是一般用作多个文件的校验。
+ */
+function filesAdded(files: any, fileList: any, event: any) {
+    const validateNumRes = validateFilesNumber(fileList.length, files.length);
+    if (!validateNumRes) {
+        files.forEach((file: any) => {
+            file.removeFile();
+        });
+        emit("addFileError", files, "超出最大文件上传数量");
+        return false;
+    }
+
+    return props.filesAdded(files, fileList, event);
+
+    // console.log("filesAdded", files, fileList, event);
+    // emit("filesAdded", files, fileList, event);
+}
+
+/**
+ * fileError
+ */
+function fileError(rootFile: any, file: any, message: string, chunk: any) {
+    const errorMsg = JSON.parse(message);
+    ElNotification({
+        title: "上传错误",
+        message: errorMsg.message,
+        type: "error",
+        duration: 6000,
+    });
+    emit("fileError", rootFile, file, message, chunk);
+}
+/**
+ * fileSuccess
+ */
+function fileSuccess(rootFile: any, file: any, message: any, chunk: any) {
+    emit("fileSuccess", rootFile, file, message, chunk);
+}
+onMounted(() => {
+    nextTick(() => {
+        uploaderInstance.value = uploaderRef.value.uploader;
+        window.uploaderInstance = uploaderRef.value.uploader;
+        //创建上传按钮
+        uploaderInstance.value.assignBrowse(
+            document.getElementById("uploadBtn"),
+            props.isDirectory,
+            props.singleFile,
+            {
+                accept: props.accept,
+            }
+        );
+        console.log("创建了实例==>", uploaderInstance.value);
+    });
+});
+defineExpose({
+    upload: uploaderInstance,
+});
+</script>
+
+<style scoped lang="scss">
+.sfc-uploader {
+    width: 100%;
+    .action-bar {
+        display: flex;
+        flex-direction: row;
+    }
+    .tips {
+        margin: 0;
+        padding-left: 16px;
+        color: var(--el-text-color-regular);
+    }
+    .empty-prompt {
+        color: var(--el-text-color-secondary);
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        p {
+            padding: 0;
+            margin: 0;
+        }
+    }
+    :deep(.uploader.install-custom-uploader) {
+        margin-top: 8px;
+        border: 1px solid var(--ace-border-color3);
+        border-radius: 4px;
+        overflow: hidden;
+        // padding: 8px 16px;
+        .uploader-list {
+            padding: 8px;
+            .uploader-file:first-child {
+                margin-bottom: 0 !important;
+            }
+            .uploader-file {
+                border-bottom: none;
+                border-radius: 2px;
+                overflow: hidden;
+                margin-bottom: 8px;
+                // border-style: dashed;
+                .uploader-file-progress {
+                    background: var(--ace-bg-gradient-2);
+                }
+            }
+        }
+    }
+}
+</style>