feat:剪切板上传

src/views/UploadImages.vue

@@ -8,15 +8,9 @@
 		<div class="border-2 border-dashed border-slate-400 rounded-md relative">
 			<loading-overlay :loading="loading" />
 
-			<div
+			<div class="grid p-4 gap-4 grid-cols-4 min-h-[240px]" @drop.prevent="onFileDrop" @dragover.prevent>
-				class="grid p-4 gap-4 grid-cols-4 min-h-[240px]"
+				<div v-if="convertedImages.length === 0"
-				@drop.prevent="onFileDrop"
+					class="absolute -z-10 left-0 top-0 w-full h-full flex items-center justify-center">
-				@dragover.prevent
-			>
-				<div
-					v-if="convertedImages.length === 0"
-					class="absolute -z-10 left-0 top-0 w-full h-full flex items-center justify-center"
-				>
 					<div class="text-gray-500">
 						<font-awesome-icon :icon="faCopy" />
 						粘贴或拖动图片至此处
@@ -24,79 +18,59 @@
 				</div>
 
 				<transition-group name="el-fade-in-linear">
-					<div
+					<div class="col-span-3 md:col-span-1" v-for="item in convertedImages" :key="item.tmpSrc">
-						class="col-span-3 md:col-span-1"
+						<image-box :src="item.tmpSrc" :size="item.file.size" :name="item.file.name"
-						v-for="item in convertedImages"
+							@delete="removeImage(item.tmpSrc)" mode="converted" />
-						:key="item.tmpSrc"
-					>
-						<image-box
-							:src="item.tmpSrc"
-							:size="item.file.size"
-							:name="item.file.name"
-							@delete="removeImage(item.tmpSrc)"
-							mode="converted"
-						/>
 					</div>
 				</transition-group>
 			</div>
 		</div>
 		<div class="w-full rounded-md shadow-sm overflow-hidden mt-4 grid grid-cols-8">
 			<div class="md:col-span-1 col-span-8">
-				<div
+				<div class="w-full h-10 bg-blue-500 cursor-pointer flex items-center justify-center text-white" :class="{
-					class="w-full h-10 bg-blue-500 cursor-pointer flex items-center justify-center text-white"
-					:class="{
 					'area-disabled': loading
-					}"
+				}" @click="input?.click()">
-					@click="input?.click()"
-				>
 					<font-awesome-icon :icon="faImages" class="mr-2" />
 					选择图片
 				</div>
 			</div>
 
-			<div class="md:col-span-5 col-span-8">
+			<div class="md:col-span-4 col-span-8">
 				<div class="w-full h-10 bg-slate-200 leading-10 px-4 text-center md:text-left">
 					已选择 {{ convertedImages.length }} 张，共 {{ formatBytes(imagesTotalSize) }}
 				</div>
 			</div>
-
 			<div class="md:col-span-1 col-span-3">
-				<div
+				<div class="w-full bg-red-500 cursor-pointer h-10 flex items-center justify-center text-white" :class="{
-					class="w-full bg-red-500 cursor-pointer h-10 flex items-center justify-center text-white"
-					:class="{
 					'area-disabled': loading
-					}"
+				}" @click="clipboardUpload">
-					@click="clearInput"
+					<font-awesome-icon :icon="faTrashAlt" class="mr-2" />
-				>
+					剪切板上传
+				</div>
+			</div>
+			<div class="md:col-span-1 col-span-3">
+				<div class="w-full bg-red-500 cursor-pointer h-10 flex items-center justify-center text-white" :class="{
+					'area-disabled': loading
+				}" @click="clearInput">
 					<font-awesome-icon :icon="faTrashAlt" class="mr-2" />
 					清除
 				</div>
 			</div>
 
 			<div class="md:col-span-1 col-span-5">
-				<div
+				<div class="w-full h-10 flex items-center justify-center text-white bg-green-500 cursor-pointer" :class="{
-					class="w-full h-10 flex items-center justify-center text-white bg-green-500 cursor-pointer"
-					:class="{
 					'area-disabled': convertedImages.length === 0 || loading
-					}"
+				}" @click="uploadImages">
-					@click="uploadImages"
-				>
 					<font-awesome-icon :icon="faUpload" class="mr-2" />
 					上传
 				</div>
 			</div>
 		</div>
-    <result-list v-show="imgResultList && imgResultList.length" :image-list="imgResultList" ref="resultList" class="mt-4" />
+		<result-list v-show="imgResultList && imgResultList.length" :image-list="imgResultList" ref="resultList"
+			class="mt-4" />
 	</div>
 
-	<input
+	<input ref="input" type="file" accept="image/*" class="hidden" multiple @change="onInputChange" />
-		ref="input"
-		type="file"
-		accept="image/*"
-		class="hidden"
-		multiple
-		@change="onInputChange"
-	/>
 </template>
 
 <script setup lang="ts">
@@ -146,6 +120,26 @@ const clearInput = () => {
 	imgResultList.value = []
 }
 
+const clipboardUpload = () => {
+	const clipboardContents = await navigator.clipboard.read();
+	for (const item of clipboardContents) {
+		if (!item.types.includes("image/png")) {
+			throw new Error("剪切板中不是图片！");
+		}
+		const blob = await item.getType("image/png");
+		const file = new File([blob], "clipboard.png", {
+			type: "image/png",
+		});
+		convertedImages.value = [
+			...convertedImages.value,
+			{
+				file,
+				tmpSrc: URL.createObjectURL(file)
+			}
+		]
+	}
+}
+
 const appendConvertedImages = async (files: FileList | null | undefined) => {
 	if (!files) return