@aliretail/react-material-selector
Version:
446 lines (360 loc) • 13.3 kB
JavaScript
import _Button from "@alifd/next/es/button";
import _Message from "@alifd/next/es/message";
import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
import _regeneratorRuntime from "@babel/runtime/regenerator";
import React, { useRef, forwardRef, useState } from 'react';
// import OssUploader from '@alife/ali-oss-uploader';
import axios from 'axios';
import './index.scss';
export 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 = 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 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(fileName, fileUrl, thumbUrl, fileSize) {
var res;
return _regeneratorRuntime.wrap(function _callee$(_context) {
while (1) {
switch (_context.prev = _context.next) {
case 0:
delete axios.defaults.xsrfCookieName;
delete axios.defaults.xsrfHeaderName;
_context.next = 4;
return axios({
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.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.error("" + props.imgWidthErrorMessage);
flagOne = false;
}
}
if (props.imgHeight && flagOne) {
if (ih != props.imgHeight) {
_Message.error("" + props.imgHeightErrorMessage);
flagTwo = false;
}
}
if (!flagOne || !flagTwo) {
resolve(false);
}
resolve(true);
image = null;
};
image.src = url;
});
};
var multipleUpload = /*#__PURE__*/function () {
var _ref2 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee2(file) {
var type, url, flag, canUpload, params, getOssSignature, onUploadProgress, ossSignature, formData, getUrl, thumbUrl;
return _regeneratorRuntime.wrap(function _callee2$(_context2) {
while (1) {
switch (_context2.prev = _context2.next) {
case 0:
delete axios.defaults.xsrfCookieName;
delete axios.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.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.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.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.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.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.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 axios({
method: 'post',
url: props.apis.getOssSignature,
data: params
});
case 56:
getOssSignature = _context2.sent;
if (getOssSignature.data.success) {
_context2.next = 61;
break;
}
_Message.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 axios({
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 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee3(e) {
var file, i;
return _regeneratorRuntime.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.createElement("div", {
className: "files-btn"
}, /*#__PURE__*/React.createElement("input", {
className: "file",
ref: fileRef,
type: "file",
multiple: props.multiUpload ? 'multiple' : '',
onChange: function onChange(e) {
return upload(e);
},
accept: getFileType()
}), /*#__PURE__*/React.createElement("div", {
className: "up-box"
}, /*#__PURE__*/React.createElement(_Button, {
className: "up-box-btn"
}, btnName)));
};