bug fix

src/components/XForm/ImageListUpload.jsx

@@ -3,63 +3,77 @@ import { Upload, Icon, Modal } from 'antd';
 import './style.less';
 import { uploaderProps } from '../../utils/upload';
 
-function getBase64(file) {
-  return new Promise((resolve, reject) => {
-    const reader = new FileReader();
-    reader.readAsDataURL(file);
-    reader.onload = () => resolve(reader.result);
-    reader.onerror = error => reject(error);
-  });
-}
-
 class ImageListUpload extends React.Component {
   state = {
     previewVisible: false,
     previewImage: '',
-    fileList: [],
+    loadding: false,
   };
 
+  getFileList = () => {
+    return (this.props.value || []).map((img, inx) => ({ uid: inx, url: img, status: 'done' }))
+  }
+
   handleCancel = () => this.setState({ previewVisible: false });
 
   handlePreview = async file => {
-    if (!file.url && !file.preview) {
-      file.preview = await getBase64(file.originFileObj);
-    }
-
     this.setState({
-      previewImage: file.url || file.preview,
+      previewImage: file.url ,
       previewVisible: true,
     });
   };
 
-  handleChange = ({ fileList }) => {
-    this.setState({ fileList })
-    if (typeof this.props.onChange === 'function') {
-      // return item.response.url
-      const images = fileList.filter(item => item.status === 'done')
-      this.props.onChange(images.map(item => item.response.url))
+  handleChange = (e) => {
+    if (e.file.status === "uploading") {
+      this.setState({ loading: true });
+      return;
+    }
+
+    if (e.file.state === 'removed') {
+      const fileList = (this.props.value || []).filter(x => x != e.file.url);
+      this.props.onChange(fileList);
     }
+
+    // if (e.file.status === "done") {
+    //   this.setState({
+    //     loading: false,
+    //   })
+
+    //   if (e.file.response && e.file.response.url) {
+    //     if (typeof this.props.onChange === 'function') {
+    //       const fileList = this.getFileList()
+    //       this.props.onChange([...fileList || [], e.file.response.url]);
+    //     }
+    //   }
+    // }
   };
 
-  render() {
-    const { previewVisible, previewImage, fileList } = this.state;
+  handleUploadSucess = (url) => {
+    this.setState({ loading: false });
+    if (typeof this.props.onChange === 'function') {
+      const fileList = this.props.value || [];
+      this.props.onChange([...fileList, url]);
+    }
+  }
 
-    const { value } = this.props
+  render() {
+    const { previewVisible, previewImage } = this.state;
+    const fileList = this.getFileList();
 
     const uploadButton = (
       <div>
-        <Icon type="plus" />
-        <div className="ant-upload-text">Upload</div>
+        <Icon style={{ fontSize: '2em', color: '#aaa' }} type={this.state.loading ? "loading" : "plus"}  />
       </div>
     );
     return (
       <div className="clearfix">
         <Upload
           listType="picture-card"
-          fileList={fileList || value}
+          fileList={fileList}
           onPreview={this.handlePreview}
           onChange={this.handleChange}
           { ...uploaderProps }
+          onSuccess={this.handleUploadSucess}
         >
           {fileList.length >= 8 ? null : uploadButton}
         </Upload>

src/components/XForm/ImageUpload.jsx

@@ -16,24 +16,35 @@ class ImageUpload extends React.Component {
       this.setState({ loading: true });
       return;
     }
+    
+    if (e.file.state === 'removed') {
+      this.props.onChange();
+    }
 
-    if (info.file.status === "done") {
-      this.setState({
-        loading: false,
-      })
+    // if (info.file.status === "done") {
+    //   this.setState({
+    //     loading: false,
+    //   })
 
-      if (info.file.response && info.file.response.url) {
-        this.setState({
-          imageUrl: info.file.response.thumbUrl,
-        });
+    //   if (info.file.response && info.file.response.url) {
+    //     this.setState({
+    //       imageUrl: info.file.response.thumbUrl,
+    //     });
 
-        if (typeof this.props.onChange === 'function') {
-          this.props.onChange(info.file.response.url);
-        }
-      }
-    }
+    //     if (typeof this.props.onChange === 'function') {
+    //       this.props.onChange(info.file.response.url);
+    //     }
+    //   }
+    // }
   };
 
+  handleUploadSucess = (url) => {
+    this.setState({ loading: false });
+    if (typeof this.props.onChange === 'function') {
+      this.props.onChange(url);
+    }
+  }
+
   render() {
     const uploadButton = (
       <div>
@@ -50,8 +61,8 @@ class ImageUpload extends React.Component {
         showUploadList={false}
         beforeUpload={this.props.beforeUpload}
         onChange={this.handleChange}
-
         {...uploaderProps}
+        onSuccess={this.handleUploadSucess}
       >
         {(this.state.imageUrl || value) ? (
           <img src={this.state.imageUrl || value} alt="avatar" style={{ width: "100%" }} />

src/services/apis.js

@@ -2,10 +2,14 @@ const prefix = '/api/admin'
 
 export default {
   image: {
-    upload: {
+    uploadForAnt: {
       url: `${prefix}/antd/image`,
       method: 'POST',
-    }
+    },
+    upload: {
+      url: `${prefix}/image`,
+      method: 'POST',
+    },
   },
   user: {
     current: {

src/utils/upload.js

@@ -1,11 +1,39 @@
-import apis from '../services/apis';
+import { fetch, apis } from './request';
+import mixStr from './mixStr';
+
+const getToken = () => mixStr(window.localStorage.getItem('test-foobar'))
+
+const uploadImage = fetch(apis.image.upload)
 
 const uploaderProps = {
   name: 'file',
-  action: apis.image.upload.url,
-  headers: {
-    Authorization: `Bearer ${window.localStorage.getItem('x-token')}`
-  }
+  // action: apis.image.uploadForAnt.url,
+  accept: '.png, .jpg, .jpeg, .gif',
+  // headers: {
+  //   Authorization: `Bearer ${getToken()}`
+  // },
+  customRequest({
+    action,
+    file,
+    headers,
+    onError,
+    onProgress,
+    onSuccess,
+    withCredentials,
+  }) {
+    const data = new FormData()
+    data.append('file', file)
+
+    uploadImage({ data }).then((img) => {
+      onSuccess(img, file);
+    }).catch(onError);
+
+    return {
+      abort() {
+        console.log('upload progress is aborted.');
+      },
+    };
+  },
 }
 
 export { uploaderProps }