@aliretail/react-material-selector
Version:
466 lines (367 loc) • 15.2 kB
JavaScript
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
exports.__esModule = true;
exports.OssUploader = void 0;
var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
var _button = _interopRequireDefault(require("@alifd/next/lib/button"));
var _message = _interopRequireDefault(require("@alifd/next/lib/message"));
var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
var _react = _interopRequireWildcard(require("react"));
var _axios = _interopRequireDefault(require("axios"));
require("./index.scss");
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
// import OssUploader from '@alife/ali-oss-uploader';
var OssUploader = function OssUploader(props, ref) {
var num = Math.random();
var _props$treeId = props.treeId,
treeId = _props$treeId === void 0 ? '' : _props$treeId,
treeIdTwo = props.treeIdTwo,
tabTypeValue = props.tabTypeValue,
contentFlag = props.contentFlag,
_props$btnName = props.btnName,
btnName = _props$btnName === void 0 ? '上传' : _props$btnName,
loadData = props.loadData;
var ccc = treeIdTwo[0] ? treeIdTwo[0].id : '';
var fileRef = (0, _react.useRef)(); // 获取允许上传的文件类型
var getFileType = function getFileType() {
var arr = ['image/jpg,image/jpeg,image/jpe,image/bmp,image/gif,image/png', 'image/svg+xml', 'video/mp4', '', '', ''];
return arr[tabTypeValue - 1];
};
var save = /*#__PURE__*/function () {
var _ref = (0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee(fileName, fileUrl, thumbUrl, fileSize) {
var res;
return _regenerator["default"].wrap(function _callee$(_context) {
while (1) {
switch (_context.prev = _context.next) {
case 0:
delete _axios["default"].defaults.xsrfCookieName;
delete _axios["default"].defaults.xsrfHeaderName;
_context.next = 4;
return (0, _axios["default"])({
method: 'post',
url: props.apis.materialCreate,
data: {
dirId: treeId,
title: fileName,
fileName: fileName,
fileUrl: fileUrl,
thumbUrl: thumbUrl,
fileSize: fileSize || 0,
apiContext: {
belongOrganizationId: props.belongOrganizationId || '1'
},
type: tabTypeValue || '' // 这个来区分不同的内容，图片、视频还是图标
}
});
case 4:
res = _context.sent;
if (res.data.success) {
// 上传成功 todo - 刷新页面
// changeFlag(num);
if (loadData) {
loadData();
}
if (contentFlag) {
contentFlag(true);
}
}
case 6:
case "end":
return _context.stop();
}
}
}, _callee);
}));
return function save(_x, _x2, _x3, _x4) {
return _ref.apply(this, arguments);
};
}();
var isUploadVideo = function isUploadVideo(url) {
var audioElement = new Audio(url);
return new Promise(function (resolve) {
audioElement.addEventListener('loadedmetadata', function (_event) {
var _audioElement = audioElement,
duration = _audioElement.duration;
if (props.videoUploadDuration) {
if (duration > props.videoUploadDuration) {
_message["default"].error("" + videoUploadDurationErrorMessage); // 商品
fileRef.current.value = '';
resolve(false);
}
}
resolve(true);
audioElement = null;
});
});
}; // 获取像素
var getImgUrl = function getImgUrl(url) {
var image = new Image();
var iw;
var ih;
return new Promise(function (resolve) {
image.onload = function () {
// 异步方法就没有获取到长宽高
iw = image.width; // 图片宽度
ih = image.height; // 图片高度
var flagOne = true;
var flagTwo = true;
if (props.imgWidth) {
if (iw != props.imgWidth) {
_message["default"].error("" + props.imgWidthErrorMessage);
flagOne = false;
}
}
if (props.imgHeight && flagOne) {
if (ih != props.imgHeight) {
_message["default"].error("" + props.imgHeightErrorMessage);
flagTwo = false;
}
}
if (!flagOne || !flagTwo) {
resolve(false);
}
resolve(true);
image = null;
};
image.src = url;
});
};
var multipleUpload = /*#__PURE__*/function () {
var _ref2 = (0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee2(file) {
var type, url, flag, canUpload, params, getOssSignature, onUploadProgress, ossSignature, formData, getUrl, thumbUrl;
return _regenerator["default"].wrap(function _callee2$(_context2) {
while (1) {
switch (_context2.prev = _context2.next) {
case 0:
delete _axios["default"].defaults.xsrfCookieName;
delete _axios["default"].defaults.xsrfHeaderName;
type = file.name.split('.').pop();
if (!(tabTypeValue == 1)) {
_context2.next = 23;
break;
}
if (!props.imgType) {
_context2.next = 9;
break;
}
if (!(props.imgType.indexOf(type.toLowerCase()) === -1)) {
_context2.next = 9;
break;
}
// Message.error('只允许上传.jpg/.jpeg/.jpe/.bmp/.gif/.png格式的图片')//飞鹤和恒安
// Message.error('只允许上传.jpg/.jpeg/.png格式的图片');//商品
_message["default"].error(props.imgTypeErrorMessage); // 透出
fileRef.current.value = '';
return _context2.abrupt("return");
case 9:
if (!props.imgUploadSize) {
_context2.next = 14;
break;
}
if (!(file.size > props.imgUploadSize)) {
_context2.next = 14;
break;
}
_message["default"].error("" + props.imgUploadSizeErrorMessage); // 商品
fileRef.current.value = '';
return _context2.abrupt("return");
case 14:
// 上传尺寸限制
url = URL.createObjectURL(file);
_context2.next = 17;
return getImgUrl(url);
case 17:
flag = _context2.sent;
if (!(flag == false)) {
_context2.next = 21;
break;
}
fileRef.current.value = '';
return _context2.abrupt("return");
case 21:
_context2.next = 53;
break;
case 23:
if (!(tabTypeValue == 2)) {
_context2.next = 36;
break;
}
if (!props.iconType) {
_context2.next = 29;
break;
}
if (!(props.iconType.indexOf(type) === -1)) {
_context2.next = 29;
break;
}
_message["default"].error(props.iconTypeErrorMessage); // 飞鹤
fileRef.current.value = '';
return _context2.abrupt("return");
case 29:
if (!props.iconUploadSize) {
_context2.next = 34;
break;
}
if (!(file.size > props.iconUploadSize)) {
_context2.next = 34;
break;
}
_message["default"].error("" + props.iconUploadSizeErrorMessage); // 飞鹤和恒安
fileRef.current.value = '';
return _context2.abrupt("return");
case 34:
_context2.next = 53;
break;
case 36:
if (!(tabTypeValue == 3)) {
_context2.next = 53;
break;
}
if (!props.videoType) {
_context2.next = 42;
break;
}
if (!(props.videoType.indexOf(type) === -1)) {
_context2.next = 42;
break;
}
_message["default"].error(props.videoTypeErrorMessage); // 商品和飞鹤和恒安
fileRef.current.value = '';
return _context2.abrupt("return");
case 42:
if (!props.videoUploadSize) {
_context2.next = 47;
break;
}
if (!(file.size > props.videoUploadSize)) {
_context2.next = 47;
break;
}
_message["default"].error("" + props.videoUploadSizeErrorMessage); // 商品
fileRef.current.value = '';
return _context2.abrupt("return");
case 47:
// 时长验证,视频时长的不知道飞鹤有没有
url = URL.createObjectURL(file);
_context2.next = 50;
return isUploadVideo(url);
case 50:
canUpload = _context2.sent;
if (canUpload) {
_context2.next = 53;
break;
}
return _context2.abrupt("return", false);
case 53:
// 2.获取签名
params = {
bizName: props.bizName,
bizType: props.bizType,
fileName: file.name,
fileSize: file.size,
videoDuration: file.size
};
_context2.next = 56;
return (0, _axios["default"])({
method: 'post',
url: props.apis.getOssSignature,
data: params
});
case 56:
getOssSignature = _context2.sent;
if (getOssSignature.data.success) {
_context2.next = 61;
break;
}
_message["default"].error("\u4E0A\u4F20\u5931\u8D25: " + getOssSignature.data.message); // 清空
fileRef.current.value = '';
return _context2.abrupt("return");
case 61:
// 3.上传到oss
onUploadProgress = function onUploadProgress() {};
ossSignature = getOssSignature.data.result.ossSignature;
formData = new FormData();
formData.append('key', ossSignature.dir);
formData.append('policy', ossSignature.policy);
formData.append('OSSAccessKeyId', ossSignature.accessKeyId);
formData.append('signature', ossSignature.signature);
formData.append('success_action_status', '200');
formData.append('file', file);
_context2.next = 72;
return (0, _axios["default"])({
method: 'post',
url: ossSignature.host,
data: formData,
onUploadProgress: onUploadProgress
});
case 72:
// 4.获取图片地址
getUrl = getOssSignature.data.result.fileUrl;
thumbUrl = getOssSignature.data.result.thumbUrl; // console.log('getOssSignature', getOssSignature);
// console.log('getUrl', getUrl);
// console.log('thumbUrl',thumbUrl);
// todo 调上传接口
_context2.next = 76;
return save(file.name, getUrl, thumbUrl, file.size);
case 76:
if (fileRef && fileRef.current && fileRef.current.value) {
fileRef.current.value = ''; // 加上后可以重复上传
}
case 77:
case "end":
return _context2.stop();
}
}
}, _callee2);
}));
return function multipleUpload(_x5) {
return _ref2.apply(this, arguments);
};
}();
var upload = /*#__PURE__*/function () {
var _ref3 = (0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee3(e) {
var file, i;
return _regenerator["default"].wrap(function _callee3$(_context3) {
while (1) {
switch (_context3.prev = _context3.next) {
case 0:
// 1.获取文件对象
file = e.target.files || e.dataTransfer.files;
if (file.length > 1) {
for (i = 0; i < file.length; i++) {
// 再传一个i表示是数组里面的第几个
multipleUpload(file[i]);
}
} else {
multipleUpload(file[0]);
}
case 2:
case "end":
return _context3.stop();
}
}
}, _callee3);
}));
return function upload(_x6) {
return _ref3.apply(this, arguments);
};
}();
return /*#__PURE__*/_react["default"].createElement("div", {
className: "files-btn"
}, /*#__PURE__*/_react["default"].createElement("input", {
className: "file",
ref: fileRef,
type: "file",
multiple: props.multiUpload ? 'multiple' : '',
onChange: function onChange(e) {
return upload(e);
},
accept: getFileType()
}), /*#__PURE__*/_react["default"].createElement("div", {
className: "up-box"
}, /*#__PURE__*/_react["default"].createElement(_button["default"], {
className: "up-box-btn"
}, btnName)));
};
exports.OssUploader = OssUploader;