Przeglądaj źródła

解决 cl-upload 在 form 分组下同个 prop 预览不显示问题

icssoa 1 rok temu
rodzic
commit
522aa17441

+ 0 - 1
src/plugins/upload/components/upload-item/index.vue

@@ -16,7 +16,6 @@
 						class="cl-upload-item__image-cover"
 						fit="contain"
 						:src="item.preload || url"
-						lazy
 						@error="item.error = '加载失败'"
 					/>
 				</template>

+ 11 - 6
src/plugins/upload/components/upload.vue

@@ -355,17 +355,17 @@ async function httpRequest(req: any, item?: Upload.Item) {
 	toUpload(req.file, {
 		prefixPath: props.prefixPath,
 		onProgress(progress) {
-			item.progress = progress;
+			item!.progress = progress;
 			emit("progress", item);
 		}
 	})
 		.then((res) => {
-			Object.assign(item, res);
+			Object.assign(item!, res);
 			emit("success", item);
 			update();
 		})
 		.catch((err) => {
-			item.error = err.message;
+			item!.error = err.message;
 			emit("error", item);
 		});
 }
@@ -418,14 +418,19 @@ watch(
 
 		list.value = urls
 			.map((url, index) => {
+				const old = list.value[index] || {};
+
 				return Object.assign(
 					{
 						type: getType(url),
 						progress: 100,
-						uid: uuid(),
-						url
+						uid: uuid()
 					},
-					list.value[index]
+					old,
+					{
+						url,
+						preload: old.url == url ? old.preload : url // 防止重复预览
+					}
 				);
 			})
 			.filter((_, i) => {

+ 2 - 2
src/plugins/upload/config.ts

@@ -3,8 +3,8 @@ export default () => {
 		label: "文件上传",
 		description: "基于 el-upload 封装的文件上传组件",
 		author: "COOL",
-		version: "1.1.1",
-		updateTime: "2024-02-19",
+		version: "1.1.2",
+		updateTime: "2024-02-21",
 		demo: [
 			{
 				name: "基础用法",