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 e942891e..8159e6e9 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 2e464d9f..8e5ce604 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 = ( +