前端：文件上传。后续继续完善。
YunaiV
parent
120fba6cc6
commit
6c135166c5
|
|
@ -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",
|
||||
|
|
|
|||
|
|
@ -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 = (
|
||||
<div>
|
||||
<Icon type="plus" />
|
||||
<div className="ant-upload-text">Upload</div>
|
||||
</div>
|
||||
);
|
||||
return (
|
||||
<div className="clearfix">
|
||||
<Upload
|
||||
// action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
|
||||
action="https://up-z2.qiniu.com"
|
||||
listType="picture-card"
|
||||
fileList={fileList}
|
||||
onPreview={this.handlePreview}
|
||||
onChange={this.handleChange}
|
||||
beforeUpload={this.beforeUpload}
|
||||
customRequest={this.customRequest}
|
||||
>
|
||||
{fileList.length >= 3 ? null : uploadButton}
|
||||
</Upload>
|
||||
<Modal visible={previewVisible} footer={null} onCancel={this.handleCancel}>
|
||||
<img alt="example" style={{ width: '100%' }} src={previewImage} />
|
||||
</Modal>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
};
|
||||
|
||||
// roleList
|
||||
@connect(({ productSpuList, productAttrList, productSpuAddOrUpdate, loading }) => ({
|
||||
// list: productSpuList.list.spus,
|
||||
|
|
@ -246,9 +363,10 @@ class ProductSpuAddOrUpdate extends Component {
|
|||
})(<Input placeholder="请输入" />)}
|
||||
</FormItem>
|
||||
<FormItem labelCol={{ span: 5 }} wrapperCol={{ span: 15 }} label="商品主图">
|
||||
{form.getFieldDecorator('picUrls', {
|
||||
initialValue: '', // TODO 修改 // TODO 芋艿，做成上传组件
|
||||
})(<Input placeholder="请输入" />)}
|
||||
{/*{form.getFieldDecorator('picUrls', {*/}
|
||||
{/* initialValue: '', // TODO 修改 // TODO 芋艿，做成上传组件*/}
|
||||
{/*})(<Input placeholder="请输入" />)}*/}
|
||||
<PicturesWall />
|
||||
</FormItem>
|
||||
<FormItem labelCol={{ span: 5 }} wrapperCol={{ span: 15 }} label="是否上架">
|
||||
{form.getFieldDecorator('visible', {
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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',
|
||||
// });
|
||||
// }
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
Loading…
Reference in New Issue