Skip to content

Commit

Permalink
feat: 新增上传图片组件
Browse files Browse the repository at this point in the history
  • Loading branch information
@zhoushaw
zhoushaw committed Nov 29, 2018
1 parent 835f7c7 commit b7b7e39
Show file tree
Hide file tree
Showing 8 changed files with 124 additions and 46 deletions.
5 changes: 5 additions & 0 deletions client/src/common/api.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -68,3 +68,8 @@ exports.followUser = (data) => {
return instance.post('/friend/follow', data);
}


// 关注
exports.getToken = (data) => {
return instance.get('/handle/upload/get-token', data);
}
63 changes: 38 additions & 25 deletions client/src/components/upload/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,52 +3,65 @@ import PropTypes from "prop-types";
import * as qiniu from 'qiniu-js'
import Style from './index.scss'
import { notification } from 'antd';
import API from '@common/api.js'

class Upload extends React.Component{


uploadFn = () => {
uploadFn = async () => {
let response = await API.getToken()
let {baseUrl, token} = response.data
let files = this.refs.upload.files
let fileType = files[0].type;
if (/^image/.test(fileType)) {
// 读取结果在fileReader.result里面

} else {
notification['error']({
message: "请选择图片类型文件"
})
}


// 校验图片
if (!this.imageVerify) return


var putExtra = {
fname: "",
params: {},
mimeType: [] || null
mimeType: ["image/png", "image/jpeg", "image/gif"]
};

var config = {
// useCdnDomain: true,
region: qiniu.region.z2
region: qiniu.region.z0
};
let token = 'Jyi6Ntprm38nI6n1heGjwXyQmzie8ZjY7l9Cq_Je:pmA4lE0xsPRmnGO9s8cEkgTGJ-g=:eyJzY29wZSI6ImRhbmthbC1jZG4iLCJkZWFkbGluZSI6MTU0MzI1Mjk3M30='
var observable = qiniu.upload(files[0], null, token, putExtra, config)

// 文件名
let key = new Date().getTime() + files[0].name;
var observable = qiniu.upload(files[0], key, token, putExtra, config)

var observer = {
next(res){
console.log(res)
next: (res) => {
// ...
},
error(err){
// ...
error: (err) => {
notification.error({
message: err
})
},
complete(res){
console.log(res)
// ...
complete: (res) => {
let imgUrl = baseUrl + '/' + res.key
this.props.successCb(imgUrl)
}
}

var subscription = observable.subscribe(observer) // 上传开始

console.log(this.refs.upload.files)
}

imageVerify = () => {
let files = this.refs.upload.files
let fileType = files[0].type;
if (/^image/.test(fileType)) {
// 读取结果在fileReader.result里面
return true
} else {
notification.error({
message: "请选择图片类型文件"
})
return false
}
}

render () {
Expand All @@ -63,6 +76,6 @@ class Upload extends React.Component{
}

Upload.defaultProps = {

successCb: () => {}
}
export default Upload
20 changes: 19 additions & 1 deletion client/src/pages/accounts/components/edit/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,6 +24,12 @@ const AutoCompleteOption = AutoComplete.Option;
type: "ADD_USERINFO",
info
})
},
changeAvatarUrl: info => {
dispatch({
type: "CHANGE_AVATARURL",
info
})
}
};
}
Expand Down Expand Up @@ -85,6 +91,18 @@ class RegistrationForm extends React.Component {
this.setState({ autoCompleteResult });
}

changeAvatarCb = async (avatarUrl) => {
let info = {
avatarUrl
}
let response = await API.updatePersonalInfo(info);
notification.success({
message: response.message
})

this.props.changeAvatarUrl(info)
}

render() {
const { getFieldDecorator } = this.props.form;
const { autoCompleteResult } = this.state;
Expand Down Expand Up @@ -132,7 +150,7 @@ class RegistrationForm extends React.Component {
</Col>
<Col span={16} className="user_abstract">
<div className={'username'}>{userInfo.account}</div>
<div className={'notice'}>更换头像<Upload className={'notice'} /></div>
<div className={'notice'}>更换头像<Upload successCb={this.changeAvatarCb} className={'notice'} /></div>

</Col>
</Row>
Expand Down
59 changes: 44 additions & 15 deletions client/src/pages/detail/components/post-topic/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,14 +6,15 @@ import Avatar from '@components/avatar'
import Carousel from '@components/carousel'
import { notification} from 'antd';
import API from '@common/api.js'
import Upload from '@components/upload'


let ImageUpload = ({ changeUploadStatus }) => {
let ImageUpload = ({ changeUploadStatus, uploadImgSuccess }) => {
return (
<section className="image-upload">
<div>
<span className="icon camera"></span>
<span>上传照片</span>
<span><Upload successCb={uploadImgSuccess} className={'placeholder'} />上传照片</span>
</div>
<div>
<span className="icon network" onClick={() => {changeUploadStatus(1)}}></span>
Expand Down Expand Up @@ -91,6 +92,15 @@ class PostTopic extends React.Component {
})
}


uploadImgSuccess = async (url) => {
this.setState({
imageList: [...this.state.imageList, url],
uploadStatus: 2
})
console.log(this.state.imageList)
}

// 添加网络图片
pushImgUrl = (event) => {
if (event.key === 'Enter') {
Expand Down Expand Up @@ -154,7 +164,7 @@ class PostTopic extends React.Component {

let InputUrl = () => {
return (
<section className="input-url">
<section key={1} className="input-url">
{
this.state.showInputNotice ?
<div className="notice" onClick={this.changeInpurUrlStatus}>
Expand Down Expand Up @@ -182,17 +192,36 @@ class PostTopic extends React.Component {
)
}

let Upload = () => {
let view;
switch (this.state.uploadStatus) {
case 1:
view = <InputUrl />;break;
default:
view = <ImageUpload
changeUploadStatus={this.changeUploadStatus}
/>;
}
return view;
let ImgUpload = () => {
return (
<section key={2} className="input-url">
<div className="notice">
<span className="close-circle" onClick={this.closeInputUrl}></span>
<i className="icon"></i>
<span><Upload successCb={this.uploadImgSuccess} className={'placeholder'} />添加另一张</span>
</div>
</section>
)
}

let UploadPlaceholder = () => {
return (
<div>
{
this.state.uploadStatus === 1 ? <InputUrl /> : ''
}
{
this.state.uploadStatus === 2 ? <ImgUpload /> : ''
}
{
this.state.uploadStatus === 0 ?
<ImageUpload
uploadImgSuccess={this.uploadImgSuccess}
changeUploadStatus={this.changeUploadStatus}
/> : ''
}
</div>
)
}

return (
Expand All @@ -215,7 +244,7 @@ class PostTopic extends React.Component {

{/* 上次占位图 */}
<div className="upload-style">
<Upload />
<UploadPlaceholder />
</div>

<div className="descript">
Expand Down
11 changes: 11 additions & 0 deletions client/src/pages/detail/components/post-topic/index.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -73,6 +73,13 @@
}
}
}

.placeholder {
position: absolute;
left: 0;
height: 100%;
width: 100%;
}

.input-url {
position: relative;
Expand All @@ -90,6 +97,10 @@
width: 20px;
}
.notice {
&:hover .close-circle {
display: inline-block;
}
position: relative;
height: 100%;
display: flex;
justify-content: center;
Expand Down
2 changes: 2 additions & 0 deletions client/src/store/reducers/userInfo.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,8 @@ const userInfo = (state = defaultValue, action) => {
switch (action.type) {
case 'ADD_USERINFO':
return Object.assign({}, state, action.info)
case 'CHANGE_AVATARURL':
return Object.assign({}, state, action.info)
default:
return state
}
Expand Down
2 changes: 1 addition & 1 deletion service/app/controller/handle.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ class HandlerController extends Controller {
let token = await ctx.service.qiniu.getQiniuToken()
ctx.returnBody(200, "获取token成功", {
token: token,
baseUrl: 'https://cdn.dankal.cn'
baseUrl: 'http://piyhxgz90.bkt.clouddn.com'
})
}

Expand Down
8 changes: 4 additions & 4 deletions service/app/service/qiniu.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,12 +10,12 @@ interface qiniuOptioin {
}

export default class qiniuService extends Service {
private accessKey: string = 'Jyi6Ntprm38nI6n1heGjwXyQmzie8ZjY7l9Cq_Je';
private secretKey: string = 'eBqe82USZuB6gnqvjTsyg_qki6C6HwnkFIvNIH-y';
private publicBucketDomain = 'http://or9tdbe53.bkt.clouddn.com';
private accessKey: string = 'nIK8fxtGzShsw_w2jGJbtCTlo7fX3ze7y2i_QSfY';
private secretKey: string = 'jHk2Rft4VPBR2trH3BX4fvaBgFMMsKH17RNzQk-L';
private publicBucketDomain = 'http://piyhxgz90.bkt.clouddn.com';

private options: qiniuOptioin = {
scope: 'dankal-cdn',
scope: 'instagram',
expires: 7200
}

Expand Down

0 comments on commit b7b7e39

Please sign in to comment.