var __rest = (this && this.__rest) || function (s, e) { var t = {}; for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p]; if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) { if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]]; } return t; }; import { jsx as _jsx } from "react/jsx-runtime"; import { ProFormUploadButton } from '@ant-design/pro-components'; import { PlusOutlined } from '@ant-design/icons'; import { formatImageUrl, getToken } from "@component/utils"; import { omit, some } from 'lodash'; import match from 'mime-match'; import { message, Upload } from 'antd'; import { getPreviewIcon, isImageUrl } from '@component/utils'; import axios from 'axios'; import download from "downloadjs"; const TYPE = [ { imgTypeName: '第三方服务机构签约相关文件', imgType: 'RPC4100001' }, { imgTypeName: '第三方服务机构营业执照', imgType: 'RPC4100002' }, { imgTypeName: '第三方服务机构服务协议', imgType: 'RPC4100003' }, { imgTypeName: '第三方服务机构附件', imgType: 'RPC4100004' }, { imgTypeName: '专家资质证书照片', imgType: 'RPC4100005' }, { imgTypeName: '专家签名图片', imgType: 'RPC4100006' }, { imgTypeName: '服务申请附件', imgType: 'RPC4100007' }, { imgTypeName: '隐患现场照片', imgType: 'RPC4100008' }, { imgTypeName: '隐患整改照片', imgType: 'RPC4100009' }, { imgTypeName: '风险现场照片', imgType: 'RPC4100010' }, { imgTypeName: '风险管控照片', imgType: 'RPC4100011' }, { imgTypeName: '风险/隐患跟踪照片', imgType: 'RPC4100012' }, { imgTypeName: '事故预防服务签到照片', imgType: 'RPC4100013' }, { imgTypeName: '事故预防服务现场照片/管理现状附件/过程文件', imgType: 'RPC4100014', }, { imgTypeName: '事故预防服务现场视频', imgType: 'RPC4100015' }, { imgTypeName: '事故预防服务现场课件/训练内容', imgType: 'RPC4100016' }, { imgTypeName: '事故预防服务现场备注附件', imgType: 'RPC4100017' }, { imgTypeName: '事故预防服务报告/服务成果', imgType: 'RPC4100018' }, { imgTypeName: '服务回访附件', imgType: 'RPC4100019' }, { imgTypeName: '服务评估报告附件', imgType: 'RPC4100020' }, { imgTypeName: '安全宣传教育附件', imgType: 'RPC4100021' }, { imgTypeName: '服务结算单支付凭证', imgType: 'RPC4100022' }, { imgTypeName: '服务结算单报销凭证', imgType: 'RPC4100023' }, { imgTypeName: '服务结算单项目合同', imgType: 'RPC4100024' }, { imgTypeName: '其他类附件', imgType: 'RPC4100025' }, ]; function getUploadValueFromEvent(e) { if (Array.isArray(e)) { return e; } const api = process.env.REACT_APP_API_URL; return ((e && e.fileList.map((item) => { var _a, _b, _c, _d, _e, _f, _g, _h, _j; if (item.status === 'done' && ((_a = item.response) === null || _a === void 0 ? void 0 : _a.code) === 0 && ((_b = item.response) === null || _b === void 0 ? void 0 : _b.success)) { if (isImageUrl(item.name)) { getFileUrl(api === null || api === void 0 ? void 0 : api.replace('/base', ''), `${((_d = (_c = item.response) === null || _c === void 0 ? void 0 : _c.data) === null || _d === void 0 ? void 0 : _d.thumbUrl_path) || ((_f = (_e = item === null || item === void 0 ? void 0 : item.response) === null || _e === void 0 ? void 0 : _e.data) === null || _f === void 0 ? void 0 : _f.thumbUrl)}`).then((response) => { var _a, _b; if (response) { return Object.assign(Object.assign({}, item.response.data), { thumbUrl_path: (_b = (_a = item.response) === null || _a === void 0 ? void 0 : _a.data) === null || _b === void 0 ? void 0 : _b.thumbUrl_path, thumbUrl: URL.createObjectURL(response.data), response: item.response, status: '1' }); } }); } else { return Object.assign(Object.assign({}, item.response.data), { thumbUrl_path: (_h = (_g = item.response) === null || _g === void 0 ? void 0 : _g.data) === null || _h === void 0 ? void 0 : _h.thumbUrl_path, thumbUrl: getPreviewIcon(item.name), status: '1' }); } } if (item.response && ((_j = item.response) === null || _j === void 0 ? void 0 : _j.code) !== 0) { message.error(item.response.message); return null; } return item; })).filter((item) => item !== null) || []); } function compressImg(file) { const reader = new FileReader(); reader.readAsDataURL(file); return new Promise((resolve) => { reader.onload = () => { const img = new Image(); img.src = reader.result; img.onload = () => { const w = img.width; const h = img.height; console.log('w,h', w, h); const canvas = document.createElement('canvas'); canvas.width = w; canvas.height = h; const ctx = canvas.getContext('2d'); ctx.fillStyle = '#fff'; ctx.fillRect(0, 0, canvas.width, canvas.height); ctx.drawImage(img, 0, 0, w, h); // 设置压缩质量 const dataUrl = canvas.toDataURL('image/jpeg', 0.5); let blobFile = dataURLtoBlob(dataUrl); // console.log("压缩后的file----------", blobFile); resolve(blobFile); }; }; }); } function dataURLtoBlob(dataurl) { const arr = dataurl.split(','), mime = arr[0].match(/:(.*?);/)[1], bstr = atob(arr[1]); let n = bstr.length; const u8arr = new Uint8Array(n); while (n--) { u8arr[n] = bstr.charCodeAt(n); } return new Blob([u8arr], { type: mime }); } function onPreview(file) { var _a, _b; const api = process.env.REACT_APP_API_URL; if (file === null || file === void 0 ? void 0 : file.response) { return getFileUrl(api === null || api === void 0 ? void 0 : api.replace('/base', ''), `${(_b = (_a = file === null || file === void 0 ? void 0 : file.response) === null || _a === void 0 ? void 0 : _a.data) === null || _b === void 0 ? void 0 : _b.url}`).then((response) => { return response.data; }).then((blob) => { if (isImageUrl(file.name)) { const blobs = new Blob([blob], { type: 'image/png' }); const url = URL.createObjectURL(blobs); window.open(url, '_blank'); } else { download(blob, file.name); } }); } return getFileUrl(api === null || api === void 0 ? void 0 : api.replace('/base', ''), `${file === null || file === void 0 ? void 0 : file.url}`).then((response) => { return response.data; }).then((blob) => { if (isImageUrl(file.name)) { const blobs = new Blob([blob], { type: 'image/png' }); const url = URL.createObjectURL(blobs); window.open(url, '_blank'); } else { download(blob, file.name); } }).catch(e => { console.log(e); }); } export default function (_a) { var { params = {}, fieldProps = {}, formItemProps, title, action } = _a, props = __rest(_a, ["params", "fieldProps", "formItemProps", "title", "action"]); function getImgType(type) { return TYPE.find((item, key) => key + 1 == type); } return (_jsx(ProFormUploadButton, Object.assign({}, props, { icon: _jsx(PlusOutlined, {}), title: title || null, fieldProps: Object.assign({ name: 'multipartFile', listType: 'picture-card', multiple: true, accept: 'image/*', headers: { token: getToken(), }, data: Object.assign(Object.assign({}, omit(params, ['type'])), getImgType(params.type)), isImageUrl: (file) => true, beforeUpload: (file) => { var _a; const isMatch = some(fieldProps.accept ? fieldProps.accept.split(',') : ['image/*'], (item) => match(file.type, item)); if (!isMatch) { message.error(`上传的文件${file.name}格式有误`); } if ((_a = file === null || file === void 0 ? void 0 : file.type) === null || _a === void 0 ? void 0 : _a.match(/image/g)) { if (file.size >= 1024 * 1000 * 8) { return compressImg(file).then((newFile) => { return new Promise((resolve) => resolve(newFile)); }); } } return isMatch || Upload.LIST_IGNORE; }, onPreview: onPreview }, fieldProps), formItemProps: Object.assign({ getValueFromEvent: getUploadValueFromEvent }, formItemProps), action: action ? action : `${process.env.REACT_APP_API_URL}/common/completeUpload` }))); } //图片url请求接口并将文件流转为地址 function getFileUrl(api, path) { return axios .get(`${api}${path}`, { responseType: 'blob', withCredentials: false, headers: { token: getToken() } }).catch(e => { console.log(e); }); }