@sheinoutmobile/shineoutmobile 1.8.2

package/src/component/uploader/index.jsx

@@ -0,0 +1,445 @@
+import React, { PureComponent, isValidElement } from 'react';
+import propTypes from 'prop-types';
+import { parseFiles, setArray, checkFileType } from './js';
+import getImageBase64, { getImageBase64List } from './js/get-image-base64';
+import getImageDetail from './js/get-image-detail';
+import merge from './js/merge-class-name';
+import styles from './styles/index.less';
+import Thumbnails from './jsx/thumbnails';
+import { textConf, fontConf, fileTypeIcons, findIconByType } from './jsx/config';
+import defaultRequest, { ERROR, UPLOADING } from './js/request';
+
+/**
+ * @cn 图片压缩
+ * @desc 支持指定类型图片的压缩处理
+ *
+ * @author yan geliang
+ * @date 2019-07-16
+ */
+class Uploader extends PureComponent {
+  constructor(props) {
+    super(props);
+
+    this.inputRef = React.createRef();
+    this.uploaderBody = React.createRef();
+
+    this.timeout = null; // 定时器，用于过滤掉一些无谓的操作
+    this.state = {
+      processedFiles: [], // 被压缩或者其他处理后的file对象数组
+      compressStatus: 'default', // default: 无；pending: 压缩正在进行；resolve：压缩完成；
+    };
+  }
+
+  // 为了动态计算到底多宽和多高，因为现在外围容器是inline-block，但内容需要宽度来进行grid布局
+  componentDidUpdate() {
+    const { limit, children } = this.props;
+    if (children) return; // 倘若是外部引入，则不在进行计算，也不会使用缩略图
+
+    const currentFiles = this.getCurrentFiles();
+
+    const width = 80 + (88 * currentFiles.length);
+    this.uploaderBody.current.style.width = `${width}px`;
+    const clientWidth = this.uploaderBody.current.clientWidth;
+
+    const extraCount = currentFiles.length < limit ? 1 : 0; // 如果超过了限制，那个选图片的图标会消失
+    const count = Math.floor((clientWidth + 8) / 88) ; // 一行能容纳多少个缩略图(含加号)
+    const rows = Math.ceil((currentFiles.length + extraCount) / count); // 有多少行
+
+    // console.log(`一行能容纳: ${count}`, `总共${rows}`);
+
+    if (width > clientWidth) {
+      this.uploaderBody.current.style.paddingBottom = `${80 + (rows - 1) * 88}px`;
+    } else {
+      this.uploaderBody.current.style.paddingBottom = '80px';
+    }
+  }
+
+  /**
+   * 处理文件
+   * @param {array} filesList 文件列表
+   * @private
+   */
+  previewFile(filesList) {
+    const self = this;
+    const { accept, onChange, imageCompression, onError, action, request } = this.props;
+
+    const currentFiles = this.getCurrentFiles();
+
+    // 检测指定的接受格式和实际传入文件的格式是否匹配
+    const errorDesc = checkFileType(filesList, accept);
+    if (errorDesc) {
+      console.error(errorDesc);
+      if (typeof onError === 'function') onError(errorDesc);
+      return;
+    }
+
+    if (action || request) {
+      if (filesList.length === 1) {
+        this.uploadFile(filesList[0], 0);
+      } else {
+        // TODO 多个文件的先不支持，等待重构
+      }
+    } else {
+      // 此setTimeout出现问题，执行时间对不上，应该是由于下方parseFiles的异步导致的，等待排查
+      // this.timeout = setTimeout(() => this.setState({ compressStatus: 'pending' }), 100)
+      this.setState({ compressStatus: 'pending' });
+
+      // 开始处理文件
+      parseFiles(filesList, imageCompression).then(({ processedFileList }) => {
+        const newProcessedFiles = [...currentFiles, ...processedFileList];
+
+        self.setState({ processedFiles: newProcessedFiles, compressStatus: 'resolve' });
+
+        if (self.timeout) {
+          clearTimeout(self.timeout);
+          self.timeout = null;
+        }
+
+        // 依次返回「处理过的(比如被压缩)file对象」
+        onChange(newProcessedFiles);
+      });
+    }
+  }
+
+  transformAccept() {
+    const { accept } = this.props;
+    return accept.indexOf('image') >= 0 ? 'image' : 'default';
+  }
+
+  getAction(file) {
+    const { action } = this.props;
+    if (typeof action === 'string') return action;
+    if (typeof action === 'function') return action(file);
+    return '';
+  }
+
+  uploadFile(file, index) {
+    const {
+      request,
+    } = this.props;
+    const opts = typeof request === 'object' ? request : {};
+    const {
+      name,
+      htmlName,
+      cors,
+      params,
+      withCredentials,
+      headers,
+      onStart = () => null,
+      onProgress = () => null,
+      onSuccess = () => null,
+      onError = () => null,
+    } = opts;
+
+    const req = typeof request === 'function' ? request : defaultRequest;
+    let throttle = false;
+    const options = {
+      url: this.getAction(file),
+      name: htmlName || name,
+      cors,
+      params,
+      withCredentials,
+      file,
+      headers,
+      onStart,
+      onProgress: (e, msg) => {
+        const percent = typeof e.percent === 'number' ? e.percent : (e.loaded / e.total) * 100;
+        if (throttle) return;
+        throttle = true;
+        setTimeout(() => {
+          throttle = false;
+        }, 16);
+
+        this.setState((preState) => {
+          const processTask = (preState.processTask || []).slice();
+          if (processTask[index]) {
+            processTask[index].process = percent;
+          } else {
+            processTask[index] = { process: percent };
+          }
+          return {
+            processTask,
+          };
+        });
+      },
+      onLoad: (xhr) => {
+        if (!/^2|1223/.test(xhr.status)) {
+          onError();
+          return;
+        }
+
+        let response = xhr.responseText || xhr.response;
+        if (onSuccess) {
+          response = onSuccess(response, file, xhr);
+        }
+
+        if (response instanceof Error) {
+          onError();
+        } else {
+          const values = (this.props.value || []).concat([response]);
+          this.props.onChange(values);
+        }
+      },
+      onError: () => {
+        this.setState((preState) => {
+          const processTask = (preState.processTask || []).slice();
+          if (processTask[index]) {
+            processTask[index].process = undefined;
+          } else {
+            processTask[index] = { process: undefined };
+          }
+          return {
+            processTask,
+          };
+        });
+        onError();
+      },
+    };
+    if (onProgress === false || onProgress === null) {
+      delete options.onProgress;
+    }
+
+    return req(options);
+  }
+  renderCtrlView = (item, index, list) => {
+    const { compressStatus } = this.state;
+    const {
+      renderCtrlView,
+      children,
+      icon,
+      text,
+      disabled,
+      onBeforeSelect,
+    } = this.props;
+
+    const compressingFlag = compressStatus === 'pending'; // 是否处于正在压缩
+
+    const onClick = () => {
+      if (compressingFlag) return;
+      if (onBeforeSelect()) {
+        this.inputRef.current.value = null; // 清掉input中当前的图片，以便能选择重复的图片
+        this.inputRef.current.click();
+      }
+    };
+
+    if (typeof children === 'function') return children(item, index, list, onClick);
+
+    if (React.isValidElement(children) && React.Children.only(children)) {
+      return React.cloneElement(children, {
+        onClick
+      });
+    }
+    if (typeof renderCtrlView === 'function') return renderCtrlView(item, index, list, onClick);
+
+    let title = compressingFlag ? '正在压缩' : text || textConf[this.transformAccept()];
+    if (item.process !== undefined) title = (item.process !== 100 ? '上传中' : '上传完成');
+
+    return (
+      <div
+        className={merge(styles.textCont, (compressingFlag || disabled) && styles.disabled)}
+        onClick={onClick}
+      >
+        <div>
+          {
+            isValidElement(icon)
+              ? <span className={styles.extraIcon}>{icon}</span>
+              : fontConf[this.transformAccept()]
+          }
+          <span className={styles.text}>
+            { title }
+          </span>
+        </div>
+      </div>
+    );
+  }
+
+  renderPreview(thumbnails) {
+    const { onChange } = this.props;
+
+    const currentFiles = this.getCurrentFiles();
+
+    return (
+      thumbnails.map((thumbnail, index) => (
+        <Thumbnails
+          key={index}
+          name={fileTypeIcons[thumbnail]}
+          src={thumbnail}
+          deleteClick={() => {
+            this.inputRef.current.value = null; // 清掉input中当前的图片，以便能选择重复的图片
+            const newProcessedFiles = (currentFiles || []).filter((p, ind) => ind !== index);
+            this.setState((preState) => {
+              const newProcessTask = (preState.processTask || []).filter((p, idx) => idx !== index);
+              return {
+                processedFiles: newProcessedFiles,
+                processTask: newProcessTask,
+              };
+            });
+            // 依次返回「处理过的(比如被压缩)file对象」
+            onChange(newProcessedFiles);
+          }}
+        />
+      ))
+    )
+  }
+
+  // 获取外部传入的value，或者在外部没传入时，采用state里的files
+  getCurrentFiles() {
+    const { processedFiles } = this.state;
+    const { value } = this.props;
+
+    return this.props.hasOwnProperty('value') ? value : processedFiles;
+  }
+
+  // 生成缩略图 || iconName
+  createThumbnails() {
+    const currentFiles = this.getCurrentFiles();
+
+    return currentFiles.map((f) => {
+      if (typeof f === 'string') return f;
+      if (f.type.indexOf('image') >= 0) return URL.createObjectURL(f);
+      return findIconByType(f.type);
+    });
+  }
+
+  render() {
+    const {
+      accept,
+      multiple,
+      disabled,
+      limit = 10,
+      className,
+      onError,
+      showPreview,
+      children,
+    } = this.props;
+
+    const currentFiles = this.getCurrentFiles();
+    const thumbnails = this.createThumbnails();
+
+    let { processTask } = this.state;
+    processTask = processTask && processTask.length > 0 ? processTask : [{}];
+
+    return (
+      <div ref={this.uploaderBody} className={!children && styles['sm-uploader']}>
+        <span className={merge(!children && styles['sm-uploader-content'], className)}>
+          {
+            thumbnails.length < limit || !showPreview
+              ? processTask.map(this.renderCtrlView)
+              : null
+          }
+          {
+            showPreview
+              ? (
+                children
+                  ? (<div className={styles['sm-uploader-content-thumbnails']}>{this.renderPreview(thumbnails)}</div>)
+                  : this.renderPreview(thumbnails)
+              )
+              : null
+          }
+          <input
+            ref={this.inputRef}
+            type="file"
+            accept={accept}
+            disabled={disabled}
+            multiple={multiple}
+            style={{ display: 'none' }}
+            onClick={(e) => {
+              e.stopPropagation();
+            }}
+            onChange={(e) => {
+              const fileList = e.files ? e.files : e.target.files;
+              const originFiles = fileList || this.inputRef.current.files;
+              if (originFiles.length + currentFiles.length > limit) {
+                console.warn('overdue the limit, 超出文件数量限制');
+                onError(new Error('超出文件数量限制'));
+                return;
+              }
+
+              // 此举仅为了把原生的file对象变成数组，准确来说也就一个file
+              const filesArray = setArray(originFiles);
+              this.previewFile(filesArray); // 这个位置处理新的file
+            }}
+          />
+        </span>
+      </div>
+    );
+  }
+}
+
+Uploader.propTypes = {
+  /** 文件或文件链接列表 */
+  value: propTypes.arrayOf(propTypes.object),
+  /** 上传地址 */
+  action: propTypes.string,
+  /** 上传配置或者上传方法 */
+  request: propTypes.oneOfType([
+    propTypes.shape({
+      name: propTypes.string,
+      htmlName: propTypes.string,
+      cors: propTypes.bool,
+      params: propTypes.object,
+      withCredentials: propTypes.bool,
+      headers: propTypes.object,
+      onStart: propTypes.func,
+      onProgress: propTypes.func,
+      onSuccess: propTypes.func,
+    }),
+    propTypes.func,
+  ]),
+  /** 是否支持多选 */
+  multiple: propTypes.bool,
+  /** 数据变化时触发
+   *  当配置 imageCompression 时，传入三个参数
+   *   files: 更新后的files，differFiles: 包含特殊属性的如base64、图片width的value，originalFiles是原始文件
+   *  当配置了 action、request，传入一个参数，value: 更新后的value
+   * */
+  onChange: propTypes.func,
+  /** 最多文件数量 */
+  limit: propTypes.number,
+  /** 接受的文件类型，与原生input一样 */
+  accept: propTypes.string,
+  /** 图片压缩参数 */
+  imageCompression: propTypes.shape({
+    /** 最大内存，M为单位 */
+    maxSize: propTypes.number,
+    /** 宽度、高度(只设定其中一个的话，另一个会根据比例变化) */
+    width: propTypes.number,
+    height: propTypes.number,
+  }),
+  /** 最外层的className */
+  className: propTypes.string,
+  /** 不可用 */
+  disabled: propTypes.bool,
+  /** 发生错误时触发，比如文件格式不匹配 */
+  onError: propTypes.func,
+  /** 自定义图标 */
+  icon: propTypes.node,
+  /** 自定义文字 */
+  text: propTypes.node,
+  /** 渲染点击区域，传入参数 上传对象，下标，上传列表，onClick 方法 */
+  renderCtrlView: propTypes.oneOfType([
+    propTypes.element,
+    propTypes.func
+  ]),
+  /* 是否显示图片预览 */
+  showPreview: propTypes.bool,
+  onBeforeSelect: propTypes.func,
+};
+
+Uploader.defaultProps = {
+  accept: '*',
+  disabled: false,
+  multiple: false,
+  limit: 10,
+  onChange: () => null,
+  onError: () => null,
+  showPreview: true,
+  onBeforeSelect: () => true,
+};
+
+Uploader.Img = Thumbnails;
+Uploader.getImageBase64 = getImageBase64;
+Uploader.getImageBase64List = getImageBase64List;
+Uploader.getImageDetail = getImageDetail;
+
+export default Uploader;

package/src/component/uploader/js/get-image-base64.js

@@ -0,0 +1,31 @@
+// 图片转base64格式
+const getImageBase64 = file => new Promise((resolve, reject) => {
+  const reader = new FileReader();
+
+  reader.onload = function onload() {
+    resolve({ code: 1, info: this.result });
+  };
+
+  // eslint-disable-next-line prefer-promise-reject-errors
+  reader.onerror = e => reject({ code: 0, msg: e });
+
+  reader.readAsDataURL(file);
+});
+
+export const getImageBase64List = files => new Promise((resolve, reject) => {
+  if (!files || files.length <= 0) resolve({ code: 1, info: [] });
+
+  const result = [];
+
+  files.forEach(async (file) => {
+    const base64Info = await getImageBase64(file);
+    if (base64Info.code) {
+      result.push(base64Info.info);
+      if (result.length === files.length) resolve({ code: 1, info: result });
+    } else {
+      reject(base64Info);
+    }
+  });
+});
+
+export default getImageBase64;

package/src/component/uploader/js/get-image-detail.js

@@ -0,0 +1,26 @@
+import getImageBase64 from './get-image-base64';
+
+// 获取图片宽/高
+async function getImageDetail(_base64, file) {
+  let base64 = _base64;
+  if (file) base64 = await getImageBase64(file);
+
+  return new Promise((resolve, reject) => {
+    const ImgEl = new Image();
+    ImgEl.src = base64;
+
+    document.body.appendChild(ImgEl);
+
+    ImgEl.onload = () => {
+      const [width, height] = [ImgEl.offsetWidth, ImgEl.offsetHeight];
+      document.body.removeChild(ImgEl);
+
+      resolve({ code: 1, info: { width, height } });
+    };
+
+    // eslint-disable-next-line prefer-promise-reject-errors
+    ImgEl.onerror = e => reject({ code: 0, msg: e });
+  });
+}
+
+export default getImageDetail;

package/src/component/uploader/js/index.js

@@ -0,0 +1,77 @@
+import compressImage from './tools';
+
+/**
+ * 返回结果：
+ * processedFileList: [], // 压缩后的图片
+ * differFileList: [{ width: number, height: number, base64: string }], // 压缩后图片的各类参数，如宽、高、base64
+ */
+function parseFiles(fileList, imageCompression) {
+  return new Promise((resolve, reject) => {
+    try {
+      const processedFileList = [];
+      const differFileList = [];
+
+      const resolveFinally = () => {
+        if (!fileList) {
+          resolve([]);
+          return;
+        }
+        if (processedFileList.length === fileList.length) {
+          resolve({ processedFileList, differFileList });
+        }
+      };
+
+      resolveFinally();
+
+      fileList.forEach(async (file) => {
+        if (imageCompression && Object.keys(imageCompression).length > 0 && file.type.indexOf('image') >= 0) {
+          const { fileCompressed, differFile } = await compressImage(
+            file, imageCompression.maxSize || 20, imageCompression.width, imageCompression.height,
+          );
+          processedFileList.push(fileCompressed);
+          differFileList.push(differFile);
+        } else {
+          processedFileList.push(file);
+        }
+
+        resolveFinally();
+      });
+    } catch (e) {
+      console.error(e);
+      reject(e);
+    }
+  });
+}
+
+const setArray = (obj) => {
+  const list = [];
+  Object.keys(obj).forEach((key) => {
+    if (!Number.isNaN(Number(key))) {
+      list.push(obj[key]);
+    }
+  });
+  return list;
+};
+
+// 检测指定的accept格式和实际传入的文件格式是否匹对
+// 匹配则返回false，不匹配则返回true
+const checkFileType = (filesList, accept) => {
+  if (accept.indexOf('image/') < 0) return false; // 暂不检测image之外的其他格式
+  let desc = null;
+  filesList.forEach((file) => {
+    if (accept === 'image/*' && file.type.indexOf('image/') < 0) desc = `接受类型为${accept}，而传入文件含有${file.type}`;
+    if (
+      accept !== 'image/*'
+      && accept.indexOf('jpeg') < 0
+      && accept.indexOf('jpg') < 0
+      && file.type !== accept
+    ) desc = `接受类型为${accept}，而传入文件含有${file.type}`;
+    if (
+      (accept.indexOf('jpg') >= 0 || accept.indexOf('jpeg') >= 0)
+      && ['image/jpg', 'image/jpeg'].indexOf(file.type) < 0
+    ) desc = `接受类型为${accept}，而传入文件含有${file.type}`;
+  });
+  return desc;
+};
+
+export { parseFiles, setArray, checkFileType };

package/src/component/uploader/js/merge-class-name.js

@@ -0,0 +1,14 @@
+// 此方法会把传入的className处理成className拼接字符串
+function merge(...args) {
+  const finallyClassNameArr = [];
+
+  if (!args) return null;
+
+  Object.keys(args).forEach((key) => {
+    if (args[key]) finallyClassNameArr.push(args[key]);
+  });
+
+  return finallyClassNameArr.join(' ');
+}
+
+export default merge;

package/src/component/uploader/js/old-compress-function.js

@@ -0,0 +1,64 @@
+import getImageDetail from './get-image-detail';
+import getImageBase64 from './get-image-base64';
+
+const checkCode = (result) => {
+  if (!result.code) throw result.msg;
+};
+
+const getCompressSize = (size, maxSize) => size / maxSize;
+
+// 利用canvas压缩图片
+function compressImage(file, maxSize) {
+  return new Promise(async (resolve) => {
+    const base64res = await getImageBase64(file);
+    checkCode(base64res);
+
+    let base64 = base64res.info;
+
+    if (file.size <= (parseInt(maxSize, 10) * 1024 * 1024)) {
+      resolve({ fileCompressed: file, differFile: { base64 } });
+      return;
+    }
+
+    const imageRes = await getImageDetail(base64);
+    checkCode(imageRes);
+
+    const { width, height } = imageRes.info;
+    const canvas = document.createElement('canvas');
+    const context = canvas.getContext('2d');
+
+    // 根据目前尺寸和最大尺寸，判断需要压缩多少倍
+    const multiple = getCompressSize(file.size, maxSize * 1024 * 1024);
+    const [compressedWidth, compressedHeight] = [
+      Math.floor(width / multiple),
+      Math.floor(height / multiple),
+    ];
+
+    canvas.width = compressedWidth;
+    canvas.height = compressedHeight;
+
+    const ImgEl = new Image();
+    ImgEl.src = base64;
+
+    context.drawImage(ImgEl, 0, 0, compressedWidth, compressedHeight);
+
+    canvas.toBlob(async (blob) => {
+      // 把blob对象转化成file
+      let fileCompressed = new File([blob], file.name, { type: file.type });
+
+      // 如果发现依然比maxsize要大，那么将递归本函数继续压缩
+      if (fileCompressed.size > (parseInt(maxSize, 10) * 1024 * 1024)) {
+        const {
+          fileCompressed: fc, differFile: { base64: b },
+        } = await compressImage(fileCompressed, maxSize);
+
+        fileCompressed = fc;
+        base64 = b;
+      }
+
+      resolve({ fileCompressed, differFile: { base64, name: file.name } });
+    });
+  });
+}
+
+export default compressImage;