@aliretail/react-materials-components
Version:
315 lines (268 loc) • 9.56 kB
JavaScript
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
exports.__esModule = true;
exports["default"] = void 0;
var _icon = _interopRequireDefault(require("@alifd/next/lib/icon"));
var _upload = _interopRequireDefault(require("@alifd/next/lib/upload"));
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var _message = _interopRequireDefault(require("@alifd/next/lib/message"));
var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
var _inheritsLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/inheritsLoose"));
var _react = _interopRequireDefault(require("react"));
var _classnames = _interopRequireDefault(require("classnames"));
var _utils = require("./utils");
var CardUpload = /*#__PURE__*/function (_React$Component) {
(0, _inheritsLoose2["default"])(CardUpload, _React$Component);
function CardUpload(props) {
var _this;
_this = _React$Component.call(this, props) || this;
_this.queryUploadInfoHandler = function (result) {
if (!result.success) {
_message["default"].warning(result.message);
_this.setState({
videoUpload: false
});
}
var _result$result = result.result,
ossSignature = _result$result.ossSignature,
fileUrl = _result$result.fileUrl,
recordId = _result$result.recordId,
thumbUrl = _result$result.thumbUrl;
var host = ossSignature.host,
accessKeyId = ossSignature.accessKeyId,
policy = ossSignature.policy,
signature = ossSignature.signature,
dir = ossSignature.dir;
var options = {
action: host,
data: {
key: dir,
policy: policy,
OSSAccessKeyId: accessKeyId,
success_action_status: '200',
signature: signature
},
fileUrl: fileUrl,
recordId: recordId,
thumbUrl: thumbUrl,
downloadURL: host + "/" + dir
};
return options;
};
_this.queryUploadInfo = function (param) {
return (0, _utils.request)({
url: _this.props.getOssSignatureUrl || '/api/retailforce_crm/GetOssSignature',
method: 'POST',
data: param,
baseURL: _this.props.baseURL
}).then(function (x) {
return _this.queryUploadInfoHandler(x === null || x === void 0 ? void 0 : x.data);
});
};
_this.doUpload = function (file, extraFileInfo) {
var _this$props = _this.props,
data = _this$props.data,
uploadScene = _this$props.uploadScene;
_this.queryUploadInfo((0, _extends2["default"])({
bizName: uploadScene,
fileName: file.name,
fileSize: file.size
}, extraFileInfo, data)).then(function (optionsResult) {
var _ref = optionsResult || {},
recordId = _ref.recordId,
thumbUrl = _ref.thumbUrl,
downloadURL = _ref.downloadURL,
fileUrl = _ref.fileUrl;
var fileInfo = {
name: file.name,
size: file.size,
recordId: recordId,
fileUrl: fileUrl,
thumbUrl: thumbUrl,
downloadURL: downloadURL
};
_this.uploader = new _upload["default"].Uploader({
action: optionsResult.action,
data: optionsResult.data,
onSuccess: _this.onUploadSuccess.bind((0, _assertThisInitialized2["default"])(_this), fileInfo),
onError: _this.onUploadError.bind((0, _assertThisInitialized2["default"])(_this)),
onProgress: _this.onUploadProgress.bind((0, _assertThisInitialized2["default"])(_this)),
beforeUpload: _this.props.beforeUpload || function () {},
name: _this.props.name || 'file'
});
_this.uploader.startUpload(file);
if (optionsResult.fileUrl) {
_this.setState({
src: optionsResult.fileUrl
});
}
});
};
_this.uploader = null;
_this.state = {
src: null,
visible: false,
img: null,
uploadState: 'init',
videoUpload: false
};
return _this;
}
var _proto = CardUpload.prototype;
_proto.onUploadProgress = function onUploadProgress(info) {
// todo
console.log('progress', info); // this.props.onProgress();
};
_proto.onUploadSuccess = function onUploadSuccess(info) {
var _this2 = this;
// todo,视频要返回缩略图
this.syncUploadResult((0, _extends2["default"])({}, info, {
status: 1
})).then(function (data) {
if (data.success) {
_this2.setState({
uploadState: 'done',
videoUpload: false
});
}
});
this.props.onSuccess && this.props.onSuccess(info);
};
_proto.onUploadError = function onUploadError(info) {
this.setState({
uploadState: 'error',
videoUpload: false
});
this.syncUploadResult((0, _extends2["default"])({}, info, {
status: 0
}));
this.props.onError && this.props.onError(info);
};
_proto.syncUploadResult = function syncUploadResult(info) {
var recordId = info.recordId,
status = info.status,
reason = info.reason;
var data = {
recordId: recordId,
status: status,
reason: reason
};
return (0, _utils.request)({
url: this.props.uploadCallbackUrl || '/api/retailforce_crm/UploadCallbackForOssFile',
method: 'POST',
data: data,
baseURL: this.props.baseURL
}).then(function (x) {
return x === null || x === void 0 ? void 0 : x.data;
});
};
_proto.componentDidMount = function componentDidMount() {
if (this.props.onInit) {
this.props.onInit();
}
};
_proto.openUploadLayer = function openUploadLayer() {
this.localUpload.fileRef.click();
};
_proto.getClassName = function getClassName() {
var type = this.props.type;
return (0, _classnames["default"])('aliretail-ossupload-uploader', "aliretail-ossupload-" + type, 'next-upload-list-item', this.props.className, {
readonly: this.props.readonly,
'next-upload-list-item-error': this.state.uploadState === 'error',
'next-upload-list-item-done': this.state.uploadState === 'done'
});
};
_proto.getVideoFileInfo = function getVideoFileInfo(file) {
return new Promise(function (resolve, reject) {
window.URL = window.URL || window.webkitURL;
var video = document.createElement('video');
video.preload = 'metadata';
video.onloadedmetadata = function () {
window.URL.revokeObjectURL(video.src);
resolve(video.duration);
};
video.src = URL.createObjectURL(file);
});
};
_proto.retry = function retry() {
this.setState({
uploadState: 'init'
});
};
_proto.getBizType = function getBizType() {
var bizType = this.props.bizType;
return bizType;
};
_proto.onSelect = function onSelect(files) {
var _this3 = this;
var file = files[0];
var fileType = file.type;
var bizType = this.getBizType(); // rmvb fileType : application/vnd.rn-realmedia-vbr 无法获取时长，封面图
// flv fileType: video/x-flv 无法获取时长，封面图
// avi fileType: video/avi 无法获取时长，封面图
// mpg fileType: video/mpeg 无法获取时长，封面图
// mp4 fileType: video/mp4
if (/image\/.*/.test(fileType)) {
// start upload
this.doUpload(file, {
bizType: bizType
});
} else if (/video\/.*/.test(fileType)) {
this.setState({
videoUpload: true
});
this.getVideoFileInfo(file).then(function (duration) {
_this3.doUpload(file, {
videoDuration: duration,
bizType: bizType
});
});
} else {
this.doUpload(file, {
bizType: bizType
});
}
};
_proto.render = function render() {
var _this4 = this;
var _this$state = this.state,
uploadState = _this$state.uploadState,
videoUpload = _this$state.videoUpload;
var result = null;
var props = {
accept: this.props.accept,
dragable: false
};
if (['init', 'done'].indexOf(uploadState) > -1) {
result = /*#__PURE__*/_react["default"].createElement(_upload["default"].Selecter, (0, _extends2["default"])({
ref: function ref(_) {
_this4.localUpload = _;
}
}, props, {
multiple: false,
onSelect: this.onSelect.bind(this),
disabled: this.props.uploadType === 'video' && videoUpload || this.props.disabled,
className: this.props.uploadType === 'video' && videoUpload ? 'disabled_upload_style' : ''
}), this.props.content);
} else if (uploadState === 'error') {
// 重新上传优化
result = /*#__PURE__*/_react["default"].createElement("div", {
className: "next-upload-card",
onClick: this.retry.bind(this)
}, /*#__PURE__*/_react["default"].createElement(_icon["default"], {
type: "cry",
size: "large",
className: "error-icon next-icon"
}), /*#__PURE__*/_react["default"].createElement("div", {
className: "next-upload-text"
}, "\u91CD\u65B0\u4E0A\u4F20"));
}
return /*#__PURE__*/_react["default"].createElement("div", {
className: this.getClassName(),
style: this.props.style
}, result);
};
return CardUpload;
}(_react["default"].Component);
var _default = CardUpload;
exports["default"] = _default;