图片上传策略修改

src/components/Uploader/index.js

@@ -1,6 +1,5 @@
 import React, { PureComponent } from 'react';
-import PropTypes from 'prop-types';
-import { message, Upload, Icon, Modal } from 'antd';
+import { message, Tooltip, Upload, Icon, Modal } from 'antd';
 import styles from './index.less';
 import { getSignature } from '../../services/resource';
 
@@ -32,76 +31,85 @@ const renderAccept = (accept) => {
 }
 
 export default class Uploader extends PureComponent {
-  static propTypes = {
-    files: PropTypes.oneOfType([PropTypes.array, PropTypes.string]),
-    onUpload: PropTypes.func.isRequired,
-    multiple: PropTypes.oneOfType([PropTypes.bool, PropTypes.number]),
-    disabled: PropTypes.bool,
-    path: PropTypes.string,
-    accept: PropTypes.string,
-  };
-
   constructor(props) {
     super(props);
     this.state = {
       previewVisible: false,
       previewImage: '',
-      files: getFileList(props.files),
+      files: getFileList(props.fileUrl),
       signature: {},
       fileName: '',
+      completePath: '',
     };
   }
 
   componentWillReceiveProps(nextProps) {
-    // // 当前属性中的文件对象是一个列表并且接受到的属性中files不为空
-    // if (Array.isArray(this.props.files) && !this.props.files.length && !!nextProps.files.length) {
-    //   this.setState({ files: getFileList(nextProps.files) });
-    // }
-      this.setState({ files: getFileList(nextProps.files) });
+    this.setState({ files: getFileList(nextProps.fileUrl) });
+  }
+
+  genRandomFileName = (fileName, fileCode) => {
+    let relativePath = (fileCode || '').replace(/-/g, '/') + '/';
+    let separatorIndex = fileName.lastIndexOf('.');
+    let name = fileName.substring(0, separatorIndex);
+    let suffix = fileName.substring(separatorIndex + 1, fileName.length);
+    let ossFileName =  ((new Date()).getTime()).toString() + Math.floor(Math.random() * 10000) + '.' + suffix;
+    return `${relativePath}${ossFileName}`;
   }
 
   render() {
-    const { previewVisible, previewImage, files, signature, fileName } = this.state;
-    const { multiple = 1, onUpload, disabled, path, accept } = this.props;
+    const {
+      files,
+      fileName,
+      signature,
+      completePath,
+      previewImage,
+      previewVisible,
+    } = this.state;
+    const { accept, fileCode, onUpload, multiple = 1 } = this.props;
 
-    // 根据单图/多图上传模式来选择返回一个还是多个文件对象
     const renderFiles = (fileList) => {
       const newFiles = fileList.map(file => {
         return file.response ? file.response.data.file : file;
       });
-      if (multiple === 1) {
-        return newFiles[0];
-      }
-      return newFiles;
+      return newFiles[0];
     }
 
+    //upload上传参数配置
     const uploadProps = {
       accept: renderAccept(accept),
       action: signature.host,
       headers: {
-        'Authorization': `OSS${signature.accessid}:${signature.signature}`,
+        'Authorization': `OSS ${signature.accessid}:${signature.signature}`,
       },
       data: {
         policy: signature.policy,
         signature: signature.signature,
         OSSAccessKeyId: signature.accessid,
-        key: `${signature.dir}${fileName}`,
+        key: `${signature.dir}${completePath}`,
         success_action_status: '200',
       },
-      disabled,
       listType: 'picture-card',
       fileList: files,
-      multiple: multiple === true,
+      disabled: fileCode ? false : true,
+      multiple: multiple ? true : false,
       onPreview: (file) => {
-        this.setState({ previewImage: file.url || file.thumbUrl, previewVisible: true });
-      },
-      beforeUpload: (file, fileList) => {
-        // 根据图片名称，转换成路径地址
         this.setState({
-          fileName: file.name.replace(/-/g, '/')
+          previewImage: file.url || file.thumbUrl,
+          previewVisible: true,
         });
+      },
+      beforeUpload: (file, fileList) => {
         // 进行签名校验，失效则刷新签名
-        return getSignature({ fileName: file.name }).then(res => this.setState({signature: { ...res.data }}));
+        return getSignature({ fileName: file.name })
+          .then(res =>
+            this.setState({
+              signature: {
+                ...res.data,
+              },
+              fileName: file.name,
+              completePath: this.genRandomFileName(file.name, fileCode),
+            })
+          );
       },
       onChange: ({ file, fileList }) => {
         // 检查图片大小，不能超过5M
@@ -113,16 +121,12 @@ export default class Uploader extends PureComponent {
         this.setState({ files: fileList });
         // 检查上传过程中图片的状态，上传成功回传fileName, signature, file
         if (file.percent === 100 && file.status === 'done') {
-          onUpload(renderFiles(fileList, 1), fileName, signature);
+          onUpload(renderFiles(fileList, 1), completePath, signature);
         } else if (file.status === 'error') {
           message.error('图片上传失败!');
-          // this.setState({ files: [] });
         }
       },
       onRemove: (file) => {
-        if (disabled) {
-          return false;
-        }
         const fileList = this.state.files.filter(item => item.uid !== file.uid);
         onUpload(renderFiles(fileList, 0), fileName, signature);
         return true;
@@ -144,12 +148,25 @@ export default class Uploader extends PureComponent {
 
     return (
       <div>
-        <Upload {...uploadProps}>
-          {multiple === true ? uploadButton : (files.length < multiple && uploadButton)}
-        </Upload>
-        <Modal {...modalProps}>
-          <img className={styles.previewImage} alt="" src={previewImage} />
-        </Modal>
+        {fileCode ?
+          <div>
+            <Upload {...uploadProps}>
+              {multiple === true ? uploadButton : (files.length < multiple && uploadButton)}
+            </Upload>
+            <Modal {...modalProps}>
+              <img className={styles.previewImage} alt="" src={previewImage} />
+            </Modal>
+          </div>
+        :
+          <Tooltip placement="top" title="请先指定编号和名称">
+            <Upload {...uploadProps}>
+              {multiple === true ? uploadButton : (files.length < multiple && uploadButton)}
+            </Upload>
+            <Modal {...modalProps}>
+              <img className={styles.previewImage} alt="" src={previewImage} />
+            </Modal>
+          </Tooltip>
+        }
       </div>
     );
   }

src/routes/Course/Edit/index.js

@@ -297,8 +297,8 @@ export default class CourseDetail extends PureComponent {
       key: 'code',
     },{
       title: '课名称',
-      dataIndex: 'name',
-      key: 'name',
+      dataIndex: 'title',
+      key: 'title',
     }];
 
     const supportTableColumns = [{

src/routes/Course/Edit/lesson.js

@@ -44,8 +44,8 @@ export default class LessonSelectSortModal extends PureComponent {
         key: 'code',
       },{
         title: '课名称',
-        dataIndex: 'name',
-        key: 'name',
+        dataIndex: 'title',
+        key: 'title',
       }],
     };
 
@@ -58,8 +58,8 @@ export default class LessonSelectSortModal extends PureComponent {
         key: 'code',
       },{
         title: '课名称',
-        dataIndex: 'name',
-        key: 'name',
+        dataIndex: 'title',
+        key: 'title',
       }],
       ...fsTableOpts,
     }

src/routes/Course/Edit/resource.js

@@ -53,8 +53,8 @@ export default class ResourceSelectModal extends PureComponent {
         key: 'code',
       },{
         title: '图片名称',
-        dataIndex: 'name',
-        key: 'name',
+        dataIndex: 'title',
+        key: 'title',
       }],
       ...fsTableOpts,
     }

src/routes/Lesson/Edit/index.js

@@ -136,7 +136,7 @@ export default class LessonDetail extends PureComponent {
   render() {
     const { dispatch, form: { getFieldDecorator }, lessonDetail, ware } = this.props;
     const { itemLoading, currentItem, filters, modalVisible } = lessonDetail;
-    const { wareList, name, code, digest } = currentItem;
+    const { wareList, title, code, digest } = currentItem;
     const { list, listLoading, pagination } = ware;
 
     // 待选表格去掉分页的跳转及变换页码
@@ -152,8 +152,8 @@ export default class LessonDetail extends PureComponent {
       width: '50%',
     },{
       title: '课件名称',
-      dataIndex: 'name',
-      key: 'name',
+      dataIndex: 'title',
+      key: 'title',
       width: '50%',
     }];
 
@@ -184,9 +184,9 @@ export default class LessonDetail extends PureComponent {
                 })(<Input />)}
               </Form.Item>
               <Form.Item label="课名称：" hasFeedback {...formItemLayout}>
-                {getFieldDecorator('name', {
+                {getFieldDecorator('title', {
                   rules: [{ required: true, type: 'string', message: "名称为必填项!" }],
-                  initialValue: name,
+                  initialValue: title,
                 })(<Input />)}
               </Form.Item>
               <Form.Item label="课简述：" hasFeedback {...formItemLayout}>

src/routes/Lesson/Edit/modal.js

@@ -44,8 +44,8 @@ export default class WareSelectSortModal extends PureComponent {
         key: 'code',
       },{
         title: '课件名称',
-        dataIndex: 'name',
-        key: 'name',
+        dataIndex: 'title',
+        key: 'title',
       }],
     };
 
@@ -58,8 +58,8 @@ export default class WareSelectSortModal extends PureComponent {
         key: 'code',
       },{
         title: '课件名称',
-        dataIndex: 'name',
-        key: 'name',
+        dataIndex: 'title',
+        key: 'title',
       }],
       ...fsTableOpts,
     }

src/routes/Lesson/List/table.js

@@ -24,8 +24,8 @@ export default class TableList extends PureComponent {
       width: '28%',
     },{
       title: '课名称',
-      dataIndex: 'name',
-      key: 'name',
+      dataIndex: 'title',
+      key: 'title',
       width: '28%',
     },{
       title: '状态',

src/routes/MProduct/Edit/index.js

@@ -85,7 +85,7 @@ export default class MerchantProductEdit extends PureComponent {
             <div>
                 <DescriptionList size="large" col={2}>
                     <Description term="课程编号">{data.code}</Description>
-                    <Description term="课程名称">{data.name}</Description>
+                    <Description term="课程名称">{data.title}</Description>
                     <Description term="课程简介">{data.digest}</Description>
                     <Description term="课程详情">{data.detail}</Description>
                     <Description term="课程子标题">{data.subTitle}</Description>

src/routes/Resource/gallery/modal.js

@@ -6,8 +6,20 @@ import { Codes, statuses } from '../../../utils/config';
 
 @Form.create()
 export default class ModalForm extends PureComponent {
+  constructor(props) {
+    super(props);
+    this.state = {
+      filePath: '',
+      fileCode: props.item.code,
+    };
+  }
+  componentWillReceiveProps(nextProps) {
+    if (nextProps.item.code) {
+      this.setState({ fileCode: nextProps.item.code });
+    }
+  }
   // 图片上传成功
-  handleSingleUpload = (file, fileName, signature) => {
+  handleSingleUpload = (file, ossFileName, signature) => {
     const { onUpload, onRemove } = this.props;
     if (file) {
       const separatorIndex = file.name.lastIndexOf('.');
@@ -17,9 +29,8 @@ export default class ModalForm extends PureComponent {
         name,
         format: suffix,
         size: file.size,
-        code: name,
-        path: `${signature.dir}${fileName}`,
-        url: `${signature.host}/${signature.dir}${fileName}`,
+        path: `${signature.dir}${ossFileName}`,
+        url: `${signature.host}/${signature.dir}${ossFileName}`,
       };
       message.success('图片上传成功!');
       onUpload(data);
@@ -30,6 +41,12 @@ export default class ModalForm extends PureComponent {
     }
   }
 
+  handleCodeInputChange = (e) => {
+    this.setState({
+      fileCode: e.target.value,
+    });
+  }
+
   handleOk = () => {
     const {
       form: {
@@ -44,6 +61,7 @@ export default class ModalForm extends PureComponent {
     validateFields((errors) => {
       if (errors) return;
       const data = { ...getFieldsValue() };
+      data.code = this.state.fileCode;
       if (modalType == 'update') {
         const { id, status, type } = item;
         data.id = id;
@@ -63,12 +81,14 @@ export default class ModalForm extends PureComponent {
     const { resetFields } = form;
     onCancel();
     resetFields();
+    this.setState({ fileCode: '' });
   }
 
   render() {
-    const { item, signature, form, ...modalProps } = this.props;
-    const { getFieldDecorator } = form;
-    const { code, name, format, size, url, path } = item;
+    const { item, form, modalType, ...modalProps } = this.props;
+    const { fileCode } = this.state;
+    const { getFieldDecorator, getFieldsValue } = form;
+    const { name, format, size, url, path } = item;
 
     const formItemLayout = {
       labelCol: {
@@ -88,41 +108,49 @@ export default class ModalForm extends PureComponent {
     return (
       <Modal {...modalOpts}>
         <Form layout="horizontal">
-          <Form.Item label="单图上传" {...formItemLayout}>
-            <Uploader
-              accept="image"
-              files={url}
-              signature={signature}
-              onUpload={::this.handleSingleUpload}
+          <Form.Item label="图片编号：" {...formItemLayout}>
+            <Input
+              value={fileCode}
+              onChange={this.handleCodeInputChange}
+              placeholder="请输入"
+              disabled={modalType === 'update' ? true : false}
             />
           </Form.Item>
-          <Form.Item label="图片编号：" hasFeedback {...formItemLayout}>
-            {getFieldDecorator('code', {
-              rules: [{ required: true, type: 'string', message: "此项为必填项!" }],
-              initialValue: code,
-            })(<Input />)}
-          </Form.Item>
-          <Form.Item label="图片名称：" hasFeedback {...formItemLayout}>
+          <Form.Item label="图片名称：" {...formItemLayout}>
             {getFieldDecorator('name', {
-              rules: [{ required: true, type: 'string', message: "此项为必填项!" }],
               initialValue: name,
-            })(<Input />)}
+            })(
+              <Input placeholder="请输入" />
+            )}
           </Form.Item>
-          <Form.Item label="图片路径：" hasFeedback {...formItemLayout}>
+          <Form.Item label="图片路径：" {...formItemLayout}>
             {getFieldDecorator('path', {
-              rules: [{ required: true, type: 'string', message: "此项为必填项!" }],
               initialValue: path,
-            })(<Input placeholder="上传图片后自动生成"/>)}
+            })(
+              <Input disabled={true} />
+            )}
           </Form.Item>
           <Form.Item label="图片格式：" {...formItemLayout}>
             {getFieldDecorator('format', {
               initialValue: format,
-            })(<Input placeholder="上传图片后自动生成" />)}
+            })(
+              <Input disabled={true}/>
+            )}
           </Form.Item>
           <Form.Item label="图片大小：" {...formItemLayout}>
             {getFieldDecorator('size', {
               initialValue: size,
-            })(<Input placeholder="上传图片后自动生成" suffix={"字节"} />)}
+            })(
+              <Input disabled={true} suffix={"字节"} />
+            )}
+          </Form.Item>
+          <Form.Item label="单图上传" {...formItemLayout}>
+            <Uploader
+              accept="image"
+              fileUrl={url}
+              fileCode={fileCode}
+              onUpload={this.handleSingleUpload}
+            />
           </Form.Item>
         </Form>
       </Modal>

src/routes/Ware/Edit/index.js

@@ -165,7 +165,7 @@ export default class WareDetail extends PureComponent {
     const { resType } = this.state;
     const { getFieldDecorator } = form;
     const { itemLoading, currentItem, filters, modalVisible } = wareDetail;
-    const { resourceList, name, code, digest, category } = currentItem;
+    const { resourceList, title, code, digest, category } = currentItem;
     const { list, listLoading, pagination } = resource;
 
     // 待选表格去掉分页的跳转及变换页码
@@ -229,9 +229,9 @@ export default class WareDetail extends PureComponent {
                 })(<Input />)}
               </Form.Item>
               <Form.Item label="课件名称：" hasFeedback {...formItemLayout}>
-                {getFieldDecorator('name', {
+                {getFieldDecorator('title', {
                   rules: [{ required: true, type: 'string', message: "名称为必填项!" }],
-                  initialValue: name,
+                  initialValue: title,
                 })(<Input />)}
               </Form.Item>
               <Form.Item label="课件分类：" hasFeedback {...formItemLayout}>

src/routes/Ware/List/table.js

@@ -25,8 +25,8 @@ export default class TableList extends PureComponent {
       width: '28%',
     },{
       title: '课件名称',
-      dataIndex: 'name',
-      key: 'name',
+      dataIndex: 'title',
+      key: 'title',
       width: '28%',
     },{
       title: '状态',

src/utils/config.js

@@ -44,7 +44,8 @@ Codes.CODE_SEASON = '季';
 Codes.CODE_ITEM = '件';
 
 module.exports = {
-  apiHost: 'http://tt-cms.api.ai160.com',
+  apiHost: 'http://192.168.1.40:8500',
+  // apiHost: 'http://tt-cms.api.ai160.com',
   ossHost: 'http://efunimgs.oss-cn-beijing.aliyuncs.com',
   // 每页返回数据量
   pageSize: 20,