lm-upload
Version:
* 作者：quying * 邮箱：qy9404@163.com * 版本：**`0.2.0`**
333 lines (276 loc) • 14 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", {
value: true
});
var _jsxFileName = 'src/index.js';
var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
var _react = require('react');
var _react2 = _interopRequireDefault(_react);
var _propTypes = require('prop-types');
var _propTypes2 = _interopRequireDefault(_propTypes);
var _classnames = require('classnames');
var _classnames2 = _interopRequireDefault(_classnames);
require('./index.scss');
var _uid = require('./uid');
var _uid2 = _interopRequireDefault(_uid);
var _request = require('./request');
var _request2 = _interopRequireDefault(_request);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; } /**
* Created by quying<qy9404@163.com>.
* ComponentName Upload
* Desc 组件描述内容
* GroupName lm-component
*/
/**
* @class Upload
* @extends React.Component
* @desc Upload Component for mobile
*/
var Upload = function (_Component) {
_inherits(Upload, _Component);
/**
* @constructor
*/
function Upload(props) {
_classCallCheck(this, Upload);
var _this = _possibleConstructorReturn(this, (Upload.__proto__ || Object.getPrototypeOf(Upload)).call(this, props));
_this.reqs = {};
_this.onClick = function () {
var appUpload = _this.props.appUpload;
if (appUpload) {
return appUpload();
}
var el = _this.fileInput;
if (!el) {
return;
}
el.click();
};
_this.state = {
uid: (0, _uid2.default)()
};
_this.changeHandler = _this.changeHandler.bind(_this);
return _this;
}
_createClass(Upload, [{
key: 'componentDidMount',
value: function componentDidMount() {
this._isMounted = true;
}
}, {
key: 'componentWillUnmount',
value: function componentWillUnmount() {
this._isMounted = false;
this.abort();
}
}, {
key: 'changeHandler',
value: function changeHandler(e) {
var _this2 = this;
var files = e.target.files;
var onInputChange = this.props.onInputChange;
if (onInputChange) {
var changedRet = onInputChange(files);
if (changedRet && changedRet.then) {
changedRet.then(function (processedFiles) {
_this2.uploadFiles(processedFiles);
}).catch(function (e) {
console && console.log(e);
});
} else if (changedRet !== false) {
this.uploadFiles(changedRet);
}
} else {
this.uploadFiles(files);
this.reset();
}
e.target.value = '';
}
}, {
key: 'uploadFiles',
value: function uploadFiles(files) {
var _this3 = this;
var fileList = Array.prototype.slice.call(files);
fileList.forEach(function (file) {
file.uid = (0, _uid2.default)();
_this3.upload(file, fileList);
});
}
}, {
key: 'upload',
value: function upload(file, fileList) {
var _this4 = this;
var props = this.props;
if (!props.beforeUpload) {
this.post(file);
}
//返回 false 则停止上传。支持返回一个 Promise 对象，Promise 对象 reject 时则停止上传，resolve 时开始上传
var before = props.beforeUpload(file, fileList);
if (before && before.then) {
before.then(function (processedFile) {
var processedFileType = Object.prototype.toString.call(processedFile);
if (processedFileType === '[object String]' || processedFileType === '[object Blob]') {
_this4.post(file, processedFile);
} else {
_this4.post(file);
}
}).catch(function (e) {
console && console.log(e);
});
} else if (before !== false) {
this.post(file);
}
}
}, {
key: 'post',
value: function post(file, processedFile) {
var _this5 = this;
if (!this._isMounted) {
return;
}
var data = this.props.data;
if (typeof data === 'function') {
var dataRet = data(file);
if (dataRet.then) {
dataRet.then(function (ret) {
data = ret;
_this5.send(data, file, processedFile);
});
} else {
data = dataRet;
this.send(data, file, processedFile);
}
}
}
}, {
key: 'send',
value: function send(data, file, processedFile) {
var _this6 = this;
var props = this.props;
var uid = file.uid;
var onStart = props.onStart,
onProgress = props.onProgress;
var request = props.customUpload || _request2.default;
this.reqs[uid] = request({
action: props.action,
filename: props.name,
file: processedFile || file,
data: data,
headers: props.headers,
withCredentials: props.withCredentials,
onProgress: onProgress ? function (e) {
onProgress(e, file);
} : null,
onSuccess: function onSuccess(ret, xhr) {
delete _this6.reqs[uid];
props.onSuccess(ret, file, xhr);
},
onError: function onError(err, ret) {
delete _this6.reqs[uid];
props.onError(err, ret, file);
}
});
onStart(file);
}
}, {
key: 'reset',
value: function reset() {
this.setState({
uid: (0, _uid2.default)()
});
}
}, {
key: 'abort',
value: function abort(file) {
var reqs = this.reqs;
if (file) {
var uid = file;
if (file.uid) {
uid = file.uid;
}
if (reqs[uid]) {
reqs[uid].abort();
delete reqs[uid];
}
} else {
Object.keys(reqs).forEach(function (uid) {
if (reqs[uid]) {
reqs[uid].abort();
}
delete reqs[uid];
});
}
}
}, {
key: 'render',
value: function render() {
var _this7 = this;
var _props = this.props,
className = _props.className,
accept = _props.accept,
multiple = _props.multiple,
disabled = _props.disabled,
children = _props.children,
style = _props.style;
return _react2.default.createElement(
'span',
_defineProperty({ className: className, onClick: this.onClick, style: style, __source: {
fileName: _jsxFileName,
lineNumber: 235
},
__self: this
}, '__self', this),
_react2.default.createElement('input', _defineProperty({
type: 'file',
ref: function ref(node) {
return _this7.fileInput = node;
},
style: { display: 'none' },
accept: accept,
multiple: multiple,
disabled: disabled,
onChange: this.changeHandler, __source: {
fileName: _jsxFileName,
lineNumber: 236
},
__self: this
}, '__self', this)),
children
);
}
}]);
return Upload;
}(_react.Component);
Upload.propTypes = {
name: _propTypes2.default.string, //文件名
accept: _propTypes2.default.string, //接受的文件类型
multiple: _propTypes2.default.bool, //是否支持多选文件
onInputChange: _propTypes2.default.func, //(files) = > boolean | Promise
beforeUpload: _propTypes2.default.func, //(file, fileList) => boolean | Promise
customUpload: _propTypes2.default.func, //通过覆盖默认的上传行为，可以自定义自己的上传实现
disabled: _propTypes2.default.bool, //是否禁用
action: _propTypes2.default.string, //上传的地址
data: _propTypes2.default.oneOfType([//表单数据
_propTypes2.default.object, _propTypes2.default.func]),
headers: _propTypes2.default.object, //xhr请求头
onStart: _propTypes2.default.func, //开始上传回调
onProgress: _propTypes2.default.func, //上传进度 onProgress(e, file)
onSuccess: _propTypes2.default.func, //上传成功回调 onSuccess(ret, file, xhr)
withCredentials: _propTypes2.default.bool, //允许跨域发送cookie
appUpload: _propTypes2.default.func //调用app上传
};
Upload.defaultProps = {
multiple: false,
disabled: false,
isApp: false,
onStart: function onStart() {},
beforeUpload: function beforeUpload() {},
onError: function onError() {}
};
exports.default = Upload;
Upload.initFileList = _uid.initFileList;
module.exports = exports['default'];