create-koa-boot 1.0.0

package/templates/example/uniapp/uni_modules/chuizi-file-upload/components/xe-upload/xe-upload.vue

@@ -0,0 +1,321 @@
+<!-- eslint-disable -->
+<template>
+	<view>
+		<!-- #ifdef APP-PLUS -->
+		<view class="xe-upload" v-html="renderInput" :props="mergeProps" :change:props="XeUpload.renderProps"></view>
+		<!-- #endif -->
+	</view>
+</template>
+
+<script>
+	import {
+		chooseMedia,
+		chooseFile,
+		chooseMessageFile,
+		uploadFile,
+	} from '../../tools/apis';
+	import {
+		deepMerge,
+		awaitWrap,
+		base64ToPath,
+		isArray,
+	} from '../../tools/tools';
+
+	export default {
+		name: 'XeUpload',
+		props: {
+			options: {
+				default: () => ({}),
+				type: Object,
+			},
+		},
+		data() {
+			return {
+				id: 0, // APP上传框ID
+				renderInput: '', // APP上传框
+			};
+		},
+		computed: {
+			mergeOptions({
+				options = {}
+			}) {
+				const tmpOptions = {
+					name: 'file',
+				};
+				return deepMerge(tmpOptions, options);
+			},
+			mergeProps({
+				id,
+				renderInput,
+				mergeOptions
+			}) {
+				return {
+					id,
+					renderInput,
+					upload: mergeOptions,
+				};
+			},
+			
+		},
+		methods: {
+			// 上传事件
+			async upload(type, config = {}) {
+				let tmpResult = [];
+				if (['image', 'video'].includes(type)) {
+					const [err, res] = await chooseMedia(type, config);
+					if (err) return this.handleError(err);
+					tmpResult = res?.tempFiles || [];
+				}
+				// H5 || APP-PLUS || MP-WEIXIN
+				if (['file'].includes(type)) {
+					let tmpFiles = {};
+					let tmpErr = null;
+					// #ifdef H5
+					[tmpErr, tmpFiles] = await chooseFile(config);
+					// #endif
+					// #ifdef MP-WEIXIN
+					[tmpErr, tmpFiles] = await chooseMessageFile(config);
+					// #endif
+					// #ifdef APP-PLUS
+					this.id = Math.floor(Math.random() * 100000000 + 1);
+					this.initInput(config.extension);
+					// #endif
+					if (tmpErr) return this.handleError(tmpErr);
+					tmpResult = tmpFiles?.tempFiles || [];
+				}
+				this.handleUpload(tmpResult);
+			},
+			// 初始化上传框
+			initInput(extension) {
+				const {
+					id
+				} = this;
+				let accept = extension;
+				if (isArray(extension)) {
+					accept = extension.join(',');
+				}
+
+				this.renderInput =
+					`<input type="file" id="xe-upload-${id}" name="xe-upload" ${accept ? 'accept="' + accept + '"' : ''} />`;
+
+				// console.log('44444444444444444444',this.renderInput);
+			},
+			// 文件上传（没有传入上传url时返回本地链接）
+			async handleUpload(files = []) {
+				// console.log('888888888888888',files);
+				if (files.filter((e) => Boolean(e)).length === 0) return;
+
+				const {
+					mergeOptions
+				} = this;
+
+				if (!mergeOptions.url) {
+					return this.handleEmits({
+						type: 'choose',
+						data: files,
+					});
+				}
+				const tmpUploads = files.map((e) =>
+					uploadFile({
+							...mergeOptions,
+							filePath: e.tempFilePath,
+						},
+						e,
+					)
+				);
+				const [err, res] = await awaitWrap(Promise.all(tmpUploads));
+
+				if (err) return this.handleError(err);
+				this.handleEmits({
+					type: 'success',
+					data: res,
+				});
+			},
+			// 处理失败事件
+			handleError(error) {
+				this.handleEmits({
+					type: 'warning',
+					data: error,
+				});
+			},
+			// 处理响应事件
+			async handleEmits(e) {
+				// console.log('fffffffffff', e);
+				// #ifdef APP-PLUS
+				if (e.type === 'choose') {
+					// 将base64转为本地链接
+					for (let i = 0; i < e.data.length; i += 1) {
+						const item = e.data[i];
+						if (!item.base64Url) {
+							continue;
+						}
+						const [parseError, parseUrl] = await awaitWrap(base64ToPath(item.base64Url, item.name));
+						if (!parseError) {
+							e.data[i].tempFilePath = parseUrl;
+						} else {
+							e.data[i].tempFilePath = item.base64Url;
+						}
+						delete e.data[i].base64Url;
+					}
+				}
+				// #endif
+				this.$emit('callback', e);
+			},
+		},
+	};
+</script>
+
+<!-- #ifdef APP-PLUS -->
+<script module="XeUpload" lang="renderjs">
+	import {
+		appUploadFile,
+	} from '../../tools/apis';
+	import {
+		awaitWrap,
+		fileToBase64,
+	} from '../../tools/tools';
+
+	export default {
+		data() {
+			return {
+				id: 0, // 上传框ID
+				uploadOptions: {}, // 上传配置
+			};
+		},
+		methods: {
+			// 处理 XeUpload 传入 renderjs 数据，以及调起上传框
+			renderProps(info) {
+
+				const {
+					id,
+					renderInput,
+					upload
+				} = info;
+				if (!renderInput) return;
+				this.id = id;
+				this.uploadOptions = upload;
+				this.$nextTick(() => {
+
+					const dom = document.getElementById(`xe-upload-${id}`);
+					// console.log('111111111111111111111111',dom);
+					// console.log('2222222222222222222222',`xe-upload-${id}`);
+					dom.addEventListener('change', () => { //input
+						// console.log('3333333333333333333');
+						this.handleUpload();
+					});
+					dom?.click?.();
+
+
+					// const ME = document.createEvent('MouseEvents');
+					// ME.initMouseEvent('click', true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0,
+					// 	null);
+					// dom.dispatchEvent(ME);
+
+				});
+			},
+			// 处理文件上传(没有传入url时返回本地链接)
+			async handleUpload() {
+
+				const {
+					url,
+					name,
+					header = {},
+					formData = {},
+				} = this.uploadOptions || {};
+				const dom = document.getElementById(`xe-upload-${this.id}`);
+				if (!dom.files[0]) return;
+				const tmpFileList = Array.from(dom.files);
+				const tmpUploads = [];
+				for (let i = 0; i < tmpFileList.length; i += 1) {
+					const e = tmpFileList[i];
+					let tmpType = 'file';
+					if (e.type.includes('image')) {
+						tmpType = 'image';
+					}
+					if (e.type.includes('video')) {
+						tmpType = 'video';
+					}
+					const tmpExts = {
+						size: e.size,
+						name: e.name,
+						type: e.type,
+						fileType: tmpType,
+						tempFilePath: '',
+						base64Url: '',
+					};
+					// 没有传入上传url时，直接返回本地链接
+					if (!url) {
+						const [parseError, parseUrl] = await awaitWrap(fileToBase64(dom.files[i]));
+						if (!parseError) {
+							tmpExts.base64Url = parseUrl;
+						}
+						tmpUploads.push(tmpExts);
+						continue;
+					};
+					const tmpData = new FormData();
+					tmpData.append(name, dom.files[i], e.name);
+					for (let key in formData) {
+						tmpData.append(key, formData[key]);
+					}
+					// 上传进度
+					const onprogress = (ev) => {
+						if (ev.lengthComputable) {
+							var result = (ev.loaded / ev.total) * 100;
+							this.handleRenderEmits({
+								type: 'onprogress',
+								data: {
+									progress: Math.floor(result),
+									current: i + 1,
+									total: tmpFileList.length,
+								},
+							});
+						};
+					}
+					tmpUploads.push(appUploadFile({
+						url,
+						header,
+						formData: tmpData
+					}, tmpExts, onprogress));
+				}
+				// 没有传入上传url时，直接返回本地链接列表
+				if (!url) {
+					return this.handleRenderEmits({
+						type: 'choose',
+						data: tmpUploads,
+					});
+				}
+				this.handleRenderEmits({
+					type: 'onprogress',
+					data: {
+						progress: 0,
+						current: 1,
+						total: tmpFileList.length,
+					},
+				});
+				// 处理上传文件
+				const [err, res] = await awaitWrap(Promise.all(tmpUploads));
+				if (err) {
+					return this.handleRenderEmits({
+						type: 'warning',
+						data: err,
+					});
+				}
+				this.handleRenderEmits({
+					type: 'success',
+					data: res,
+				});
+			},
+			// 数据传输到XeUpload组件
+			handleRenderEmits(data) {
+				this.$ownerInstance.callMethod('handleEmits', data);
+			},
+		},
+	};
+</script>
+<!-- #endif -->
+
+<style scoped>
+	.xe-upload {
+		display: none;
+	}
+</style>

package/templates/example/uniapp/uni_modules/chuizi-file-upload/package.json

@@ -0,0 +1,82 @@
+{
+  "id": "chuizi-file-upload",
+  "displayName": "app端文件选择上传",
+  "version": "1.0.0",
+  "description": "chuizi-file-upload",
+  "keywords": [
+    "chuizi-file-upload"
+],
+  "repository": "",
+"engines": {
+  },
+  "dcloudext": {
+    "type": "component-vue",
+    "sale": {
+      "regular": {
+        "price": "0.00"
+      },
+      "sourcecode": {
+        "price": "0.00"
+      }
+    },
+    "contact": {
+      "qq": ""
+    },
+    "declaration": {
+      "ads": "无",
+      "data": "插件不采集任何数据",
+      "permissions": "无"
+    },
+    "npmurl": ""
+  },
+  "uni_modules": {
+    "dependencies": [],
+    "encrypt": [],
+    "platforms": {
+      "cloud": {
+        "tcb": "y",
+        "aliyun": "y",
+        "alipay": "y"
+      },
+      "client": {
+        "Vue": {
+          "vue2": "y",
+          "vue3": "u"
+        },
+        "App": {
+          "app-vue": "y",
+          "app-nvue": "u",
+          "app-uvue": "u"
+        },
+        "H5-mobile": {
+          "Safari": "u",
+          "Android Browser": "u",
+          "微信浏览器(Android)": "u",
+          "QQ浏览器(Android)": "u"
+        },
+        "H5-pc": {
+          "Chrome": "u",
+          "IE": "u",
+          "Edge": "u",
+          "Firefox": "u",
+          "Safari": "u"
+        },
+        "小程序": {
+          "微信": "u",
+          "阿里": "u",
+          "百度": "u",
+          "字节跳动": "u",
+          "QQ": "u",
+          "钉钉": "u",
+          "快手": "u",
+          "飞书": "u",
+          "京东": "u"
+        },
+        "快应用": {
+          "华为": "u",
+          "联盟": "u"
+        }
+      }
+    }
+  }
+}

package/templates/example/uniapp/uni_modules/chuizi-file-upload/readme.md

@@ -0,0 +1 @@
+# chuizi-file-upload

package/templates/example/uniapp/uni_modules/chuizi-file-upload/tools/apis.js

@@ -0,0 +1,177 @@
+// eslint-disable
+import { awaitWrap } from './tools';
+/**
+ * 从本地相册选择图片或使用相机拍照
+ * @param {object} config 参数详情 => https://uniapp.dcloud.net.cn/api/media/image.html#chooseimage
+ * @returns
+ */
+export const chooseImage = (config) => {
+  return awaitWrap(
+    new Promise((r, j) => {
+      uni.chooseImage({
+        ...config,
+        success: (res) => {
+          const tmpFiles = res?.tempFiles.map((e) => ({
+            tempFilePath: e.path,
+            tempFile: e,
+            size: e.size,
+            name: e.name,
+            type: e.type,
+            fileType: 'image',
+          }));
+          return r({ type: 'image', ...res, tempFiles: tmpFiles });
+        },
+        fail: (err) => j({ mode: 'chooseImage', data: err }),
+      });
+    })
+  );
+};
+
+/**
+ * 拍摄视频或从手机相册中选视频，返回视频的临时文件路径
+ * @param {object} config 参数详情 => https://uniapp.dcloud.net.cn/api/media/video.html#choosevideo
+ * @returns
+ */
+export const chooseVideo = (config) => {
+  return awaitWrap(
+    new Promise((r, j) => {
+      uni.chooseVideo({
+        ...config,
+        success: (res) => {
+          const tmpFiles = [{
+            ...res,
+            tempFilePath: res.tempFilePath,
+            tempFile: res.tempFile ?? {},
+            size: res.size,
+            name: res.name,
+            type: res.tempFile?.type,
+            fileType: 'video',
+          }];
+          return r({ type: 'video', tempFiles: tmpFiles });
+        },
+        fail: (err) => j({ mode: 'chooseVideo', data: err }),
+      });
+    })
+  );
+};
+
+/**
+ * 拍摄或从手机相册中选择图片或视频
+ * @param {object} config 参数详情 => https://uniapp.dcloud.net.cn/api/media/video.html#choosemedia
+ * @returns
+ */
+export const chooseMedia = (type, config) => {
+  if (!type) return console.error('chooseMedia type cannot be empty');
+  if (!uni.chooseMedia && type === 'image') return chooseImage(config);
+  if (!uni.chooseMedia && type === 'video') return chooseVideo(config);
+  return awaitWrap(
+    new Promise((r, j) => {
+      uni.chooseMedia({
+        ...config,
+        mediaType: [type],
+        success: (res) => r(res),
+        fail: (err) => j({ mode: 'chooseMedia', data: err }),
+      });
+    })
+  );
+};
+
+/**
+ * 从本地选择文件(h5)
+ * @param {object} config 参数详情 => https://uniapp.dcloud.net.cn/api/media/file.html#wx-choosemessagefile
+ * @returns
+ */
+export const chooseFile = (config) => {
+  return awaitWrap(
+    new Promise((r, j) => {
+      uni.chooseFile({
+        ...config,
+        success: (res) => {
+          const tmpFiles = res?.tempFiles.map((e) => {
+            let tmpType = 'file';
+            if (e.type.includes('image')) {
+              tmpType = 'image';
+            }
+            if (e.type.includes('video')) {
+              tmpType = 'video';
+            }
+            return {
+              tempFilePath: e.path,
+              tempFile: e,
+              size: e.size,
+              name: e.name,
+              type: e.type,
+              fileType: tmpType,
+            };
+          });
+          return r({ type: 'file', ...res, tempFiles: tmpFiles });
+        },
+        fail: (err) => j({ mode: 'chooseFile', data: err }),
+      });
+    })
+  );
+};
+
+/**
+ * 从本地选择文件(微信小程序)
+ * @param {object} config 参数详情 => https://developers.weixin.qq.com/miniprogram/dev/api/media/image/wx.chooseMessageFile.html
+ * @returns
+ */
+export const chooseMessageFile = (config) => {
+  return awaitWrap(
+    new Promise((r, j) => {
+      wx.chooseMessageFile({
+        ...config,
+        success: (res) => {
+          const tmpFiles = res?.tempFiles.map((e) => ({
+            ...e,
+            tempFilePath: e.path,
+            fileType: e.type ?? 'file',
+          }));
+          return r({ type: 'file', ...res, tempFiles: tmpFiles });
+        },
+        fail: (err) => j({ mode: 'chooseMessageFile', data: err }),
+      });
+    })
+  );
+};
+
+/**
+ * 上传
+ * @param {object} config 参数详情 => https://uniapp.dcloud.net.cn/api/request/network-file.html#uploadfile
+ * @param {object} exts 选择的文件的数据
+ * @returns {object} exts + response
+ */
+export const uploadFile = (config, exts = {}) => {
+  return new Promise((r, j) => {
+    uni.uploadFile({
+      ...config,
+      success: (res) => r({ ...exts, response: JSON.parse(res.data) }),
+      fail: (err) => j({ mode: 'uploadFile', data: err }),
+    });
+  });
+};
+
+export const appUploadFile = (config, exts = {}, onprogress) => {
+  const { url, header, formData } = config;
+  return new Promise((r, j) => {
+    const xhr = new XMLHttpRequest();
+    xhr.open('POST', url, true);
+    for (let key in header) {
+      xhr.setRequestHeader(key, header[key]);
+    }
+    if (onprogress) {
+      xhr.upload.onprogress = onprogress;
+    }
+    xhr.onreadystatechange = function() {
+      if (xhr.readyState === 4) {
+        if (xhr.status === 200) {
+          r({ ...exts, response: JSON.parse(xhr.responseText) });
+        } else {
+          j({ mode: 'uploadFile', data: { data: xhr.responseText, errMsg: 'uploadFile fail.' } });
+        }
+      }
+    }
+    xhr.send(formData);
+  });
+};