Skip to content

Commit

Permalink
更新代码
Browse files Browse the repository at this point in the history
  • Loading branch information
54sword committed Apr 20, 2018
1 parent c12f641 commit 68fe1e7
Show file tree
Hide file tree
Showing 12 changed files with 437 additions and 64 deletions.
4 changes: 2 additions & 2 deletions .babelrc
Original file line number Diff line number Diff line change
Expand Up @@ -2,10 +2,10 @@
"presets": ["react", "es2015", "stage-2"],
"env": {
"server": {
"plugins": ["syntax-dynamic-import", "dynamic-import-node"]
"plugins": ["transform-decorators-legacy","syntax-dynamic-import", "dynamic-import-node"]
},
"client": {
"plugins": ["dynamic-import-webpack"]
"plugins": ["transform-decorators-legacy","dynamic-import-webpack"]
}
}
}
3 changes: 2 additions & 1 deletion config/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -20,8 +20,9 @@ let config = {
// 开发环境配置
if (process.env.NODE_ENV == 'development') {
config.debug = true
config.port = 5000
config.class_scoped_name = '[name]_[local]__[hash:base64:5]'
config.public_path = '//localhost:4000'
config.public_path = '//localhost:5000'
config.api_url = 'http://localhost:3000'
// config.api_url = 'http://admin.xiaoduyu.com'
}
Expand Down
18 changes: 14 additions & 4 deletions package-lock.json

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

1 change: 1 addition & 0 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -52,6 +52,7 @@
"babel-loader": "^7.1.2",
"babel-plugin-dynamic-import-node": "^1.2.0",
"babel-plugin-syntax-dynamic-import": "^6.18.0",
"babel-plugin-transform-decorators-legacy": "^1.3.4",
"babel-preset-es2015": "^6.24.1",
"babel-preset-react": "^6.24.1",
"babel-preset-stage-0": "^6.24.1",
Expand Down
49 changes: 49 additions & 0 deletions src/components/_qiniu-upload-image/__tests__/index.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,49 @@
import React from 'react'
import { shallow, mount, render } from 'enzyme'
// import { Link } from 'react-router'
import { Provider } from 'react-redux'
import { bindActionCreators } from 'redux'

import configureStore from '../../../store/configureStore'
import testConfig from '../../../../config/test'

// https://github.com/airbnb/enzyme/issues/341
import 'jsdom-global/register'
import QiniuUploadImage from '../index'

import { signin } from '../../../actions/sign'
import { getQiNiuToken } from '../../../actions/qiniu'


describe('<QiniuUploadImage />', function() {

const store = configureStore()
const { dispatch } = store

let wrapper = null

it('应该可以正常登录', function() {
const action = bindActionCreators(signin, dispatch)
return action({ email: testConfig.email, password: testConfig.password }, (res, result)=>{
expect(result.success).toEqual(true)
})
})

it('应该没有上传按钮', function() {
wrapper = mount(<Provider store={store}><QiniuUploadImage /></Provider>)
expect(wrapper.contains(<span></span>)).toBe(true)
})

/*
it('应该有上传按钮', function() {
const action = bindActionCreators(getQiNiuToken, dispatch)
return action({
callback: (data) => {
wrapper.node.props.store.getState({ token: data.token, url: data.url })
expect(wrapper.contains(<a href="javascript:void(0)" className="button-white">上传图片</a>)).toBe(true)
}
})
})
*/

})
163 changes: 163 additions & 0 deletions src/components/_qiniu-upload-image/index.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,163 @@
import React from 'react'
import PropTypes from 'prop-types'
import Qiniu from 'react-qiniu'

import styles from './style.scss'

import { bindActionCreators } from 'redux'
import { connect } from 'react-redux'
import { getQiNiuToken } from '../../actions/qiniu'


import connectReudx from '../../common/connect-redux'

import Loading from '../../components/loading'

export class QiniuUploadImage extends React.Component {

static defaultProps = {
displayLoading: true,
name: "上传图片",
multiple: true,
upload: (s)=>{},
onDrop: (files)=>{},
onUpload: (file)=>{}
}

static propTypes = {
getQiNiuToken: PropTypes.func.isRequired
}

static mapDispatchToProps = { getQiNiuToken }

constructor (props) {
super(props)

this.state = {
loading: false,
files: [],
token: '',
url: '',
uploadKey: ''
}

this.onDrop = this._onDrop.bind(this)
this.onUpload = this._onUpload.bind(this)
}

async componentDidMount() {

const { getQiNiuToken } = this.props

let [err, result] = await getQiNiuToken()

if (result) {
this.setState({ token: result.token, url: result.url })
}

}

_onUpload(files) {

const self = this
const { upload, onUpload } = this.props
const { url } = this.state

self.setState({ loading: true })

let count = 0

files.map(function (f) {

if (f.type == '') {
alert('上传图片格式错误')
self.setState({ loading: false, progress: '' })
return
}

f.onprogress = function(e) {

onUpload(e)

if (e.percent == 100 && e.currentTarget.status && e.currentTarget.status == 200) {

// 上传完成

upload(url+'/'+JSON.parse(e.currentTarget.response).key)

count = count + 1

if (count >= files.length) {
self.setState({ loading: false })
}

}
}

})
}

_onDrop(files) {
const { onDrop } = this.props
onDrop(files)
}

render() {

// console.log(this.state.token);

if (!this.state.token) {
return (<span></span>)
}

const { loading, token } = this.state
const { multiple, name, displayLoading } = this.props

return (
<div>
{displayLoading && loading ? <Loading /> : null}
<Qiniu
onDrop={this.onDrop}
size={100}
multiple={multiple}
accept="image/*"
token={this.state.token}
uploadKey={this.state.uploadKey}
maxSize="1Mb"
onUpload={this.onUpload}>
{name}
</Qiniu>
</div>
);
}
}

/*
QiniuUploadImage.defaultProps = {
displayLoading: true,
name: '上传图片',
multiple: true,
upload: (s)=>{},
onDrop: (files)=>{},
onUpload: (file)=>{}
}
QiniuUploadImage.propTypes = {
getQiNiuToken: PropTypes.func.isRequired
}
const mapStateToProps = (state) => {
return {
}
}
const mapDispatchToProps = (dispatch) => {
return {
getQiNiuToken: bindActionCreators(getQiNiuToken, dispatch)
}
}
QiniuUploadImage = connect(mapStateToProps,mapDispatchToProps)(QiniuUploadImage)
*/

export default connectReudx(QiniuUploadImage)
8 changes: 8 additions & 0 deletions src/components/_qiniu-upload-image/style.scss
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@

:global{
.dropzone{
border-style: none !important;
height: auto !important;
width: auto !important;
}
}
Loading

0 comments on commit 68fe1e7

Please sign in to comment.