有 preview 图片,不再加载原始图片预览

scss/components/form/_image.scss

@@ -73,7 +73,7 @@
     padding: px2rem(5px);
     display: inline-block;
     margin-right: px2rem(15px);
-    margin-right: px2rem(15px);
+    margin-bottom: px2rem(15px);
     position: relative;
   }
 

src/components/icons.tsx

@@ -57,6 +57,9 @@ import BackIcon from '../icons/back.svg';
 // @ts-ignore
 import MoveIcon from '../icons/move.svg';
 
+// @ts-ignore
+import InfoIcon from '../icons/info.svg';
+
 // 兼容原来的用法，后续不直接试用。
 // @ts-ignore
 export const closeIcon = <CloseIcon />;
@@ -115,6 +118,7 @@ registerIcon('fail', FailIcon);
 registerIcon('search', SearchIcon);
 registerIcon('back', BackIcon);
 registerIcon('move', MoveIcon);
+registerIcon('info', InfoIcon);
 
 export function Icon({
   icon,

src/icons/info.svg

@@ -0,0 +1,8 @@
+<svg xmlns="http://www.w3.org/2000/svg" 
+    xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 16 16" version="1.1" p-id="1463">
+    <g id="Group-9">
+        <circle id="Oval-7" stroke="currentColor" fill="transparent" cx="8" cy="8" r="7.5"></circle>
+        <rect id="Rectangle-26" fill="currentColor" x="7" y="3" width="2" height="2"></rect>
+        <rect id="Rectangle-26-Copy" fill="currentColor" x="7" y="6" width="2" height="7"></rect>
+    </g>
+</svg>

src/renderers/Form/File.tsx

@@ -91,7 +91,7 @@ function gennerateId() {
 
 let preventEvent = (e: any) => e.stopPropagation();
 
-function getNameFromUrl(url: string) {
+export function getNameFromUrl(url: string) {
   if (/(?:\/|^)([^\/]+?)$/.test(url)) {
     return decodeURIComponent(RegExp.$1);
   }

src/renderers/Form/Image.tsx

@@ -8,16 +8,13 @@ import find = require('lodash/find');
 import qs from 'qs';
 import {Payload} from '../../types';
 import {buildApi} from '../../utils/api';
-import {createObject, qsstringify} from '../../utils/helper';
+import {createObject, qsstringify, guid} from '../../utils/helper';
 import {Icon} from '../../components/icons';
 import Button from '../../components/Button';
 // @ts-ignore
 import accepts from 'attr-accept';
+import {getNameFromUrl} from './File';
 
-let id = 1;
-function gennerateId() {
-  return id++;
-}
 let preventEvent = (e: any) => e.stopPropagation();
 
 export interface ImageProps extends FormControlProps {
@@ -122,7 +119,7 @@ export default class ImageControl extends React.Component<
             ? {
                 value,
                 url: value,
-                id: gennerateId()
+                id: guid()
               }
             : value),
           state: 'init'
@@ -146,6 +143,7 @@ export default class ImageControl extends React.Component<
     files: []
   };
 
+  files: Array<FileValue | FileX> = [];
   cropper = React.createRef<Cropper>();
   dropzone = React.createRef<any>();
   current: FileValue | FileX | null = null;
@@ -222,7 +220,7 @@ export default class ImageControl extends React.Component<
             if (
               obj &&
               (org = find(
-                this.state.files,
+                this.files,
                 item => (item as FileValue).value === obj.value
               ))
             ) {
@@ -239,7 +237,7 @@ export default class ImageControl extends React.Component<
       }
 
       this.setState({
-        files
+        files: this.files = files
       });
     }
 
@@ -288,15 +286,15 @@ export default class ImageControl extends React.Component<
     const files = rejectedFiles.map((file: any) => ({
       ...file,
       state: 'invalid',
-      id: gennerateId(),
+      id: guid(),
       name: file.name
     }));
 
     this.setState({
-      files: multiple
+      files: this.files = multiple
-        ? this.state.files.concat(files)
+        ? this.files.concat(files)
-        : this.state.files.length
+        : this.files.length
-        ? this.state.files
+        ? this.files
         : files.slice(0, 1)
     });
 
@@ -316,7 +314,7 @@ export default class ImageControl extends React.Component<
       {
         uploading: true,
         locked: true,
-        files: this.state.files.map(file => {
+        files: this.files = this.files.map(file => {
           if (file.state === 'error') {
             file.state = 'pending';
           }
@@ -347,23 +345,20 @@ export default class ImageControl extends React.Component<
       return;
     }
 
-    const file = find(
+    const file = find(this.files, item => item.state === 'pending') as FileX;
-      this.state.files,
-      item => item.state === 'pending'
-    ) as FileX;
     if (file) {
       this.current = file;
 
       file.state = 'uploading';
       this.setState(
         {
-          files: this.state.files.concat()
+          files: this.files = this.files.concat()
         },
         () =>
           this.sendFile(
             file as FileX,
             (error, file, obj) => {
-              const files = this.state.files.concat();
+              const files = this.files.concat();
               const idx = files.indexOf(file);
 
               if (!~idx) {
@@ -383,26 +378,29 @@ export default class ImageControl extends React.Component<
 
                   return this.setState(
                     {
-                      files: files,
+                      files: this.files = files,
                       error: error
                     },
                     this.tick
                   );
                 }
               } else {
-                newFile = obj as FileValue;
+                newFile = {
+                  ...obj,
+                  preview: file.preview
+                } as FileValue;
               }
               files.splice(idx, 1, newFile);
               this.current = null;
               this.setState(
                 {
-                  files: files
+                  files: this.files = files
                 },
                 this.tick
               );
             },
             progress => {
-              const files = this.state.files.concat();
+              const files = this.files.concat();
               const idx = files.indexOf(file);
 
               if (!~idx) {
@@ -412,7 +410,7 @@ export default class ImageControl extends React.Component<
               // file 是个非 File 对象，先不copy了直接改。
               file.progress = progress;
               this.setState({
-                files
+                files: this.files = files
               });
             }
           )
@@ -428,7 +426,7 @@ export default class ImageControl extends React.Component<
 
           if (this.resolve) {
             this.resolve(
-              this.state.files.some(file => file.state === 'error')
+              this.files.some(file => file.state === 'error')
                 ? '文件上传失败请重试'
                 : null
             );
@@ -440,13 +438,13 @@ export default class ImageControl extends React.Component<
   }
 
   removeFile(file: FileValue, index: number) {
-    const files = this.state.files.concat();
+    const files = this.files.concat();
 
     files.splice(index, 1);
 
     this.setState(
       {
-        files: files
+        files: this.files = files
       },
       this.onChange
     );
@@ -455,7 +453,7 @@ export default class ImageControl extends React.Component<
   editImage(index: number) {
     const {multiple} = this.props;
 
-    const files = this.state.files;
+    const files = this.files;
 
     this.setState({
       cropFile: {
@@ -475,7 +473,7 @@ export default class ImageControl extends React.Component<
       valueField
     } = this.props;
 
-    const files = this.state.files.filter(
+    const files = this.files.filter(
       file => file.state == 'uploaded' || file.state == 'init'
     );
 
@@ -542,7 +540,7 @@ export default class ImageControl extends React.Component<
         return;
       }
 
-      blob.id = gennerateId();
+      blob.id = guid();
       files.push(blob);
     });
 
@@ -577,7 +575,7 @@ export default class ImageControl extends React.Component<
     }
 
     const {multiple, maxLength, maxSize, accept} = this.props;
-    let currentFiles = this.state.files;
+    let currentFiles = this.files;
 
     if (!multiple && currentFiles.length) {
       currentFiles = [];
@@ -604,9 +602,9 @@ export default class ImageControl extends React.Component<
       }
 
       file.state = 'pending';
-      file.id = gennerateId();
+      file.id = guid();
       if (!file.preview || !file.url) {
-        file.preview = window.URL.createObjectURL(file);
+        file.preview = URL.createObjectURL(file);
       }
       inputFiles.push(file);
     });
@@ -618,7 +616,7 @@ export default class ImageControl extends React.Component<
     this.setState(
       {
         error: undefined,
-        files: currentFiles.concat(inputFiles),
+        files: this.files = currentFiles.concat(inputFiles),
         locked: true
       },
       () => {
@@ -769,7 +767,7 @@ export default class ImageControl extends React.Component<
     const img = new Image();
     img.onload = () => {
       delete img.onload;
-      const files = this.state.files.concat();
+      const files = this.files.concat();
       const file = files[index];
 
       if (!file) {
@@ -789,7 +787,7 @@ export default class ImageControl extends React.Component<
 
       this.setState(
         {
-          files: files
+          files: this.files = files
         },
         !needUploading ? this.onChange : undefined
       );
@@ -802,13 +800,13 @@ export default class ImageControl extends React.Component<
       return this.state.lockedReason;
     } else if (
       this.state.uploading ||
-      this.state.files.some(item => item.state === 'pending')
+      this.files.some(item => item.state === 'pending')
     ) {
       return new Promise(resolve => {
         this.resolve = resolve;
         this.startUpload();
       });
-    } else if (this.state.files.some(item => item.state === 'error')) {
+    } else if (this.files.some(item => item.state === 'error')) {
       return '文件上传失败请重试';
     }
   }
@@ -890,7 +888,7 @@ export default class ImageControl extends React.Component<
                       'is-reject': isDragReject
                     })}
                   >
-                    把图片拖到这，然后松完成添加！
+                    把图片拖到这，然后松开完成添加！
                   </div>
                 ) : (
                   <>
@@ -962,7 +960,7 @@ export default class ImageControl extends React.Component<
                                       this,
                                       key
                                     )}
-                                    src={file.url || file.preview}
+                                    src={file.preview || file.url}
                                     alt={file.name}
                                   />
                                 </div>
@@ -973,11 +971,11 @@ export default class ImageControl extends React.Component<
                                 >
                                   {file.info ? (
                                     [
-                                      <div key="1">
+                                      <div key="info">
                                         {file.info.width} x {file.info.height}
                                       </div>,
                                       file.info.len ? (
-                                        <div key="2">
+                                        <div key="size">
                                           {ImageControl.formatFileSize(
                                             file.info.len
                                           )}
@@ -1020,6 +1018,13 @@ export default class ImageControl extends React.Component<
                                       <Icon icon="remove" className="icon" />
                                     </a>
                                   ) : null}
+                                  <a
+                                    data-tooltip={getNameFromUrl(file.value)}
+                                    data-position="bottom"
+                                    target="_blank"
+                                  >
+                                    <Icon icon="info" className="icon" />
+                                  </a>
                                 </div>
                               </>
                             )}