优化文件上传

src/modules/demo/views/editor.vue

@@ -19,8 +19,7 @@ const wang = ref(
 	'<p><span style="font-size: 22px;"><em>富文本编</em></span><span style="color: rgb(216, 68, 147); font-size: 22px;"><em>辑器</em></span></p>'
 );
 
-const monaco = ref(`
-class User {
+const monaco = ref(`class User {
   main() {
     console.log('Name', '神仙都没用')
   }

src/modules/extend/editor/wang.vue

@@ -17,21 +17,27 @@
 			@onChange="onChange"
 		/>
 
-		<!-- 图片 -->
-		<cl-upload-space
-			:ref="setRefs('image')"
-			accept="image/*"
-			:show-btn="false"
-			@confirm="onFileConfirm"
-		/>
-
-		<!-- 视频 -->
+		<!-- 文件空间 - 视频 -->
 		<cl-upload-space
 			:ref="setRefs('video')"
 			accept="video/*"
 			:show-btn="false"
 			@confirm="onFileConfirm"
 		/>
+
+		<!-- 文件空间 - 图片 -->
+		<cl-upload-space
+			:ref="setRefs('image')"
+			accept="image/*"
+			:show-btn="false"
+			@confirm="onFileConfirm"
+			v-if="isSpace"
+		/>
+
+		<!-- 直接上传 - 图片 -->
+		<div class="upload-inner" v-else>
+			<cl-upload :ref="setRefs('image')" accept="image/*" @success="onFileConfirm" />
+		</div>
 	</div>
 </template>
 
@@ -41,6 +47,7 @@ import { Editor, Toolbar } from "@wangeditor/editor-for-vue";
 import { IEditorConfig } from "@wangeditor/editor";
 import { useCool } from "/@/cool";
 import { parsePx } from "/@/cool/utils";
+import { isArray } from "lodash-es";
 import "@wangeditor/editor/dist/css/style.css";
 
 export default defineComponent({
@@ -53,16 +60,25 @@ export default defineComponent({
 
 	props: {
 		modelValue: String,
+		// 模式
 		mode: {
 			type: String as PropType<"default" | "simple">,
 			default: "default"
 		},
+		// 高度
 		height: {
 			type: [String, Number],
 			default: 400
 		},
+		// 禁用
 		disabled: Boolean,
-		preview: Boolean
+		// 是否预览模式
+		preview: Boolean,
+		// 是否使用文件空间
+		isSpace: {
+			type: Boolean,
+			default: false
+		}
 	},
 
 	emits: ["update:modelValue", "change", "focus", "blur"],
@@ -86,6 +102,7 @@ export default defineComponent({
 			}
 		);
 
+		// 临时
 		const temp: { insertFn: ((url: string) => void) | null } = {
 			insertFn: null
 		};
@@ -94,12 +111,7 @@ export default defineComponent({
 		const editorConfig: Partial<IEditorConfig> = {
 			placeholder: "请输入",
 			MENU_CONF: {
-				uploadImage: {
-					customBrowseAndUpload(fn: any) {
-						temp.insertFn = fn;
-						refs.image.open();
-					}
-				},
+				uploadImage: {},
 				uploadVideo: {
 					customBrowseAndUpload(fn: any) {
 						temp.insertFn = fn;
@@ -109,6 +121,21 @@ export default defineComponent({
 			}
 		};
 
+		// 图片上传，两种模式
+		if (props.isSpace) {
+			// 文件空间上传
+			editorConfig.MENU_CONF!.uploadImage.customBrowseAndUpload = (fn: any) => {
+				temp.insertFn = fn;
+				refs.image.open();
+			};
+		} else {
+			// 直接上传
+			editorConfig.MENU_CONF!.uploadImage.customUpload = (file: File, fn: any) => {
+				temp.insertFn = fn;
+				refs.image.upload(file);
+			};
+		}
+
 		// 创建后
 		function onCreated(editor: any) {
 			Editor.value = editor;
@@ -137,6 +164,10 @@ export default defineComponent({
 
 		// 文件选择
 		function onFileConfirm(files: any[]) {
+			if (!isArray(files)) {
+				files = [files];
+			}
+
 			if (files.length > 0) {
 				files.forEach((file) => {
 					if (temp.insertFn) {
@@ -155,8 +186,10 @@ export default defineComponent({
 			}
 		}
 
+		// 监听
 		watch(() => [props.disabled, props.preview], onDisabled);
 
+		// 销毁
 		onBeforeUnmount(() => {
 			const editor = Editor.value;
 			if (editor == null) return;
@@ -188,6 +221,21 @@ export default defineComponent({
 
 	:deep(.w-e-toolbar) {
 		border-bottom: 1px solid var(--el-border-color);
+
+		button {
+			font-size: 12px;
+
+			&::before {
+				font-size: 12px;
+			}
+		}
+	}
+
+	.upload-inner {
+		visibility: hidden;
+		position: absolute;
+		left: 0;
+		top: 0;
 	}
 
 	&.disabled {

src/modules/upload/components/upload.vue

@@ -209,9 +209,9 @@ const props = defineProps({
 	},
 
 	// CRUD穿透值
-	isEdit: null,
-	scope: null,
-	prop: null,
+	isEdit: Boolean,
+	scope: Object,
+	prop: String,
 	isDisabled: Boolean
 });
 
@@ -330,7 +330,7 @@ async function onBeforeUpload(file: any, item?: Upload.Item) {
 			return true;
 		}
 
-		return false;
+		return true;
 	}
 
 	// 自定义上传事件
@@ -534,6 +534,9 @@ function update() {
 			if (props.prop) {
 				Form.value?.validateField(props.prop);
 			}
+
+			// 清空
+			refs.upload?.clearFiles();
 		});
 	}
 }
@@ -541,9 +544,13 @@ function update() {
 // 手动上传
 function upload(file: File) {
 	clear();
+
 	refs.upload?.clearFiles();
-	refs.upload?.handleStart(file);
-	refs.upload?.submit();
+
+	nextTick(() => {
+		refs.upload?.handleStart(file);
+		refs.upload?.submit();
+	});
 }
 
 // 文件空间