From 6c135166c596ff4d5b3a0c5127166d1dd14bd321 Mon Sep 17 00:00:00 2001 From: YunaiV <> Date: Thu, 2 May 2019 01:01:35 +0800 Subject: [PATCH] =?UTF-8?q?=E5=89=8D=E7=AB=AF=EF=BC=9A=E6=96=87=E4=BB=B6?= =?UTF-8?q?=E4=B8=8A=E4=BC=A0=E3=80=82=E5=90=8E=E7=BB=AD=E7=BB=A7=E7=BB=AD?= =?UTF-8?q?=E5=AE=8C=E5=96=84=E3=80=82?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- admin-web/package.json | 1 + .../pages/Product/ProductSpuAddOrUpdate.js | 126 +++++++++++++++++- .../pages/Product/ProductSpuAddOrUpdate.less | 10 ++ admin-web/src/services/admin.js | 14 ++ .../application/config/MVCConfiguration.java | 3 +- 5 files changed, 149 insertions(+), 5 deletions(-) diff --git a/admin-web/package.json b/admin-web/package.json index e942891ea..8159e6e9b 100644 --- a/admin-web/package.json +++ b/admin-web/package.json @@ -52,6 +52,7 @@ "omit.js": "^1.0.0", "path-to-regexp": "^3.0.0", "prop-types": "^15.6.2", + "qiniu-js": "^2.5.4", "qs": "^6.6.0", "rc-animate": "^2.6.0", "react": "^16.7.0", diff --git a/admin-web/src/pages/Product/ProductSpuAddOrUpdate.js b/admin-web/src/pages/Product/ProductSpuAddOrUpdate.js index 2e464d9fb..8e5ce6045 100644 --- a/admin-web/src/pages/Product/ProductSpuAddOrUpdate.js +++ b/admin-web/src/pages/Product/ProductSpuAddOrUpdate.js @@ -3,17 +3,134 @@ import React, {PureComponent, Fragment, Component} from 'react'; import { connect } from 'dva'; import moment from 'moment'; -import {Card, Form, Input, Radio, Button, Table, Select} from 'antd'; +import {Card, Form, Input, Radio, Button, Modal, Select, Upload, Icon} from 'antd'; import PageHeaderWrapper from '@/components/PageHeaderWrapper'; +import * as qiniu from 'qiniu-js' + import styles from './ProductSpuAddOrUpdate.less'; import ProductAttrSelectFormItem from "../../components/Product/ProductAttrSelectFormItem"; import ProductSkuAddOrUpdateTable from "../../components/Product/ProductSkuAddOrUpdateTable"; +import {fileGetQiniuToken, fileUploadQiniu} from "../../services/admin"; const FormItem = Form.Item; const RadioGroup = Radio.Group; const Option = Select.Option; +class PicturesWall extends React.Component { + state = { + token: undefined, // 七牛 token + + + previewVisible: false, + previewImage: '', + + fileList: [{ // 目前图片 + uid: -1, + name: 'xxx.png', + status: 'done', + url: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png', + }], + }; + + handleCancel = () => this.setState({ previewVisible: false }) + + handlePreview = (file) => { + this.setState({ + previewImage: file.url || file.thumbUrl, + previewVisible: true, + }); + } + + beforeUpload = async () => { + const tokenResult = await fileGetQiniuToken(); + if (tokenResult.code !== 0) { + alert('获得七牛上传 Token 失败'); + return false; + } + this.setState({ + token: tokenResult.data, + }); + return true; + }; + + customRequest = ({action, + file, + headers, + onError, + onProgress, + onSuccess, + withCredentials,}) => { + // 使用 FileReader 将上传的文件转换成二进制流,满足 'application/octet-stream' 格式的要求 + const reader = new FileReader(); + reader.readAsArrayBuffer(file); + let fileData = null; + reader.onload = (e) => { + // 在文件读取结束后执行的操作 + fileData = e.target.result; + // 上传文件 + // fileUploadQiniu(fileData); + // debugger; + // 使用 axios 进行文件上传的请求 + // axios.put(action, fileData, { + // withCredentials, + // headers, + // onUploadProgress: ({ total, loaded }) => { + // // 进行上传进度输出,更加直观 + // onProgress({ percent: Math.round(loaded / total * 100).toFixed(2) }, file); + // }, + // }).then(response => { + // onSuccess(response, file); + // }) + // .catch(onError); + let observable = qiniu.upload(file, '123', this.state.token); + observable.subscribe(function () { + // next + }, function () { + // error + }, function () { + // complete + }); + }; + return { + abort() { + console.log('upload progress is aborted.'); + }, + }; + }; + + handleChange = ({ fileList }) => this.setState({ fileList }) + + render() { + const { previewVisible, previewImage, fileList } = this.state; + const uploadButton = ( +
+ +
Upload
+
+ ); + return ( +
+ + {fileList.length >= 3 ? null : uploadButton} + + + example + +
+ ); + } +}; + // roleList @connect(({ productSpuList, productAttrList, productSpuAddOrUpdate, loading }) => ({ // list: productSpuList.list.spus, @@ -246,9 +363,10 @@ class ProductSpuAddOrUpdate extends Component { })()} - {form.getFieldDecorator('picUrls', { - initialValue: '', // TODO 修改 // TODO 芋艿,做成上传组件 - })()} + {/*{form.getFieldDecorator('picUrls', {*/} + {/* initialValue: '', // TODO 修改 // TODO 芋艿,做成上传组件*/} + {/*})()}*/} + {form.getFieldDecorator('visible', { diff --git a/admin-web/src/pages/Product/ProductSpuAddOrUpdate.less b/admin-web/src/pages/Product/ProductSpuAddOrUpdate.less index ebb45c292..bc395f2f3 100644 --- a/admin-web/src/pages/Product/ProductSpuAddOrUpdate.less +++ b/admin-web/src/pages/Product/ProductSpuAddOrUpdate.less @@ -13,3 +13,13 @@ .tableDelete { color: red; } + +.ant-upload-select-picture-card i { + font-size: 32px; + color: #999; +} + +.ant-upload-select-picture-card .ant-upload-text { + margin-top: 8px; + color: #666; +} diff --git a/admin-web/src/services/admin.js b/admin-web/src/services/admin.js index a9ea23b1a..8f58db491 100644 --- a/admin-web/src/services/admin.js +++ b/admin-web/src/services/admin.js @@ -156,3 +156,17 @@ export async function dictionaryDelete(params) { method: 'POST', }); } + +// file + +export async function fileGetQiniuToken() { + return request(`/admin-api/admins/file/get_qiniu_token`, { + method: 'GET', + }); +} + +// export async function fileUploadQiniu(fileData) { +// return request(`/qiniu/upload`, { +// method: 'POST', +// }); +// } diff --git a/admin/admin-application/src/main/java/cn/iocoder/mall/admin/application/config/MVCConfiguration.java b/admin/admin-application/src/main/java/cn/iocoder/mall/admin/application/config/MVCConfiguration.java index 163052c88..d309a73f3 100644 --- a/admin/admin-application/src/main/java/cn/iocoder/mall/admin/application/config/MVCConfiguration.java +++ b/admin/admin-application/src/main/java/cn/iocoder/mall/admin/application/config/MVCConfiguration.java @@ -38,7 +38,8 @@ public class MVCConfiguration implements WebMvcConfigurer { public void addInterceptors(InterceptorRegistry registry) { // registry.addInterceptor(securityInterceptor).addPathPatterns("/user/**", "/admin/**"); // 只拦截我们定义的接口 registry.addInterceptor(adminAccessLogInterceptor).addPathPatterns("/admins/**"); - registry.addInterceptor(adminSecurityInterceptor.setIgnoreUrls(ignoreUrls)).addPathPatterns("/admins/**"); + registry.addInterceptor(adminSecurityInterceptor.setIgnoreUrls(ignoreUrls)).addPathPatterns("/admins/**") + .excludePathPatterns("/admins/passport/login"); // 排除登陆接口 } @Override