UploadComDiyForQnZy.js 6.1 KB
Newer Older
1
import React from "react";
2
import { Button, Icon, message, Upload } from "antd";
3 4 5
import { queryApiActionPath } from "../utils/queryConfig";
import config from "@/webPublic/one_stop_public/config";
import styles from "./style.less";
6
import { checkIsImage } from "./UploadCom";
7
import Viewer from "react-viewer";
8
import { getToken } from '@/webPublic/one_stop_public/utils/token';
钟是志's avatar
钟是志 committed
9
import { getHeaders } from '@/webPublic/zyd_public/utils/utils';
10 11 12 13 14


// 为黔南职院单独写的 上传组件 用于 bug 20576 个人就业信息/求职创业补贴申报,201801010006 119242 上传图片加限制,跟签约派遣上传图片加限制一样
// 后续考虑修改 一站式组件 让组件支持所有功能
export default class UploadComDiyForQnZy extends React.Component {
15 16 17 18 19 20 21 22 23
  constructor(props) {
    super(props);
    const value = props.value || {};
    this.state = {
      files: value.files,
      previewVisible: false,
      previewImage: ""
    };
  }
24 25 26

  //图片上传之前进行判断
  beforeUpload = (file) => {
27 28 29 30
    return this.isSize(file).then((res) => {
      message.info("正在上传中,请等待");
      return true;
    });
31 32 33 34 35 36 37 38 39 40 41 42 43 44
  };

  //检测尺寸
  isSize = (file) => {
    return new Promise((resolve, reject) => {
      let width = 1080; //宽高限制为1080 * 1080 原来为2400 * 2400
      let height = 1080;
      let _URL = window.URL || window.webkitURL;
      let img = new Image();
      img.onload = function() {
        let valid = img.width >= width && img.height >= height;
        valid ? resolve() : reject();
      };
      img.src = _URL.createObjectURL(file);
45
    }).then(() => {
46 47 48
        return file;
      },
      () => {
49
        message.error(file.name + "图片尺寸不符合要求,需要上传高清图像 1080像素及以上,请修改后重新上传!");
50
        return Promise.reject();
51
      }
52 53 54
    );
  };

55 56 57 58 59 60 61
  triggerChange = (changedValue) => {
    // Should provide an event to pass value to Form.
    const onChange = this.props.onChange;
    if (onChange) {
      onChange(Object.assign({}, this.state, changedValue));
    }
  };
62

63 64 65 66 67 68 69
  componentWillReceiveProps(nextProps) {
    // Should be a controlled component.
    if ("value" in nextProps) {
      const value = nextProps.value;
      this.setState(value);
    }
  }
70

71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96
  changeUrl = (info) => {
    if (info.file.status === "done") {
      message.success(`${info.file.name} 上传成功`);
      const files = this.state.files;
      files.push({ path: info.file.response, name: info.file.name });
      if (!("value" in this.props)) {
        this.setState({ files });
      }
      this.triggerChange({ files });
    } else if (info.file.status === "error") {
      message.error(`${info.file.name} 上传失败`);
    }
  };
  remove = (path) => {
    const files = this.state.files;
    for (var i = 0; i < files.length; i++) {
      if (files[i].path == path) {
        files.splice(i, 1);
        break;
      }
    }
    if (!("value" in this.props)) {
      this.setState({ files });
    }
    this.triggerChange({ files });
  };
97

98
  render() {
99
    const { files, previewVisible, previewImage,previewImageName } = this.state;
100 101 102 103 104
    const { isMultiple, accept, btnName, disabled } = this.props;
    const props = {
      name: "file",
      multiple: isMultiple,
      accept: accept,
钟是志's avatar
钟是志 committed
105
      ...getHeaders(),
106 107 108
      action: config.uploadUrl,
      showUploadList: false,
      onChange: this.changeUrl,
109
      beforeUpload: this.beforeUpload,
110 111 112 113 114 115
      headers: {
        Authorization: `bearer ${getToken()}`,
      },
      data: {
        token: getToken(),
      },
116
    };
117

118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150
    return (
      <div>
        {" "}
        <Upload {...props} disabled={disabled}>
          {!disabled && (
            <>
              <Button>
                <Icon type="upload" />
                {btnName ? btnName : "上传附件"}
              </Button>
              <div>
                (注:必须上传高清扫描件,图像高至少是1080px,宽至少是1080px
              </div>
            </>
          )}
        </Upload>
        <ul style={{ paddingLeft: 8, display: "flex" }}>
          {(files || []).map((f) => {
            if (f.path && checkIsImage(f.path)) {
              return (
                <li key={f.path} className={styles.preview_img}>
                  <div className={styles.preview_div}>
                    <img
                      style={{ width: 100, height: 100 }}
                      className={styles.img}
                      src={queryApiActionPath() + f.path}
                    />
                    <div
                      className={styles.mask}
                      onClick={() => {
                        // window.open(queryApiActionPath() + f.path);
                        this.setState({
                          previewVisible: true,
151 152
                          previewImage: queryApiActionPath() + f.path,
                          previewImageName: f.name,
153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183
                        });
                      }}>
                      <Icon type="eye" className={styles.icon_eye} />
                    </div>
                  </div>
                  {!disabled && (
                    <Icon
                      style={{ marginLeft: 10 }}
                      type="delete"
                      onClick={this.remove.bind(this, f.path)}
                    />
                  )}
                </li>
              );
            }
            return (
              <li key={f.path}>
                <a target="_blank" key={f.path} href={queryApiActionPath() + f.path}>
                  {f.name}
                </a>{" "}
                {!disabled && (
                  <Icon
                    style={{ marginLeft: 10 }}
                    type="delete"
                    onClick={this.remove.bind(this, f.path)}
                  />
                )}
              </li>
            );
          })}
        </ul>
184
        <Viewer
185
          visible={previewVisible}
186 187 188 189 190 191 192 193 194 195
          onClose={() => {
            this.setState({ previewVisible: false });
          }}
          images={[
            {
              src: previewImage,
              alt: previewImageName,
            },
          ]}
        />
196 197 198
      </div>
    );
  }
199
}