From b7b7e391e98e3c8c821b2900b712544eccf021df Mon Sep 17 00:00:00 2001 From: sushi Date: Thu, 29 Nov 2018 22:06:07 +0800 Subject: [PATCH] =?UTF-8?q?feat:=20=E6=96=B0=E5=A2=9E=E4=B8=8A=E4=BC=A0?= =?UTF-8?q?=E5=9B=BE=E7=89=87=E7=BB=84=E4=BB=B6?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- client/src/common/api.js | 5 ++ client/src/components/upload/index.js | 63 +++++++++++-------- .../pages/accounts/components/edit/index.js | 20 +++++- .../detail/components/post-topic/index.js | 59 ++++++++++++----- .../detail/components/post-topic/index.scss | 11 ++++ client/src/store/reducers/userInfo.js | 2 + service/app/controller/handle.ts | 2 +- service/app/service/qiniu.ts | 8 +-- 8 files changed, 124 insertions(+), 46 deletions(-) diff --git a/client/src/common/api.js b/client/src/common/api.js index 5ee1e7d..f27f19b 100644 --- a/client/src/common/api.js +++ b/client/src/common/api.js @@ -68,3 +68,8 @@ exports.followUser = (data) => { return instance.post('/friend/follow', data); } + +// 关注 +exports.getToken = (data) => { + return instance.get('/handle/upload/get-token', data); +} diff --git a/client/src/components/upload/index.js b/client/src/components/upload/index.js index 953f448..3a38bae 100644 --- a/client/src/components/upload/index.js +++ b/client/src/components/upload/index.js @@ -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 () { @@ -63,6 +76,6 @@ class Upload extends React.Component{ } Upload.defaultProps = { - + successCb: () => {} } export default Upload diff --git a/client/src/pages/accounts/components/edit/index.js b/client/src/pages/accounts/components/edit/index.js index 65f8fc4..65b0486 100644 --- a/client/src/pages/accounts/components/edit/index.js +++ b/client/src/pages/accounts/components/edit/index.js @@ -24,6 +24,12 @@ const AutoCompleteOption = AutoComplete.Option; type: "ADD_USERINFO", info }) + }, + changeAvatarUrl: info => { + dispatch({ + type: "CHANGE_AVATARURL", + info + }) } }; } @@ -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; @@ -132,7 +150,7 @@ class RegistrationForm extends React.Component {
{userInfo.account}
-
更换头像
+
更换头像
diff --git a/client/src/pages/detail/components/post-topic/index.js b/client/src/pages/detail/components/post-topic/index.js index 8ca4b9b..02889f7 100644 --- a/client/src/pages/detail/components/post-topic/index.js +++ b/client/src/pages/detail/components/post-topic/index.js @@ -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 (
- 上传照片 + 上传照片
{changeUploadStatus(1)}}> @@ -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') { @@ -154,7 +164,7 @@ class PostTopic extends React.Component { let InputUrl = () => { return ( -
+
{ this.state.showInputNotice ?
@@ -182,17 +192,36 @@ class PostTopic extends React.Component { ) } - let Upload = () => { - let view; - switch (this.state.uploadStatus) { - case 1: - view = ;break; - default: - view = ; - } - return view; + let ImgUpload = () => { + return ( +
+
+ + + 添加另一张 +
+
+ ) + } + + let UploadPlaceholder = () => { + return ( +
+ { + this.state.uploadStatus === 1 ? : '' + } + { + this.state.uploadStatus === 2 ? : '' + } + { + this.state.uploadStatus === 0 ? + : '' + } +
+ ) } return ( @@ -215,7 +244,7 @@ class PostTopic extends React.Component { {/* 上次占位图 */}
- +
diff --git a/client/src/pages/detail/components/post-topic/index.scss b/client/src/pages/detail/components/post-topic/index.scss index 20958a5..e8a50f6 100644 --- a/client/src/pages/detail/components/post-topic/index.scss +++ b/client/src/pages/detail/components/post-topic/index.scss @@ -73,6 +73,13 @@ } } } + + .placeholder { + position: absolute; + left: 0; + height: 100%; + width: 100%; + } .input-url { position: relative; @@ -90,6 +97,10 @@ width: 20px; } .notice { + &:hover .close-circle { + display: inline-block; + } + position: relative; height: 100%; display: flex; justify-content: center; diff --git a/client/src/store/reducers/userInfo.js b/client/src/store/reducers/userInfo.js index 98d8533..60729a6 100644 --- a/client/src/store/reducers/userInfo.js +++ b/client/src/store/reducers/userInfo.js @@ -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 } diff --git a/service/app/controller/handle.ts b/service/app/controller/handle.ts index 294d03a..249de6f 100644 --- a/service/app/controller/handle.ts +++ b/service/app/controller/handle.ts @@ -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' }) } diff --git a/service/app/service/qiniu.ts b/service/app/service/qiniu.ts index da79750..3494a5e 100644 --- a/service/app/service/qiniu.ts +++ b/service/app/service/qiniu.ts @@ -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 }