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 = (
+
+ );
+ return (
+
+
+ {fileList.length >= 3 ? null : uploadButton}
+
+
+ 
+
+