t-admin/uni_modules/uni-cms/components/editor/tools/image.vue

<template>
	<view>
		<slot :change="change">
			<toolbarTool type="button" @change="change" :active="active" :disabled="disabled"
				:tooltip="{content: '插入图片'}">
				<uni-icons custom-prefix="editor-icon" type="icon-image" size="22px" style="padding: 1px;"></uni-icons>
			</toolbarTool>
		</slot>
		<uni-drawer class="insert-image-drawer" v-if="drawerWidth" ref="insertImageDrawer" mode="right"
			:width="drawerWidth">
			<uni-media-library mode="picker" :selected-count="1" :media-tabs="['image']"
				@onInsert="onInsert"></uni-media-library>
		</uni-drawer>
	</view>
</template>

<script>
	import ToolbarTool from "./base.vue";

	export default {
		name: "tool-image",
		emits: ['change'],
		props: {
			active: Boolean,
			disabled: Boolean
		},
		components: {
			ToolbarTool
		},
		data() {
			return {
				drawerWidth: null
			}
		},
		mounted() {
			const sysinfo = uni.getSystemInfoSync()
			this.drawerWidth = sysinfo.windowWidth * .8
		},
		methods: {
			change() {
				// this.$refs.insertImageDrawer.open()
				this.updateCmsImage()
			},
			getFileInfo(path) {
				const parts = path.split('/').pop();
				const [filename, ...extParts] = parts.split('.');
				const ext = extParts.length ? extParts.pop() : '';
				return {
					name: filename,
					extname: ext
				};
			},
			formatBytes(bytes) {
				if (bytes === 0) return '0 Bytes';
				const k = 1024;
				const sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB'];

				const i = Math.floor(Math.log(bytes) / Math.log(k));

				if (i >= sizes.length) return '> 1 TB';
				return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
			},
			async updateCmsImage() {
				const that = this;
				uni.chooseImage({
					sourceType:["album","camera"],
					count: 1,
					success: async (res) => {
						console.log(res);
						if (res.tempFilePaths.length > 0) {
							let filePath = res.tempFilePaths[0];
							let {
								name,
								extname
							} = that.getFileInfo(filePath)
							const uniCloudStorageExtCo = uniCloud.importObject("ext-storage-co");
							console.log(`cms/image/${name}_${Math.random().toString(36).substr(2,6)}`)
							const uploadFileOptionsRes = await uniCloudStorageExtCo.getUploadFileOptions({
								cloudPath: `cms/image/${name}_${Math.random().toString(36).substr(2,6)}`
							});
							console.log(uploadFileOptionsRes)
							const uploadRes = await uniCloud.uploadFile({
								...uploadFileOptionsRes.uploadFileOptions,
								filePath: filePath,
								cloudPath: uploadFileOptionsRes.cloudPath
							});

							await uniCloud.uploadFile({
								...uploadFileOptionsRes.uploadFileOptions,
								filePath: filePath,
								cloudPath: uploadFileOptionsRes.cloudPath,
								success: async () => {
									const res = {
										cloudPath: uploadFileOptionsRes.cloudPath,
										fileID: uploadFileOptionsRes.fileID,
										fileURL: uploadFileOptionsRes.fileURL
									};
									console.log(res)
									
									const selectedMedia = {
										src: await this.getSrc(res.fileID),
										alt: name
									}
									console.log(selectedMedia)
									this.$emit('change', {
										type: 'image',
										value: {
											src: selectedMedia.src,
											alt: selectedMedia.alt,
											data: {
												source: selectedMedia._src ?? selectedMedia.src
											}
										}
									})

									console.log("上传成功", res);
								},
								fail: (err) => {
									console.log("上传失败", err);
								}
							});

						} else {
							console.log("未选中文件")
						}
					}
				});
			},
			async getSrc(src) {
				
				if (src&&src.substring(0, 8) == "cloud://") {
					uniCloud.getTempFileURL({
						fileList: [src]
					}).then(res=>{
						return res.fileList[0].tempFileURL;
					})
				} else if (src&&src.substring(0, 8) == "qiniu://") {
					const uniCloudStorageExtCo = uniCloud.importObject("ext-storage-co");
					const res = await uniCloudStorageExtCo.getTempFileURL({src: src});
					return res.fileList[0].tempFileURL;
					
				} else {
					return src
				}
			},
			async onInsert(selectedMediaList) {
				const tcbCloudFiles = selectedMediaList.filter(item => item.type === 'image' && item.src.startsWith(
					'cloud://'))
				let fileList = []
				if (tcbCloudFiles.length) {
					const res = await uniCloud.getTempFileURL({
						fileList: [].concat.call([], ...tcbCloudFiles.map(item => [item.src, item.cover]))
							.filter(item => item)
					})
					fileList = res.fileList
				}


				selectedMediaList.forEach(media => {
					const cloudFile = fileList.find(item => item.fileID === media.src)

					media._src = media.src

					if (cloudFile) {
						media.src = cloudFile?.tempFileURL ?? media._src
					}
				})

				this.$refs.insertImageDrawer.close()

				// 目前仅支持单张插入
				const selectedMedia = selectedMediaList[0]
				this.$emit('change', {
					type: 'image',
					value: {
						src: selectedMedia.src,
						alt: selectedMedia.alt,
						data: {
							source: selectedMedia._src ?? selectedMedia.src
						}
					}
				})
			}
		}
	}
</script>

<style scoped>
	// #ifdef H5
	@import '@/uni_modules/uni-cms/common/style/editor-icon.css';
	// #endif
</style>