upload

es/components/article/upsert/index.js

@@ -81,7 +81,7 @@ export default OakComponent({
         //     return result;
         // },
         async uploadFile(extraFile) {
-            const result = await this.features.extraFile.createAndUpload(extraFile);
+            const result = await this.features.extraFile.createAndUpload(extraFile, extraFile.extra1);
             return result;
         },
         setEditor(editor) {

es/components/editor/index.js

@@ -105,9 +105,7 @@ export default OakComponent({
                             bucket: '',
                             id: generateNewId(),
                         };
-                        const { url, bucket } = await this.features.extraFile.createAndUpload(extraFile);
+                        const { url } = await this.features.extraFile.createAndUpload(extraFile, extraFile.extra1);
-                        extraFile.bucket = bucket;
-                        extraFile.extra1 = null;
                         // await this.addExtraFile(extraFile);
                         this.editorCtx.insertImage({
                             src: 'http://' + url,

es/components/extraFile/gallery/index.js

@@ -20,6 +20,7 @@ export default OakComponent({
         fileType: 1,
         sort: 1,
         isBridge: 1,
+        uploadState: 1,
     },
     formData({ data: originalFiles, features }) {
         console.log(originalFiles);
@@ -96,7 +97,9 @@ export default OakComponent({
         getUrl(extraFile) {
             const { fileList } = this.state;
             if (fileList[extraFile?.id]) {
+                console.log(fileList[extraFile?.id]);
                 const url = this.features.extraFile.getUrl(Object.assign({}, extraFile, { extra1: fileList[extraFile?.id] }));
+                console.log(url);
                 return url;
             }
             return this.features.extraFile.getUrl(extraFile);
@@ -238,7 +241,6 @@ export default OakComponent({
             assert(origin === 'qiniu', '目前只支持七牛上传'); // 目前只支持七牛上传
             const id = generateNewId();
             const updateData = {
-                extra1,
                 origin,
                 type: type || 'file',
                 tag1,
@@ -259,9 +261,7 @@ export default OakComponent({
                     callback(updateData, 'uploading');
                 }
                 try {
-                    this.addItem(Object.assign({}, updateData, {
+                    this.addItem(updateData, undefined, async () => {
-                        extra1: null,
-                    }), undefined, async () => {
                         await this.features.extraFile.upload(updateData, extra1);
                     });
                     await this.execute();
@@ -278,9 +278,7 @@ export default OakComponent({
                 }
             }
             else {
-                this.addItem(Object.assign({}, updateData, {
+                this.addItem(updateData, undefined, async () => {
-                    extra1: null,
-                }), undefined, async () => {
                     await this.features.extraFile.upload(updateData, extra1);
                 });
                 this.setState({
@@ -313,10 +311,17 @@ export default OakComponent({
         },
         async onDeleteByMp(event) {
             const { value } = event.currentTarget.dataset;
-            const { id, bucket, origin } = value;
+            const { id, bucket, origin, uploadState } = value;
             const { removeLater } = this.props;
-            if (removeLater || (origin !== 'unknown' && !bucket)) {
+            const { fileList } = this.state;
+            if (removeLater || !uploadState) {
                 this.removeItem(id);
+                Object.assign(fileList, {
+                    [id]: null,
+                });
+                this.setState({
+                    fileList
+                });
             }
             else {
                 const result = await wx.showModal({
@@ -326,16 +331,29 @@ export default OakComponent({
                 const { confirm } = result;
                 if (confirm) {
                     this.removeItem(id);
+                    Object.assign(fileList, {
+                        id: null,
+                    });
+                    this.setState({
+                        fileList
+                    });
                     await this.execute();
                 }
             }
         },
         async onDeleteByWeb(value) {
-            const { id, bucket, origin } = value;
+            const { id, bucket, origin, uploadState } = value;
             const { removeLater = true } = this.props;
+            const { fileList } = this.state;
             // 如果 removeLater为true 或 origin === 'qiniu' 且 bucket不存在
-            if (removeLater || (origin !== 'unknown' && !bucket)) {
+            if (removeLater || !uploadState) {
                 this.removeItem(id);
+                Object.assign(fileList, {
+                    id: null,
+                });
+                this.setState({
+                    fileList
+                });
             }
             else {
                 const confirm = Dialog.confirm({
@@ -345,6 +363,12 @@ export default OakComponent({
                     okText: '确定',
                     onOk: async (e) => {
                         this.removeItem(id);
+                        Object.assign(fileList, {
+                            id: null,
+                        });
+                        this.setState({
+                            fileList
+                        });
                         await this.execute();
                         confirm.destroy();
                     },

es/components/extraFile/gallery/web.d.ts

@@ -3,6 +3,7 @@ import { WebComponentProps } from "oak-frontend-base";
 import { EntityDict } from "../../../oak-app-domain";
 interface NewUploadFile extends UploadFile {
     id?: string;
+    status?: 'done' | 'uploading' | 'error' | 'removed';
 }
 type Theme = "file" | "image" | "image-flow" | "custom";
 export default function render(props: WebComponentProps<EntityDict, "extraFile", true, {

es/components/extraFile/gallery/web.js

@@ -63,6 +63,21 @@ export default function render(props) {
         }
     }, [files]);
     const extraFileToUploadFile = (extraFile) => {
+        let status = undefined;
+        switch (extraFile.uploadState) {
+            case 'uploading': {
+                status = 'uploading';
+                break;
+            }
+            case 'failed': {
+                status = 'error';
+                break;
+            }
+            case 'success': {
+                status = 'done';
+                break;
+            }
+        }
         return Object.assign({}, extraFile, {
             id: extraFile.id,
             url: getUrl(extraFile),
@@ -71,8 +86,9 @@ export default function render(props) {
             fileName: getFileName(extraFile),
             size: extraFile.size,
             type: extraFile.fileType,
-            uid: extraFile.id, //upload 组件需要uid来维护fileList
+            uid: extraFile.id,
-            // status: 'done',
+            status,
+            percent: status === 'uploading' ? 50 : undefined,
         });
     };
     const setNewUploadFilesByStatus = (file, status) => {

es/features/extraFile.d.ts

@@ -12,13 +12,10 @@ export declare class ExtraFile<ED extends EntityDict, Cxt extends BackendRuntime
     private application;
     private locales;
     constructor(cache: Cache<ED, Cxt, FrontCxt, AD & CommonAspectDict<ED, Cxt>>, application: Application<ED, Cxt, FrontCxt, AD>, locales: Locales<ED, Cxt, FrontCxt, AD>);
-    createAndUpload(extraFile: EntityDict['extraFile']['CreateSingle']['data']): Promise<{
+    createAndUpload(extraFile: EntityDict['extraFile']['CreateSingle']['data'], file: string | File): Promise<{
         url: any;
-        bucket: ED["extraFile"]["Schema"]["bucket"] | undefined;
-    }>;
-    upload(extraFile: EntityDict['extraFile']['CreateSingle']['data'], file: string | File): Promise<Partial<ED["extraFile"]["Schema"]> & {
-        uploadState: string;
     }>;
+    upload(extraFile: EntityDict['extraFile']['CreateSingle']['data'], file: string | File): Promise<void>;
     getUrl(extraFile?: EntityDict['extraFile']['OpSchema'] | EntityDict['extraFile']['Schema'] | null, style?: string): any;
     /**
      * 使用该方法，要在使用完url时，通过URL.revokeObjectURL释放缓存

es/features/extraFile.js

@@ -14,22 +14,18 @@ export class ExtraFile extends Feature {
         this.application = application;
         this.locales = locales;
     }
-    async createAndUpload(extraFile) {
+    async createAndUpload(extraFile, file) {
         await this.cache.operate('extraFile', {
             action: 'create',
-            data: Object.assign({}, extraFile, { extra1: null }),
+            data: extraFile,
             id: generateNewId(),
         });
-        const result = await this.upload(Object.assign({}, extraFile, { extra1: null }), extraFile.extra1);
+        await this.upload(extraFile, file);
         const application = this.application.getApplication();
         const config = application?.system?.config ||
             application?.system?.platform?.config;
-        const { bucket } = result;
         return {
-            url: this.getUrl(Object.assign({}, extraFile, {
+            url: this.getUrl(extraFile),
-                extra1: null,
-            })),
-            bucket,
         };
     }
     async upload(extraFile, file) {
@@ -73,7 +69,7 @@ export class ExtraFile extends Feature {
                 },
                 id: generateNewId(),
             });
-            return Object.assign(extraFileData, { uploadState: 'success' });
+            this.publish();
         }
         catch (err) {
             await this.cache.operate('extraFile', {
@@ -86,6 +82,7 @@ export class ExtraFile extends Feature {
                 },
                 id: generateNewId(),
             });
+            this.publish();
             throw err;
         }
     }

es/pages/paper/upsert/index.js

@@ -81,7 +81,7 @@ export default OakComponent({
             }
         },
         uploadFile(extraFile) {
-            return this.features.extraFile.createAndUpload(extraFile);
+            return this.features.extraFile.createAndUpload(extraFile, extraFile.extra1);
         },
         setEditor(editor) {
             this.setState({

es/types/Exception.d.ts

@@ -40,6 +40,9 @@ export declare class OakMpHaveToSubscribeMessage extends Error {
 export declare class OakUserInfoLoadingException<ED extends EntityDict & BaseEntityDict> extends OakUserException<ED> {
     constructor(message?: string);
 }
+export declare class OakUploadException<ED extends EntityDict & BaseEntityDict> extends OakUserException<ED> {
+    constructor(message?: string);
+}
 export declare function makeException<ED extends EntityDict & BaseEntityDict>(data: {
     name: string;
     message?: string;

es/types/Exception.js

@@ -88,6 +88,12 @@ export class OakUserInfoLoadingException extends OakUserException {
     }
 }
 ;
+export class OakUploadException extends OakUserException {
+    constructor(message) {
+        super(message || '上传文件失败');
+    }
+}
+;
 export function makeException(data) {
     const exception = makeException2(data);
     if (exception) {
@@ -130,6 +136,11 @@ export function makeException(data) {
             e.setOpRecords(opRecords);
             return e;
         }
+        case 'OakUploadException': {
+            const e = new OakUploadException(message);
+            e.setOpRecords(opRecords);
+            return e;
+        }
         default: {
             return;
         }

es/utils/uploader/qiniu.js

@@ -1,5 +1,6 @@
 import { getConfig } from '../../utils/getContextConfig';
 import { urlSafeBase64Encode } from '../sign';
+import { OakUploadException } from '../../types/Exception';
 const QiniuSearchUrl = 'https://rs.qiniuapi.com/stat/EncodedEntryURI';
 export default class Qiniu {
     name = 'qiniu';
@@ -16,14 +17,23 @@ export default class Qiniu {
     }
     async upload(extraFile, uploadFn, file) {
         const uploadMeta = extraFile.uploadMeta;
-        const result = await uploadFn(file, 'file', uploadMeta.uploadHost, {
+        try {
-            key: uploadMeta.key,
+            const result = await uploadFn(file, 'file', uploadMeta.uploadHost, {
-            token: uploadMeta.uploadToken,
+                key: uploadMeta.key,
-        }, true);
+                token: uploadMeta.uploadToken,
-        if (result.success === true || result.key) {
+            }, true);
-            return;
+            console.log(result);
+            // await new Promise(
+            //     () => setTimeout(() => { return Promise.resolve() }, 10000)
+            // )
+            if (result.success === true || result.key) {
+                return;
+            }
         }
-        throw new Error('图片上传失败');
+        catch (err) {
+            throw new OakUploadException('图片上传失败');
+        }
+        throw new OakUploadException('图片上传失败');
     }
     composeFileUrl(extraFile, config, style) {
         const { objectId, extension, entity, } = extraFile || {};

lib/components/article/upsert/index.js

@@ -83,7 +83,7 @@ exports.default = OakComponent({
         //     return result;
         // },
         async uploadFile(extraFile) {
-            const result = await this.features.extraFile.createAndUpload(extraFile);
+            const result = await this.features.extraFile.createAndUpload(extraFile, extraFile.extra1);
             return result;
         },
         setEditor(editor) {

lib/components/editor/index.js

@@ -107,9 +107,7 @@ exports.default = OakComponent({
                             bucket: '',
                             id: (0, uuid_1.generateNewId)(),
                         };
-                        const { url, bucket } = await this.features.extraFile.createAndUpload(extraFile);
+                        const { url } = await this.features.extraFile.createAndUpload(extraFile, extraFile.extra1);
-                        extraFile.bucket = bucket;
-                        extraFile.extra1 = null;
                         // await this.addExtraFile(extraFile);
                         this.editorCtx.insertImage({
                             src: 'http://' + url,

lib/components/extraFile/gallery/index.js

@@ -23,6 +23,7 @@ exports.default = OakComponent({
         fileType: 1,
         sort: 1,
         isBridge: 1,
+        uploadState: 1,
     },
     formData({ data: originalFiles, features }) {
         console.log(originalFiles);
@@ -99,7 +100,9 @@ exports.default = OakComponent({
         getUrl(extraFile) {
             const { fileList } = this.state;
             if (fileList[extraFile?.id]) {
+                console.log(fileList[extraFile?.id]);
                 const url = this.features.extraFile.getUrl(Object.assign({}, extraFile, { extra1: fileList[extraFile?.id] }));
+                console.log(url);
                 return url;
             }
             return this.features.extraFile.getUrl(extraFile);
@@ -241,7 +244,6 @@ exports.default = OakComponent({
             (0, assert_1.default)(origin === 'qiniu', '目前只支持七牛上传'); // 目前只支持七牛上传
             const id = (0, uuid_1.generateNewId)();
             const updateData = {
-                extra1,
                 origin,
                 type: type || 'file',
                 tag1,
@@ -262,9 +264,7 @@ exports.default = OakComponent({
                     callback(updateData, 'uploading');
                 }
                 try {
-                    this.addItem(Object.assign({}, updateData, {
+                    this.addItem(updateData, undefined, async () => {
-                        extra1: null,
-                    }), undefined, async () => {
                         await this.features.extraFile.upload(updateData, extra1);
                     });
                     await this.execute();
@@ -281,9 +281,7 @@ exports.default = OakComponent({
                 }
             }
             else {
-                this.addItem(Object.assign({}, updateData, {
+                this.addItem(updateData, undefined, async () => {
-                    extra1: null,
-                }), undefined, async () => {
                     await this.features.extraFile.upload(updateData, extra1);
                 });
                 this.setState({
@@ -316,10 +314,17 @@ exports.default = OakComponent({
         },
         async onDeleteByMp(event) {
             const { value } = event.currentTarget.dataset;
-            const { id, bucket, origin } = value;
+            const { id, bucket, origin, uploadState } = value;
             const { removeLater } = this.props;
-            if (removeLater || (origin !== 'unknown' && !bucket)) {
+            const { fileList } = this.state;
+            if (removeLater || !uploadState) {
                 this.removeItem(id);
+                Object.assign(fileList, {
+                    [id]: null,
+                });
+                this.setState({
+                    fileList
+                });
             }
             else {
                 const result = await wx.showModal({
@@ -329,16 +334,29 @@ exports.default = OakComponent({
                 const { confirm } = result;
                 if (confirm) {
                     this.removeItem(id);
+                    Object.assign(fileList, {
+                        id: null,
+                    });
+                    this.setState({
+                        fileList
+                    });
                     await this.execute();
                 }
             }
         },
         async onDeleteByWeb(value) {
-            const { id, bucket, origin } = value;
+            const { id, bucket, origin, uploadState } = value;
             const { removeLater = true } = this.props;
+            const { fileList } = this.state;
             // 如果 removeLater为true 或 origin === 'qiniu' 且 bucket不存在
-            if (removeLater || (origin !== 'unknown' && !bucket)) {
+            if (removeLater || !uploadState) {
                 this.removeItem(id);
+                Object.assign(fileList, {
+                    id: null,
+                });
+                this.setState({
+                    fileList
+                });
             }
             else {
                 const confirm = index_1.default.confirm({
@@ -348,6 +366,12 @@ exports.default = OakComponent({
                     okText: '确定',
                     onOk: async (e) => {
                         this.removeItem(id);
+                        Object.assign(fileList, {
+                            id: null,
+                        });
+                        this.setState({
+                            fileList
+                        });
                         await this.execute();
                         confirm.destroy();
                     },

lib/components/extraFile/gallery/web.d.ts

@@ -3,6 +3,7 @@ import { WebComponentProps } from "oak-frontend-base";
 import { EntityDict } from "../../../oak-app-domain";
 interface NewUploadFile extends UploadFile {
     id?: string;
+    status?: 'done' | 'uploading' | 'error' | 'removed';
 }
 type Theme = "file" | "image" | "image-flow" | "custom";
 export default function render(props: WebComponentProps<EntityDict, "extraFile", true, {

lib/components/extraFile/gallery/web.js

@@ -66,6 +66,21 @@ function render(props) {
         }
     }, [files]);
     const extraFileToUploadFile = (extraFile) => {
+        let status = undefined;
+        switch (extraFile.uploadState) {
+            case 'uploading': {
+                status = 'uploading';
+                break;
+            }
+            case 'failed': {
+                status = 'error';
+                break;
+            }
+            case 'success': {
+                status = 'done';
+                break;
+            }
+        }
         return Object.assign({}, extraFile, {
             id: extraFile.id,
             url: getUrl(extraFile),
@@ -74,8 +89,9 @@ function render(props) {
             fileName: getFileName(extraFile),
             size: extraFile.size,
             type: extraFile.fileType,
-            uid: extraFile.id, //upload 组件需要uid来维护fileList
+            uid: extraFile.id,
-            // status: 'done',
+            status,
+            percent: status === 'uploading' ? 50 : undefined,
         });
     };
     const setNewUploadFilesByStatus = (file, status) => {

lib/features/extraFile.d.ts

@@ -12,13 +12,10 @@ export declare class ExtraFile<ED extends EntityDict, Cxt extends BackendRuntime
     private application;
     private locales;
     constructor(cache: Cache<ED, Cxt, FrontCxt, AD & CommonAspectDict<ED, Cxt>>, application: Application<ED, Cxt, FrontCxt, AD>, locales: Locales<ED, Cxt, FrontCxt, AD>);
-    createAndUpload(extraFile: EntityDict['extraFile']['CreateSingle']['data']): Promise<{
+    createAndUpload(extraFile: EntityDict['extraFile']['CreateSingle']['data'], file: string | File): Promise<{
         url: any;
-        bucket: ED["extraFile"]["Schema"]["bucket"] | undefined;
-    }>;
-    upload(extraFile: EntityDict['extraFile']['CreateSingle']['data'], file: string | File): Promise<Partial<ED["extraFile"]["Schema"]> & {
-        uploadState: string;
     }>;
+    upload(extraFile: EntityDict['extraFile']['CreateSingle']['data'], file: string | File): Promise<void>;
     getUrl(extraFile?: EntityDict['extraFile']['OpSchema'] | EntityDict['extraFile']['Schema'] | null, style?: string): any;
     /**
      * 使用该方法，要在使用完url时，通过URL.revokeObjectURL释放缓存

lib/features/extraFile.js

@@ -18,22 +18,18 @@ class ExtraFile extends oak_frontend_base_1.Feature {
         this.application = application;
         this.locales = locales;
     }
-    async createAndUpload(extraFile) {
+    async createAndUpload(extraFile, file) {
         await this.cache.operate('extraFile', {
             action: 'create',
-            data: Object.assign({}, extraFile, { extra1: null }),
+            data: extraFile,
             id: (0, uuid_1.generateNewId)(),
         });
-        const result = await this.upload(Object.assign({}, extraFile, { extra1: null }), extraFile.extra1);
+        await this.upload(extraFile, file);
         const application = this.application.getApplication();
         const config = application?.system?.config ||
             application?.system?.platform?.config;
-        const { bucket } = result;
         return {
-            url: this.getUrl(Object.assign({}, extraFile, {
+            url: this.getUrl(extraFile),
-                extra1: null,
-            })),
-            bucket,
         };
     }
     async upload(extraFile, file) {
@@ -77,7 +73,7 @@ class ExtraFile extends oak_frontend_base_1.Feature {
                 },
                 id: (0, uuid_1.generateNewId)(),
             });
-            return Object.assign(extraFileData, { uploadState: 'success' });
+            this.publish();
         }
         catch (err) {
             await this.cache.operate('extraFile', {
@@ -90,6 +86,7 @@ class ExtraFile extends oak_frontend_base_1.Feature {
                 },
                 id: (0, uuid_1.generateNewId)(),
             });
+            this.publish();
             throw err;
         }
     }

lib/pages/paper/upsert/index.js

@@ -83,7 +83,7 @@ exports.default = OakComponent({
             }
         },
         uploadFile(extraFile) {
-            return this.features.extraFile.createAndUpload(extraFile);
+            return this.features.extraFile.createAndUpload(extraFile, extraFile.extra1);
         },
         setEditor(editor) {
             this.setState({

lib/types/Exception.d.ts

@@ -40,6 +40,9 @@ export declare class OakMpHaveToSubscribeMessage extends Error {
 export declare class OakUserInfoLoadingException<ED extends EntityDict & BaseEntityDict> extends OakUserException<ED> {
     constructor(message?: string);
 }
+export declare class OakUploadException<ED extends EntityDict & BaseEntityDict> extends OakUserException<ED> {
+    constructor(message?: string);
+}
 export declare function makeException<ED extends EntityDict & BaseEntityDict>(data: {
     name: string;
     message?: string;

lib/types/Exception.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.makeException = exports.OakUserInfoLoadingException = exports.OakMpHaveToSubscribeMessage = exports.OakTokenExpiredException = exports.OakUserDisabledException = exports.OakUserInfoUncompletedException = exports.OakMobileUnsetException = exports.OakChangeLoginWayException = exports.OakDistinguishUserException = exports.OakNotEnoughMoneyException = void 0;
+exports.makeException = exports.OakUploadException = exports.OakUserInfoLoadingException = exports.OakMpHaveToSubscribeMessage = exports.OakTokenExpiredException = exports.OakUserDisabledException = exports.OakUserInfoUncompletedException = exports.OakMobileUnsetException = exports.OakChangeLoginWayException = exports.OakDistinguishUserException = exports.OakNotEnoughMoneyException = void 0;
 const types_1 = require("oak-domain/lib/types");
 class OakNotEnoughMoneyException extends types_1.OakUserException {
     constructor(message) {
@@ -100,6 +100,13 @@ class OakUserInfoLoadingException extends types_1.OakUserException {
 }
 exports.OakUserInfoLoadingException = OakUserInfoLoadingException;
 ;
+class OakUploadException extends types_1.OakUserException {
+    constructor(message) {
+        super(message || '上传文件失败');
+    }
+}
+exports.OakUploadException = OakUploadException;
+;
 function makeException(data) {
     const exception = (0, types_1.makeException)(data);
     if (exception) {
@@ -142,6 +149,11 @@ function makeException(data) {
             e.setOpRecords(opRecords);
             return e;
         }
+        case 'OakUploadException': {
+            const e = new OakUploadException(message);
+            e.setOpRecords(opRecords);
+            return e;
+        }
         default: {
             return;
         }

lib/utils/uploader/qiniu.js

@@ -2,6 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 const getContextConfig_1 = require("../../utils/getContextConfig");
 const sign_1 = require("../sign");
+const Exception_1 = require("../../types/Exception");
 const QiniuSearchUrl = 'https://rs.qiniuapi.com/stat/EncodedEntryURI';
 class Qiniu {
     name = 'qiniu';
@@ -18,14 +19,23 @@ class Qiniu {
     }
     async upload(extraFile, uploadFn, file) {
         const uploadMeta = extraFile.uploadMeta;
-        const result = await uploadFn(file, 'file', uploadMeta.uploadHost, {
+        try {
-            key: uploadMeta.key,
+            const result = await uploadFn(file, 'file', uploadMeta.uploadHost, {
-            token: uploadMeta.uploadToken,
+                key: uploadMeta.key,
-        }, true);
+                token: uploadMeta.uploadToken,
-        if (result.success === true || result.key) {
+            }, true);
-            return;
+            console.log(result);
+            // await new Promise(
+            //     () => setTimeout(() => { return Promise.resolve() }, 10000)
+            // )
+            if (result.success === true || result.key) {
+                return;
+            }
         }
-        throw new Error('图片上传失败');
+        catch (err) {
+            throw new Exception_1.OakUploadException('图片上传失败');
+        }
+        throw new Exception_1.OakUploadException('图片上传失败');
     }
     composeFileUrl(extraFile, config, style) {
         const { objectId, extension, entity, } = extraFile || {};

src/components/article/upsert/index.ts

@@ -90,7 +90,7 @@ export default OakComponent({
         async uploadFile(
             extraFile: EntityDict['extraFile']['CreateSingle']['data']
         ) {
-            const result = await this.features.extraFile.createAndUpload(extraFile);
+            const result = await this.features.extraFile.createAndUpload(extraFile, extraFile.extra1!);
             return result;
         },
 

src/components/editor/index.ts

@@ -114,10 +114,9 @@ export default OakComponent({
                             bucket: '',
                             id: generateNewId(),
                         } as EntityDict['extraFile']['CreateSingle']['data'];
-                        const { url, bucket } =
+                        const { url } =
-                            await this.features.extraFile.createAndUpload(extraFile);
+                            await this.features.extraFile.createAndUpload(extraFile, extraFile.extra1!);
-                        extraFile.bucket = bucket;
+
-                        extraFile.extra1 = null;
                         // await this.addExtraFile(extraFile);
                         (this as any).editorCtx.insertImage({
                             src: 'http://' + url,

src/components/extraFile/gallery/index.ts

@@ -29,6 +29,7 @@ export default OakComponent({
         fileType: 1,
         sort: 1,
         isBridge: 1,
+        uploadState: 1,
     },
     formData({ data: originalFiles, features }) {
         console.log(originalFiles);
@@ -111,7 +112,9 @@ export default OakComponent({
         getUrl(extraFile: EntityDict['extraFile']['OpSchema']) {
             const { fileList } = this.state;
             if (fileList[extraFile?.id]) {
+                console.log(fileList[extraFile?.id]);
                 const url = this.features.extraFile.getUrl(Object.assign({}, extraFile, { extra1: fileList[extraFile?.id] }));
+                console.log(url);
                 return url;
             }
             return this.features.extraFile.getUrl(extraFile);
@@ -278,7 +281,6 @@ export default OakComponent({
             assert(origin === 'qiniu', '目前只支持七牛上传'); // 目前只支持七牛上传
             const id = generateNewId();
             const updateData = {
-                extra1,
                 origin,
                 type: type || 'file',
                 tag1,
@@ -299,9 +301,7 @@ export default OakComponent({
                     callback(updateData, 'uploading');
                 }
                 try {
-                    this.addItem(Object.assign({}, updateData, {
+                    this.addItem(updateData, undefined, async () => {
-                        extra1: null,
-                    }), undefined, async () => {
                         await this.features.extraFile.upload(
                             updateData, extra1
                         )
@@ -319,9 +319,7 @@ export default OakComponent({
                     throw error;
                 }
             } else {
-                this.addItem(Object.assign({}, updateData, {
+                this.addItem(updateData, undefined, async () => {
-                    extra1: null,
-                }), undefined, async () => {
                     await this.features.extraFile.upload(
                         updateData, extra1
                     )
@@ -359,10 +357,19 @@ export default OakComponent({
         },
         async onDeleteByMp(event: WechatMiniprogram.Touch) {
             const { value } = event.currentTarget.dataset;
-            const { id, bucket, origin } = value;
+            const { id, bucket, origin, uploadState } = value;
             const { removeLater } = this.props;
-            if (removeLater || (origin !== 'unknown' && !bucket)) {
+            const { fileList } = this.state;
+            if (removeLater || !uploadState) {
                 this.removeItem(id);
+                Object.assign(
+                    fileList, {
+                    [id]: null,
+                }
+                );
+                this.setState({
+                    fileList
+                });
             } else {
                 const result = await wx.showModal({
                     title: '确认删除吗',
@@ -371,16 +378,33 @@ export default OakComponent({
                 const { confirm } = result;
                 if (confirm) {
                     this.removeItem(id);
+                    Object.assign(
+                        fileList, {
+                        id: null,
+                    }
+                    );
+                    this.setState({
+                        fileList
+                    });
                     await this.execute();
                 }
             }
         },
         async onDeleteByWeb(value: any) {
-            const { id, bucket, origin } = value;
+            const { id, bucket, origin, uploadState } = value;
             const { removeLater = true } = this.props;
+            const { fileList } = this.state;
             // 如果 removeLater为true 或 origin === 'qiniu' 且 bucket不存在
-            if (removeLater || (origin !== 'unknown' && !bucket)) {
+            if (removeLater || !uploadState) {
                 this.removeItem(id);
+                Object.assign(
+                    fileList, {
+                    id: null,
+                }
+                );
+                this.setState({
+                    fileList
+                });
             } else {
                 const confirm = Dialog.confirm({
                     title: '确认删除当前文件？',
@@ -389,6 +413,14 @@ export default OakComponent({
                     okText: '确定',
                     onOk: async (e: any) => {
                         this.removeItem(id);
+                        Object.assign(
+                            fileList, {
+                            id: null,
+                        }
+                        );
+                        this.setState({
+                            fileList
+                        });
                         await this.execute();
                         confirm.destroy();
                     },

src/components/extraFile/gallery/web.tsx

@@ -15,6 +15,7 @@ import { isPc } from "oak-frontend-base/es/utils/utils";
 
 interface NewUploadFile extends UploadFile {
     id?: string;
+    status?: 'done' | 'uploading' | 'error' | 'removed';
 }
 
 type Theme = "file" | "image" | "image-flow" | "custom";
@@ -158,6 +159,21 @@ export default function render(
     const extraFileToUploadFile = (
         extraFile: EntityDict["extraFile"]["OpSchema"]
     ): NewUploadFile => {
+        let status = undefined as NewUploadFile['status'];
+        switch (extraFile.uploadState) {
+            case 'uploading': {
+                status = 'uploading';
+                break;
+            }
+            case 'failed': {
+                status = 'error';
+                break;
+            }
+            case 'success': {
+                status = 'done';
+                break;
+            }
+        }
         return Object.assign({}, extraFile, {
             id: extraFile.id,
             url: getUrl(extraFile),
@@ -167,7 +183,8 @@ export default function render(
             size: extraFile.size!,
             type: extraFile.fileType!,
             uid: extraFile.id, //upload 组件需要uid来维护fileList
-            // status: 'done',
+            status,
+            percent: status === 'uploading' ? 50 : undefined,
         });
     };
 

src/features/extraFile.ts

@@ -36,29 +36,26 @@ export class ExtraFile<
     }
 
     async createAndUpload(
-        extraFile: EntityDict['extraFile']['CreateSingle']['data']
+        extraFile: EntityDict['extraFile']['CreateSingle']['data'],
+        file: string | File,
     ) {
         await this.cache.operate('extraFile', {
             action: 'create',
-            data: Object.assign({}, extraFile, { extra1: null }),
+            data: extraFile,
             id: generateNewId(),
         } as EntityDict['extraFile']['Operation']);
-        const result = await this.upload(
+        await this.upload(
-            Object.assign({}, extraFile, { extra1: null }),
+            extraFile,
-            extraFile.extra1!
+            file
         );
         const application = this.application.getApplication();
         const config =
             application?.system?.config ||
             application?.system?.platform?.config;
-        const { bucket } = result;
         return {
             url: this.getUrl(
-                Object.assign({}, extraFile, {
+                extraFile as EntityDict['extraFile']['OpSchema']
-                    extra1: null,
-                }) as EntityDict['extraFile']['OpSchema']
             ),
-            bucket,
         };
     }
 
@@ -110,7 +107,7 @@ export class ExtraFile<
                 },
                 id: generateNewId(),
             } as EntityDict['extraFile']['Operation']);
-            return Object.assign(extraFileData, { uploadState: 'success' });
+            this.publish();
         } catch (err) {
             await this.cache.operate('extraFile', {
                 action: 'update',
@@ -122,6 +119,7 @@ export class ExtraFile<
                 },
                 id: generateNewId(),
             } as EntityDict['extraFile']['Operation']);
+            this.publish();
             throw err;
         }
     }

src/pages/paper/upsert/index.ts

@@ -90,7 +90,7 @@ export default OakComponent({
         },
 
         uploadFile(extraFile: EntityDict['extraFile']['CreateSingle']['data']) {
-            return this.features.extraFile.createAndUpload(extraFile);
+            return this.features.extraFile.createAndUpload(extraFile, extraFile.extra1!);
         },
 
         setEditor(editor: IDomEditor | null) {

src/types/Exception.ts

@@ -101,6 +101,12 @@ export class OakUserInfoLoadingException<ED extends EntityDict & BaseEntityDict>
     }
 };
 
+export class OakUploadException<ED extends EntityDict & BaseEntityDict> extends OakUserException<ED> {
+    constructor(message?: string) {
+        super(message || '上传文件失败');
+    }
+};
+
 export function makeException<ED extends EntityDict & BaseEntityDict>(data: {
     name: string;
     message?: string;
@@ -149,6 +155,11 @@ export function makeException<ED extends EntityDict & BaseEntityDict>(data: {
             e.setOpRecords(opRecords);
             return e;
         }
+        case 'OakUploadException': {
+            const e = new OakUploadException(message);
+            e.setOpRecords(opRecords);
+            return e;
+        }
         default: {
             return;
         }

src/utils/uploader/qiniu.ts

@@ -12,6 +12,7 @@ import { QiniuCloudInstance } from 'oak-external-sdk';
 import { get } from 'oak-domain/lib/utils/lodash';
 import { Config } from '../../types/Config';
 import { urlSafeBase64Encode } from '../sign';
+import { OakUploadException } from '../../types/Exception';
 
 const QiniuSearchUrl = 'https://rs.qiniuapi.com/stat/EncodedEntryURI';
 
@@ -54,20 +55,28 @@ export default class Qiniu<ED extends EntityDict & BaseEntityDict> implements Up
         file: string | File
     ) {
         const uploadMeta = extraFile.uploadMeta! as QiniuUploadInfo;
-        const result = await uploadFn(
+        let result;
-            file,
+        try {
-            'file',
+            result = await uploadFn(
-            uploadMeta.uploadHost,
+                file,
-            {
+                'file',
-                key: uploadMeta.key,
+                uploadMeta.uploadHost,
-                token: uploadMeta.uploadToken,
+                {
-            },
+                    key: uploadMeta.key,
-            true
+                    token: uploadMeta.uploadToken,
-        );
+                },
+                true
+            );
+        } catch (err) {
+            // 网络错误
+            throw new OakUploadException('图片上传失败');
+        }
+        // 解析回调
         if (result.success === true || result.key) {
             return;
+        } else {
+            throw new OakUploadException('图片上传失败');
         }
-        throw new Error('图片上传失败');
     }
 
     composeFileUrl(
@@ -113,6 +122,7 @@ export default class Qiniu<ED extends EntityDict & BaseEntityDict> implements Up
         return false;
     }
 
+
     async removeFile(extraFile: OpSchema, context: BackendRuntimeContext<ED>) {
         const { bucket, uploadMeta } = extraFile;
     }