plain-design 1.0.0-beta.103 → 1.0.0-beta.104

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "plain-design",
-  "version": "1.0.0-beta.103",
+  "version": "1.0.0-beta.104",
   "description": "",
   "main": "dist/plain-design.min.js",
   "module": "dist/plain-design.commonjs.min.js",

package/src/packages/components/$upload/upload.utils.ts

@@ -2,11 +2,12 @@ import {iHttp} from "../createHttp";
 import {PlainObject} from "plain-utils/utils/event";
 
 export interface iUploadServiceConfig {
-  http: iHttp,
-  action: string,
-  filename: string,
-  prefix?: string,
-  process?: (uploadData: iUploadData) => void | iUploadData | Promise<iUploadData | void>
+  http: iHttp,                                      // 上传的http请求服务对象
+  action: string,                                   // 默认上传路径
+  filename: string,                                 // 上传文件名
+  getFilePathFromResponse: (resp: any) => string,   // 从返回值中获取上传返回的图片路径
+  prefix?: string,                                  // 默认图片路径前缀
+  process?: (uploadData: iUploadData) => void | iUploadData | Promise<iUploadData | void> // 处理请求参数uploadData拦截器
 }
 
 export interface iUploadData {

package/src/packages/components/Image/index.tsx

@@ -100,6 +100,7 @@ export const Image = designComponent({
         emit.onSuccess(state.src!);
       };
       image.onerror = (e) => {
+        console.error(`load image error: ${image.src}`, e, props.urlPrefix);
         state.status = eImageStatus.error;
         emit.onError(e);
       };

package/src/packages/components/ImageUploader/index.tsx

@@ -12,6 +12,7 @@ import {$file, FileServiceDefaultAccept, FileServiceUploadConfig} from "../$file
 import $configuration from "../$configuration";
 import {iUploadService} from "../$upload/createUploadService";
 import i18n from "../i18n";
+import {iUploadServiceConfig} from "../$upload/upload.utils";
 
 /**
  * ImageUploader的状态
@@ -40,17 +41,21 @@ export const ImageUploader = designComponent({
     handleDelete: { type: Function as PropType<() => void | Promise<void>> },                 // 自定义删除图片逻辑
     handleUpload: { type: Function as PropType<(file: File) => void | Promise<void>> },       // 自定义上传图片逻辑
     handlePreview: { type: Function as PropType<(url?: string) => void> },                    // 自定义预览逻辑
-    urlPrefix: { type: String },
-    service: { type: Object as PropType<iUploadService> },
+    urlPrefix: { type: String },                                                              // 图片路径前缀
+    service: { type: Object as PropType<iUploadService> },                                    // 文件上传服务
+    emitBase64: { type: Boolean },                                                            // 当选择文件之后，是否将 base64 值更新到绑定值
+    getFilePathFromResponse: { type: Function as PropType<iUploadServiceConfig['getFilePathFromResponse']> },// 从上传结果中获取图片访问地址
   },
   inheritPropsType: HTMLDivElement,
   emits: {
     onUpdateModelValue: (val?: string) => true,
     onLoadSuccess: (url: string) => true,
     onLoadError: (e: string | Event) => true,
+    onLoadComplete: () => true,
     onUploadSuccess: (resp: PlainObject | string) => true,
     onUploadProgress: (percent: number, e: ProgressEvent) => true,
     onUploadFail: (e: any) => true,
+    onUploadComplete: () => true,
   },
   setup({ props, event: { emit } }) {
 
@@ -59,7 +64,8 @@ export const ImageUploader = designComponent({
     const urlPrefix = computed(() => props.urlPrefix || upload?.config.prefix);
 
     const { refs, onRef } = useRefs({ el: HTMLDivElement });
-    const model = useModel(() => props.modelValue, emit.onUpdateModelValue, { autoWatch: false });
+
+    const model = useModel(() => props.modelValue, emit.onUpdateModelValue);
 
     const { editComputed } = useEdit();
 
@@ -70,7 +76,6 @@ export const ImageUploader = designComponent({
     });
 
     watch(() => props.modelValue, val => {
-      model.value = Image.formatImagePath(val, urlPrefix.value);
       state.chooseBase64 = undefined;
       if (!model.value) {
         return state.status = eImageUploaderStatus.empty;
@@ -80,12 +85,14 @@ export const ImageUploader = designComponent({
       image.onload = () => {
         state.status = eImageUploaderStatus.success;
         emit.onLoadSuccess(model.value!);
+        emit.onLoadComplete();
       };
       image.onerror = (e) => {
         state.status = eImageUploaderStatus.error;
         emit.onLoadError(e);
+        emit.onLoadComplete();
       };
-      image.src = model.value;
+      image.src = Image.formatImagePath(val, urlPrefix.value);
     }, { immediate: true });
 
     const classes = useClasses(() => [
@@ -125,10 +132,16 @@ export const ImageUploader = designComponent({
             onSuccess: (resp) => {
               if (!!config?.onSuccess) config.onSuccess(resp);
               console.log('upload success, resp:', resp);
-              model.value = String(state.chooseBase64);
+              // model.value = String(state.chooseBase64);
+              const getFilePathFromResponse: iUploadServiceConfig['getFilePathFromResponse'] | undefined =
+                props.getFilePathFromResponse ||
+                upload?.config.getFilePathFromResponse;
+
+              model.value = getFilePathFromResponse?.(resp);
               state.chooseBase64 = undefined;
               state.status = eImageUploaderStatus.success;
               emit.onUploadSuccess(resp);
+              emit.onUploadComplete();
               dfd.resolve(resp);
             },
             onError: (e) => {
@@ -136,6 +149,7 @@ export const ImageUploader = designComponent({
               console.log('upload fail, e:', e);
               state.status = eImageUploaderStatus.fail;
               emit.onUploadFail(e);
+              emit.onUploadComplete();
               dfd.reject(e);
             },
           };
@@ -181,10 +195,12 @@ export const ImageUploader = designComponent({
     };
 
     const imageAttrs = computed(() => {
-      return Object.keys(ImagePropsOptions).reduce((prev, key) => {
+      const ret = Object.keys(ImagePropsOptions).reduce((prev, key) => {
         prev[key] = (props as any)[key];
         return prev;
       }, {} as any);
+      ret.urlPrefix = urlPrefix.value;
+      return ret;
     });
 
     return {