app-base-react/lib/library/upload-coverimg/index.js

react development common base package.

"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var _row=require("antd/lib/row"),_row2=_interopRequireDefault(_row),_col=require("antd/lib/col"),_col2=_interopRequireDefault(_col),_button=require("antd/lib/button"),_button2=_interopRequireDefault(_button),_message2=require("antd/lib/message"),_message3=_interopRequireDefault(_message2),_upload=require("antd/lib/upload"),_upload2=_interopRequireDefault(_upload),_createClass=function(){function r(e,t){for(var a=0;a<t.length;a++){var r=t[a];r.enumerable=r.enumerable||!1,r.configurable=!0,"value"in r&&(r.writable=!0),Object.defineProperty(e,r.key,r)}}return function(e,t,a){return t&&r(e.prototype,t),a&&r(e,a),e}}(),_icons=(require("antd/lib/row/style/css"),require("antd/lib/col/style/css"),require("antd/lib/button/style/css"),require("antd/lib/message/style/css"),require("antd/lib/upload/style/css"),require("@ant-design/icons")),_antd=require("antd"),_react=require("react"),_react2=_interopRequireDefault(_react),_utilAxios=require("../util-axios"),_utilAxios2=_interopRequireDefault(_utilAxios);function _interopRequireDefault(e){return e&&e.__esModule?e:{default:e}}function _classCallCheck(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function _possibleConstructorReturn(e,t){if(e)return!t||"object"!=typeof t&&"function"!=typeof t?e:t;throw new ReferenceError("this hasn't been initialised - super() hasn't been called")}function _inherits(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function, not "+typeof t);e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),t&&(Object.setPrototypeOf?Object.setPrototypeOf(e,t):e.__proto__=t)}require("./style/index");var Dragger=_upload2.default.Dragger,FormEdit=function(){function t(e){_classCallCheck(this,t);e=_possibleConstructorReturn(this,(t.__proto__||Object.getPrototypeOf(t)).call(this,e));return e.state={loading:!1,disabled:e.props.disabled||!1,imageUrl:e.props.value||"",uploadUrl:e.props.uploadUrl||_utilAxios2.default.config().uploadPath,pxText:e.props.pxText||"425*260",hideLabel:e.props.hideLabel||!1,label:e.props.label||"封面图片",isLt:e.props.isLt||2,coverUrlRequired:e.props.coverUrlRequired,percent:0},e}return _inherits(t,_react2.default.Component),_createClass(t,[{key:"render",value:function(){var l=this,e=this.state,t=e.loading,a=e.imageUrl,r=e.uploadUrl,n=e.disabled,o=e.pxText,i=e.hideLabel,u=e.label,c=e.isLt,e=e.coverUrlRequired,s=a,a=(-1<a.indexOf("[{")&&(s=JSON.parse(a)[0].url),{listType:"picture-card",accept:"image/*",action:r,disabled:n,showUploadList:!1,beforeUpload:function(e){var t=e.type.toLowerCase(),t="image/png"===t||"image/jpg"===t||"image/jpeg"===t||"image/gif"===t,a=(t||_message3.default.error("请上传正确的图片格式"),e.size/1024/1024<c);a||_message3.default.error("图片大小必须小于"+c+"MB!"),e.name;return t&&a},onChange:function(e){var t=e.file,a=t.status,r=t.response,t=t.percent;"uploading"===a&&l.setState({loading:!0,percent:t.toFixed(2)}),"done"===a&&(_message3.default.success(e.file.name+" 文件上传成功."),l.setState({loading:!1,percent:0,imageUrl:r.data},function(){console.log(l.state.imageUrl,"上传组件中的imageUrl"),l.props.onChange&&l.props.onChange(l.state.imageUrl)})),"error"===a&&_message3.default.error(e.file.name+" 文件上传失败.")}}),r=_react2.default.createElement("div",null,_react2.default.createElement("div",{style:{position:"absolute",left:"220px",bottom:0,zIndex:"1"}},_react2.default.createElement(_button2.default,{disabled:n,icon:_react2.default.createElement(_icons.UploadOutlined,null)},"上传")));return _react2.default.createElement(_row2.default,{className:"upload-coverimg"},_react2.default.createElement(_col2.default,null,_react2.default.createElement(_upload2.default,a,_react2.default.createElement("div",{className:"ant-upload ant-upload-drag",style:{display:"flex",alignItems:"center",justifyContent:"center",flexDirection:"column",border:"none"}},t?_react2.default.createElement(_react.Fragment,null,_react2.default.createElement("div",{style:{fontSize:"15px"}},_react2.default.createElement(_icons.LoadingOutlined,null),_react2.default.createElement("div",{style:{fontSize:"14px"}},this.state.percent,"%"))):_react2.default.createElement(_react.Fragment,null,s?"":_react2.default.createElement(_react.Fragment,null,_react2.default.createElement("p",{className:"ant-upload-drag-icon"},_react2.default.createElement(_icons.CloudUploadOutlined,null)),_react2.default.createElement("p",{className:"ant-upload-text"},"上传图样"),_react2.default.createElement("p",{className:"ant-upload-hint"},"请注意长宽比例"))),_react2.default.createElement("div",{style:{position:"absolute",left:"220px",bottom:0,zIndex:"1"}},_react2.default.createElement(_button2.default,{icon:_react2.default.createElement(_icons.UploadOutlined,null)},"上传")),s&&!t?_react2.default.createElement("img",{src:s,alt:"avatar",style:{width:"100%",height:"100%"}}):r))),_react2.default.createElement(_col2.default,null,i?"":_react2.default.createElement("p",{style:{color:"#7d7d7d",fontSize:"14px",fontWeight:"600"}},e?_react2.default.createElement("span",{style:{marginRight:"4px",color:"#ff4d4f",fontSize:"14px"}},"*"):"",u),_react2.default.createElement("p",{style:{color:"rgba(0, 0, 0, 0.45)",fontSize:"14px"}},"推荐使用图片大小：",o,"像素，或长宽比相同的其他合适尺寸。",_react2.default.createElement("br",null),"图片一般为RGB模式、72dpi分辨率，JPG,PNG,GIF格式，小于",c||1,"M。")))}}]),t}();exports.default=FormEdit;