code

Author: beclass

README.md

@@ -1,2 +1,15 @@
 # react-uploadFile
 react+antd+dva 上传图片插件
+
+使用说明：
+页面引入组件
+<UploadFile files={} onUpload={} onRemove={} data={} />
+
+参数说明：
+files：文件数组
+onUpload：上传方法
+onRemove：删除文件
+data：上传携带参数
+multiple：是否批量上传 默认false
+showWeb：是否显示网络图片 默认false
+

UploadFile.js

@@ -0,0 +1,170 @@
+import React, { Component } from 'react'
+import PropTypes from 'prop-types'
+import { Upload, Icon, Modal,Button,Input,notification} from 'antd'
+import styles from './UploadFile.less'
+
+const getFileList = (files) => {
+ if (Array.isArray(files)) {
+ return files.map((item, key) => {
+ const urlArr = item.url.split('/')
+ return { url: item.url, id: item.id, uid: key,key:item.key,name: urlArr[urlArr.length - 1], status: 'done' }
+ })
+ }
+ if (files && !!files.length) {
+ const filesArr = files.split('/')
+ return [{ uid: -1, url: files, name: filesArr[filesArr.length - 1], status: 'done' }]
+ }
+ return ''
+}
+
+function renderAccecpt (accept) {
+ if (!accept) {
+ return null
+ }
+ if (['image', 'video', 'audio'].find(ext => ext === accept)) {
+ return `${accept}/*`
+ }
+ if (accept === 'zip') {
+ return 'application/zip,application/x-zip,application/x-zip-compressed'
+ }
+ return `.${accept}`
+}
+
+class UploadFiles extends Component {
+ static propTypes = {
+ files: PropTypes.oneOfType([PropTypes.array, PropTypes.string]),
+ onUpload: PropTypes.func.isRequired,
+ multiple: PropTypes.oneOfType([PropTypes.bool, PropTypes.number]),
+ disabled: PropTypes.bool,
+ path: PropTypes.string,
+ accept: PropTypes.string,
+ }
+ constructor (props) {
+ super(props)
+ this.state = {
+ previewVisible: false,
+ previewImage: '',
+ files: getFileList(props.files),
+ webpicVisible:false,
+ weburl:''
+ }
+ }
+
+ componentWillReceiveProps (nextProps) {
+ if (Array.isArray(this.props.files) && !this.props.files.length && !!nextProps.files.length) {
+ this.setState({ files: getFileList(nextProps.files) })
+ }
+ }
+ showWebPic=()=>{
+ this.setState({webpicVisible:true})
+ }
+ picInputChange=(e)=>{
+ this.setState({weburl:e.target.value})
+ }
+ useWebPic=()=>{
+ const {weburl,files} = this.state;
+ const ishttp=weburl.indexOf('http')>-1;
+ const isimg =weburl.indexOf('.jpg')>-1||weburl.indexOf('.png')||weburl.indexOf('.jepg')>-1;
+ if(!ishttp||!isimg){
+ return notification.error({message: '添加失败',description:"非法链接"});
+ }
+ let newFiles = [];
+ const obj={uid:files.length+1,id:files.length+1,url:weburl,key:weburl.split('.com')[1],status:'done'};
+ newFiles.push(obj);
+ this.props.onUpload(obj);
+ this.setState({files:newFiles,webpicVisible:false})
+ }
+ render () {
+ const { previewVisible, webpicVisible,previewImage,files} = this.state
+ const { multiple = 1,showWeb,onUpload,onRemove, disabled,data,path, accept } = this.props
+ const renderFiles = (fileList) => {
+ const newFiles = fileList.map((file) => {
+ return file.response ? {id:file.response.data.id,url:file.response.data.url,key:file.response.data.key} : file
+ })
+ if (multiple === 1) {
+ return newFiles[0]
+ }
+ return newFiles
+ }
+ //post url
+ let actionUrl = `${API_URL}/file`
+ if (path) {
+ actionUrl += `&path=${path}`
+ }
+ const uploadProps = {
+ accept: renderAccecpt(accept),
+ action: actionUrl,
+ headers: {
+ 'X-Requested-With': null,
+ },
+ data:data,
+ disabled,
+ listType: 'picture-card',
+ fileList: files,
+ multiple: multiple === true,
+ onPreview: (file) => {
+ this.setState({
+ previewImage: file.url || file.thumbUrl,
+ previewVisible: true,
+ })
+ },
+ beforeUpload: () => {
+ return true
+ },
+ onChange: ({ file, fileList }) => {
+ this.setState({ files: fileList })
+ if (file.percent === 100 && file.status === 'done') {
+ onUpload(renderFiles(fileList, 1))
+ }
+ },
+ onRemove: (file) => {
+ let fileKey;
+ const {response,key} = file;
+ fileKey=key;
+ if(response){
+ fileKey=response.data.key;
+ }
+ if (disabled) {
+ return false
+ }
+ const fileList = this.state.files.filter(item => item.uid !== file.uid)
+ onUpload(renderFiles(fileList, 0))
+ onRemove(fileKey);
+ return true
+ },
+ }
+ const modalProps = {
+ visible: previewVisible,
+ footer: null,
+ onCancel: () => this.setState({ previewVisible: false }),
+ }
+ const modalPropsPic = {
+ title:'添加网络图片',
+ visible: true,
+ onCancel: () => this.setState({webpicVisible:false}),
+ onOk:()=>this.useWebPic()
+ }
+ const uploadButton = (
+ <div>
+ <Icon type="plus" />
+ <div className="ant-upload-text">本地上传</div>
+ </div>
+ )
+ return (
+ <div className="clearfix">
+ <Upload {...uploadProps}>
+ {multiple === true ? uploadButton : (files.length < multiple && uploadButton)}
+ </Upload>
+ {showWeb&&<Button icon="plus" onClick={this.showWebPic}>网络图片</Button>}
+ <Modal {...modalProps}>
+ <img className={styles.previewImage} src={previewImage} />
+ </Modal>
+ {webpicVisible&&<Modal {...modalPropsPic} >
+ <Input placeholder="输入图片链接..." onChange={this.picInputChange} style={{width:'100%'}}/>
+ </Modal>} 
+ </div>
+ )
+ }
+}
+
+export default UploadFiles

UploadFile.less

@@ -0,0 +1,26 @@
+:global {
+ .ant-upload-select-picture-card i {
+ font-size: 40px;
+ color: #999;
+ }
+
+ .ant-upload-select-picture-card .ant-upload-text {
+ margin-top: -10px;
+ font-size: 12px;
+ color: #666;
+ }
+
+ .ant-upload-list-picture-card .ant-upload-list-item {
+ width: 100px;
+ height: auto;
+ }
+
+ .ant-upload-list-picture-card .ant-upload-list-item-thumbnail img {
+ object-fit: contain; //cover
+ }
+}
+
+.previewImage{
+ width: 100%;
+ margin-top: 20px;
+}

package.json

@@ -0,0 +1,6 @@
+{
+ "name": "UploadFile",
+ "version": "0.0.1",
+ "private": true,
+ "main": "./UploadFile.js"
+ }