UploadComDiyForQnZy.js 6.1 KB
Newer Older
1
import React from "react";
2
import { Button, Icon, message, Upload } from "antd";
3
import { queryApiActionPath, queryFileUrl } from '../utils/queryConfig';
4 5
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
import {
  getSassApiHeader,
  getSysCode
} from '@/webPublic/one_stop_public/2023yunshangguizhou/utils';
14 15 16 17 18


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

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

  //检测尺寸
  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);
49
    }).then(() => {
50 51 52
        return file;
      },
      () => {
53
        message.error(file.name + "图片尺寸不符合要求,需要上传高清图像 1080像素及以上,请修改后重新上传!");
54
        return Promise.reject();
55
      }
56 57 58
    );
  };

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

67 68 69 70 71 72 73
  componentWillReceiveProps(nextProps) {
    // Should be a controlled component.
    if ("value" in nextProps) {
      const value = nextProps.value;
      this.setState(value);
    }
  }
74

75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100
  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 });
  };
101

102
  render() {
103
    const { files, previewVisible, previewImage,previewImageName } = this.state;
104 105 106 107 108
    const { isMultiple, accept, btnName, disabled } = this.props;
    const props = {
      name: "file",
      multiple: isMultiple,
      accept: accept,
钟是志's avatar
钟是志 committed
109
      ...getHeaders(),
110 111 112
      action: config.uploadUrl,
      showUploadList: false,
      onChange: this.changeUrl,
113
      beforeUpload: this.beforeUpload,
114
      headers: getSassApiHeader(),
115 116 117
      data: {
        token: getToken(),
      },
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
    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}
145
                      src={queryFileUrl(f.path)}
146 147 148 149 150 151
                    />
                    <div
                      className={styles.mask}
                      onClick={() => {
                        this.setState({
                          previewVisible: true,
152
                          previewImage: queryFileUrl(f.path),
153
                          previewImageName: f.name,
154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170
                        });
                      }}>
                      <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}>
171
                <a target="_blank" key={f.path} href={queryFileUrl(f.path)}>
172 173 174 175 176 177 178 179 180 181 182 183 184
                  {f.name}
                </a>{" "}
                {!disabled && (
                  <Icon
                    style={{ marginLeft: 10 }}
                    type="delete"
                    onClick={this.remove.bind(this, f.path)}
                  />
                )}
              </li>
            );
          })}
        </ul>
185
        <Viewer
186
          visible={previewVisible}
187 188 189 190 191 192 193 194 195 196
          onClose={() => {
            this.setState({ previewVisible: false });
          }}
          images={[
            {
              src: previewImage,
              alt: previewImageName,
            },
          ]}
        />
197 198 199
      </div>
    );
  }
200
}