@51yzone/pc-components
Version:
An enterprise-class UI design language and React-based implementation
267 lines (228 loc) • 8.29 kB
JavaScript
import "antd/es/modal/style";
import _Modal from "antd/es/modal";
import "antd/es/upload/style";
import _Upload from "antd/es/upload";
import _extends from "@babel/runtime/helpers/extends";
import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
import "antd/es/button/style";
import _Button from "antd/es/button";
import _regeneratorRuntime from "@babel/runtime/regenerator";
var __awaiter = this && this.__awaiter || function (thisArg, _arguments, P, generator) {
function adopt(value) {
return value instanceof P ? value : new P(function (resolve) {
resolve(value);
});
}
return new (P || (P = Promise))(function (resolve, reject) {
function fulfilled(value) {
try {
step(generator.next(value));
} catch (e) {
reject(e);
}
}
function rejected(value) {
try {
step(generator["throw"](value));
} catch (e) {
reject(e);
}
}
function step(result) {
result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected);
}
step((generator = generator.apply(thisArg, _arguments || [])).next());
});
};
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 React, { useState } from 'react';
import { PlusOutlined, UploadOutlined } from '@ant-design/icons';
import classnames from 'classnames'; // 图片转换成base64
var getBase64 = function getBase64(file) {
return new Promise(function (resolve, reject) {
var reader = new FileReader();
if (file) {
reader.readAsDataURL(file);
reader.onload = function () {
return resolve(reader.result);
};
reader.onerror = function (error) {
return reject(error);
};
}
});
}; // 上传按钮
var uploadButtons = {
text: /*#__PURE__*/React.createElement(_Button, {
icon: /*#__PURE__*/React.createElement(UploadOutlined, null)
}, "\u4E0A\u4F20"),
picture: /*#__PURE__*/React.createElement(_Button, {
icon: /*#__PURE__*/React.createElement(UploadOutlined, null)
}, "\u4E0A\u4F20"),
'picture-card': /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(PlusOutlined, null), /*#__PURE__*/React.createElement("div", {
style: {
marginTop: 8
}
}, "\u4E0A\u4F20"))
}; // 上传到服务端的排序号
var order = 0;
var UploadImage = function UploadImage(props) {
var _props$value = props.value,
value = _props$value === void 0 ? [] : _props$value,
_props$maxLength = props.maxLength,
maxLength = _props$maxLength === void 0 ? 9 : _props$maxLength,
request = props.request,
action = props.action,
data = props.data,
_props$listType = props.listType,
listType = _props$listType === void 0 ? 'picture-card' : _props$listType,
prefixCls = props.prefixCls,
className = props.className,
style = props.style,
onChange = props.onChange,
rest = __rest(props, ["value", "maxLength", "request", "action", "data", "listType", "prefixCls", "className", "style", "onChange"]); // 图片预览
var _useState = useState(false),
_useState2 = _slicedToArray(_useState, 2),
previewVisible = _useState2[0],
setPreviewVisible = _useState2[1];
var _useState3 = useState(''),
_useState4 = _slicedToArray(_useState3, 2),
previewImage = _useState4[0],
setPreviewImage = _useState4[1];
var _useState5 = useState('预览'),
_useState6 = _slicedToArray(_useState5, 2),
previewTitle = _useState6[0],
setPreviewTitle = _useState6[1]; // 图片预览
var handlePreview = function handlePreview(file) {
return __awaiter(void 0, void 0, void 0, /*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
var newFile;
return _regeneratorRuntime.wrap(function _callee$(_context) {
while (1) {
switch (_context.prev = _context.next) {
case 0:
newFile = _extends({}, file);
if (!(!newFile.url && !newFile.preview)) {
_context.next = 5;
break;
}
_context.next = 4;
return getBase64(newFile.originFileObj);
case 4:
newFile.preview = _context.sent;
case 5:
setPreviewImage(newFile.url || newFile.preview);
setPreviewVisible(true);
setPreviewTitle(newFile.name || '预览');
case 8:
case "end":
return _context.stop();
}
}
}, _callee);
}));
}; // 图片取消预览
var handleCancelPreview = function handleCancelPreview() {
return setPreviewVisible(false);
}; // 自定义上传
var handleCustomRequest = function handleCustomRequest(_ref) {
var file = _ref.file,
onProgress = _ref.onProgress,
onError = _ref.onError,
onSuccess = _ref.onSuccess;
return __awaiter(void 0, void 0, void 0, /*#__PURE__*/_regeneratorRuntime.mark(function _callee2() {
var baseRequestForm;
return _regeneratorRuntime.wrap(function _callee2$(_context2) {
while (1) {
switch (_context2.prev = _context2.next) {
case 0:
order = order + value.length + 1;
baseRequestForm = request.requestForm.bind(request);
baseRequestForm(action, _extends({
file: file,
order: order
}, data), {
onUploadProgress: function onUploadProgress(_ref2) {
var total = _ref2.total,
loaded = _ref2.loaded;
onProgress({
percent: loaded / total * 100
}, file);
}
}).then(function (res) {
var newRes = res.value || res.valueObj || {};
var _newRes$imageUrl = newRes.imageUrl,
imageUrl = _newRes$imageUrl === void 0 ? '' : _newRes$imageUrl,
_newRes$attachUrl = newRes.attachUrl,
attachUrl = _newRes$attachUrl === void 0 ? '' : _newRes$attachUrl,
_newRes$attachId = newRes.attachId,
attachId = _newRes$attachId === void 0 ? '' : _newRes$attachId;
res.url = imageUrl || attachUrl;
res.uid = attachId;
onSuccess(res, file);
})["catch"](onError);
case 3:
case "end":
return _context2.stop();
}
}
}, _callee2);
}));
}; // onChange
var handleChange = function handleChange(_ref3) {
var fileList = _ref3.fileList;
fileList.splice(maxLength);
fileList.forEach(function (item) {
var newItem = item;
if (item.response) {
newItem.url = item.response.url;
newItem.uid = item.response.uid;
}
});
onChange && onChange(fileList);
};
return /*#__PURE__*/React.createElement("div", {
className: classnames(className, "".concat(prefixCls, "-wrapper")),
style: style
}, /*#__PURE__*/React.createElement(_Upload, _extends({
listType: listType,
onPreview: handlePreview,
customRequest: handleCustomRequest,
fileList: value,
onChange: handleChange
}, rest), value.length < maxLength && uploadButtons[listType]), /*#__PURE__*/React.createElement(_Modal, {
visible: previewVisible,
title: previewTitle,
footer: null,
onCancel: handleCancelPreview
}, /*#__PURE__*/React.createElement("img", {
alt: "\u9884\u89C8",
style: {
width: '100%'
},
src: previewImage
})));
};
UploadImage.defaultProps = {
maxLength: 9,
value: [],
data: {},
listType: 'picture-card',
prefixCls: 'yz-uploda-image',
className: '',
style: {}
};
export default UploadImage;