一、搜索Search
- 搜索框
<Search placeholder="请输入关键字"
defaultValue={kw && kw != 'null' ? kw : ''}
className={styles.search}
onChange={() => this.handleKwChange()}
onSearch={(e) => this.handleSearch(e)}
/> 引入工具方法：去掉收尾空格
import {trimStr} from '@/utils/utils'; // utils.js
export function trimStr(str){
return str.replace(/(^\s*)|(\s*$)/g,"");
}搜索按钮触发搜索方法，输入内容改变自动搜索
handleSearch = e => {
const { dispatch } = this.props;
const { currentPage } = this.state;
let kw = trimStr(e);
this.setState({ keyword : kw });
dispatch({
type: 'newMallOrder/fetch',
payload: {
currentPage,
e: {
keyword: kw
},
showCount: 10
},
});
}; handleKwChange = () => {
const { dispatch } = this.props;
const { currentPage } = this.state;
if(event && event.target && event.target.value){
let value = event.target.value;
this.handleSearch(value)
}else{
dispatch({
type: 'newMallOrder/fetch',
payload: {
currentPage,
e: {
keyword: null
},
showCount: 10
},
});
}
}
二、选择器Select & TreeSelect
- 表单中嵌入Select选择器
<FormItem>
{getFieldDecorator('tempTypeId',{
initialValue: 0
})(
<Select placeholder="请选择" style={{ width: '100%' }}
onChange={this.handleTempType}>
<Option value={0}>H5在线编辑</Option>
<Option value={1}>贺卡</Option>
<Option value={2}>海报</Option>
<Option value={3}>壁纸</Option>
<Option value={4}>全部</Option>
</Select>
)}
</FormItem>选择方法：
handleTempType = value => {
const { dispatch } = this.props;
const { keyword } = this.state; this.setState({
tempType: tempTypeMap[value]
})
dispatch({
type: 'temp/fetch',
payload: {
currentPage: 1,
e: {
keyword: keyword,
subjectClass: tempTypeMap[value]
},
showCount: 2
}
});
dispatch({
type: 'temp/fetchType',
payload: {
ofClass: tempTypeMap[value]
},
callback: (res) => {
if(res.code == 200){
let typeList = res.data; // 获取联动选择框的数据 typeList.forEach((typeItem, index) => {
dispatch({
type: 'temp/fetchThirdType',
payload: typeItem.id,
callback: (res) => {
if(res.code == 200 && res.data.length){
typeList[index].list = res.data;
}
}
})
})
setTimeout(() => this.setState({ typeList }), 0)
}
}
});
} - 联动选择的第一个选择框的父级数据
let ParentTypeData = [
{
title: 'H5在线编辑',
value: 0,
key: 0,
},
{
title: '贺卡',
value: 1,
key: 1,
},
{
title: '海报',
value: 2,
key: 2,
},
{
title: '壁纸',
value: 3,
key: 3,
},
{
title: '全部',
value: 4,
key: 4,
},
]; - 处理获取到的联动选择第二个选择框的数据为TreeSelect需要的数据格式
let typeData = [];
const typeTree = (typeList, typeData) => {
if(typeList.length) {
for(let i=0; i<typeList.length; i++){
typeData[i] = {
title: typeList[i].kind,
value: typeList[i].id,
key: typeList[i].id
}
//二级分类
if(typeList[i].list){
typeData[i].children = [];
typeTree(typeList[i].list, typeData[i].children)
}
}
}
}
typeTree(typeList, typeData); 表单中嵌入TreeSelect选择器
<FormItem label="主题类别" {...formLayout}>
<TreeSelect
defaultValue={tempType == null ? 4 : tempTypeMap.indexOf(tempType)}
value={parentTypeId}
style={{display: `${editDisable ? 'none' : 'inline-block'}`, width: '47%', marginRight: '6%'}}
dropdownStyle={{ maxHeight: 400, overflow: 'auto' }}
treeData={ParentTypeData}
placeholder="请选择"
onChange={handleParentType}
/>
{form.getFieldDecorator('typeIds', {
rules: [{ type:"array", required: true, message: '请选择主题类别'}],
initialValue: detail.types && detail.types.length
? detail.types.map((type) => type.id)
: []
})(
<TreeSelect
multiple // 多选
style={{width: `${editDisable ? '100%' : '47%'}`}}
dropdownStyle={{ maxHeight: 400, overflow: 'auto' }}
treeData={typeData}
placeholder="请选择"
disabled={editDisable}
onChange={handleTypeChange}
/>
)}
</FormItem>
三、图片视频音频上传Upload
- 弹框表单中上传一张图片、一个音频
- 引入upload.js中封装的handImageUpload文件上传七牛云的方法
import { handleImageUpload } from '@/utils/upload'; // 预览文件时url前面需要加七牛云服务器前缀
// eg: 'http://fileserver.liuliu123.cn/'
import { setFileHost } from '@/utils/utils';upload.js
var qiniu = require('qiniu-js')
import axios from 'axios';
import configs from '@/utils/env'
import { message } from 'antd'; //七牛云上传，input， onchange事件
export function handleImageUpload(file, type, resName) {
// console.log(file,'handleImageUpload')
let suffix = file.type.split('/')[1]; return new Promise(function(resolve, reject){ if(!file) {
reject('file is undefined')
} function dataURItoBlob(base64Data) {
var byteString;
if(base64Data.split(',')[0].indexOf('base64') >= 0)
byteString = atob(base64Data.split(',')[1]);
else
byteString = unescape(base64Data.split(',')[1]);
var mimeString = base64Data.split(',')[0].split(':')[1].split(';')[0];
var ia = new Uint8Array(byteString.length);
for(var i = 0; i < byteString.length; i++) {
ia[i] = byteString.charCodeAt(i);
}
return new Blob([ia], {
type: mimeString
});
} function randomString(len) {
len = len || 32;
var $chars = 'ABCDEFGHJKMNPQRSTWXYZabcdefhijkmnprstwxyz2345678';
var maxPos = $chars.length;
var pwd = '';
for (let i = 0; i < len; i++) {
pwd += $chars.charAt(Math.floor(Math.random() * maxPos));
}
return pwd;
} var reader = new FileReader();
reader.readAsDataURL(file);
reader.onload = function(e) { var fileBlob = dataURItoBlob(e.target.result);
var key;
switch(type){
case 'audio':
key = 'sys/file/music/' + resName + '.' + suffix;
break;
case 'video':
key = 'liveWallPaper/' + resName + '.' + suffix;
break;
case 'tutorial': //教程文件
key = 'sys/tutorial/' + new Date().getTime() + randomString(5) + '.' + suffix;
break;
case 'tutorialVideo': //针对IOS富文本视频显示问题单独处理教程视频
key = 'yihezo/' + new Date().getTime() +randomString(5) + '.' + suffix;
break;
default:
key = 'user/h5/' + new Date().getTime() +randomString(5) + '.' + suffix;
} var putExtra = {
fname: file.name,
params: {},
mimeType: ["image/png", "image/jpeg", "image/jpg", "image/gif", "image/webp", "image/apng", "image/svg",
"audio/mp3", "audio/mp4", "audio/ogg", "audio/mpeg",
"video/mp4", "video/ogg", "video/webm"]
}; var config = {
useCdnDomain: true,
}; if(type == 'tutorialVideo' ){ //针对IOS富文本视频显示问题单独处理教程视频
axios.post(configs[process.env.API_ENV]['BG_SERVER']+'/file/qiniu/token/video', {
key: 'yihezo/' + new Date().getTime() +randomString(5) //入参：教程视频的key
}, {
headers: {
AuthorizationToken: localStorage.getItem('login_token')
}
}).then(res =>{
let {data} = res;
if(data.code == 200) {
let token = data.data.token;
let observable = qiniu.upload(fileBlob, key, token, putExtra, config) let subscription = observable.subscribe({next(res){
// console.log(res, 'loading')
}, error(res){
message.error('上传失败');
}, complete(res) {
resolve(res.key)
}})
//subscription.unsubscribe() // 上传取消 } else {
message.error('获取七牛云token失败');
}
}).catch(error => {
console.error(error)
reject(error)
}) }else{
axios.post(configs[process.env.API_ENV]['BG_SERVER']+'/file/qiniu/token', {}, {
headers: {
AuthorizationToken: localStorage.getItem('login_token')
}
}).then(res =>{
let {data} = res;
if(data.code == 200) {
let token = data.data.token;
let observable = qiniu.upload(fileBlob, key, token, putExtra, config) let subscription = observable.subscribe({next(res){
// console.log(res, 'loading')
}, error(res){
message.error('上传失败');
}, complete(res) {
resolve(res.key)
}})
//subscription.unsubscribe() // 上传取消 } else {
message.error('获取七牛云token失败');
}
}).catch(error => {
console.error(error)
reject(error)
})
} }
}) } - state中定义初始值
fileThumb: null, // 存储上传七牛云后返回的图片url
fileUri: null, // 存储上传七牛云后返回的文件url
fileVisible: false, // 控制预览文件的弹框是否visible
previewVisible: false,// 控制预览图片的弹框是否visible
previewImage: '', //预览要上传的图片和上传后的图片的url
previewFile: '' //预览要上传的图片和上传后的图片的url 弹框表单中Upload组件
// 上传按钮
const ImgUpButton = (
<div>
<Icon type="plus" />
<div className="ant-upload-text">Upload</div>
</div>
); const FileUpButton = (
<Button>
<Icon type="upload" /> Upload
</Button>
)<FormItem label="资源图片" {...this.formLayout}>
{
getFieldDecorator('thumb', {
rules: [{ required: true, message: '请上传图片' }],
initialValue: current.thumb ? [{ // 默认必须是数组
uid: '-1',
status: 'done',
name: current.resName,
url: `${setFileHost()+current.thumb}`,
thumbUrl: `${setFileHost()+current.thumb}`
}] : "" // 无值时必须是空串
})(
<div>
<Upload
accept="image/*" // 限制上传的文件类型
action={(file) => handleImageUpload(file, 'image').then(res => {
const newFileThumb = [];
newFileThumb.push(res);
this.setState({
fileThumb: newFileThumb,
})
})} // 上传七牛云后存储url
listType="picture-card"
fileList={imgList} // 显示的图片数组
onRemove={this.handleImgRemove}
onPreview={this.handleImgPreview}
onChange={this.handleImgChange}
>
{imgList.length >= 1 ? null : ImgUpButton}
</Upload>
<Modal visible={previewVisible} footer={null} onCancel={this.handleImgCancel}>
<img alt="资源图片" style={{ width: '100%' }} src={previewImage} />
</Modal>
</div>
)}
</FormItem>
<FormItem label="资源文件" extra={resNameError || resName == null ? <span style={{color:'#1890FF'}}>请先输入资源名称</span> : ''} {...this.formLayout}>
{getFieldDecorator('uri', {
rules: [{ required: true, message: '请上传文件' }],
initialValue: current.uri ? [{
uid: '-1',
status: 'done',
name: current.uri,
url: `${setFileHost()+current.uri}`
}] : ""
})(
<div>
<Upload
accept="audio/mp3, audio/mp4, audio/ogg, audio/mpeg"
disabled={ resNameError || resName == null ? true : false }
action={(file) => handleImageUpload(file, 'audio', resName).then(res => {
const newFileUri = [];
newFileUri.push(res);
this.setState({
fileUri: newFileUri
})
})}
fileList={fileList}
onRemove={this.handleFileRemove}
onPreview={this.handleFilePreview}
onChange={this.handleFileChange}
>
{fileList.length >= 1 ? null : FileUpButton}
</Upload>
<Modal visible={fileVisible} footer={null} onCancel={this.handleFileCancel} style={{textAlign: 'center'}}>
<audio src={previewFile} style={{ width: '80%' }} controls="controls" autoPlay="autoplay">
您的浏览器不支持 audio 标签。
</audio>
</Modal>
</div>
)}
</FormItem>// 上传图片 使用的方法
// 删除、预览弹框关闭、预览图片url和预览弹框打开，存储改变的图片url
handleImgRemove = () => {
this.setState({
imgList: [],
fileThumb: [''],
})
return true
} handleImgCancel = () => this.setState({ previewVisible: false }) handleImgPreview = (file) => {
this.setState({
previewImage: file.url || file.thumbUrl,
previewVisible: true,
});
} handleImgChange = ({ fileList }) => this.setState({ imgList: fileList }) // 上传文件 使用的方法
// 删除、预览弹框关闭、预览文件url和预览弹框打开，存储文件的图片url
handleFileRemove = () => {
this.setState({
fileList: [],
fileUri: [''],
})
return true
} handleFileCancel = () => this.setState({ fileVisible: false }) handleFilePreview = (file) => {
file.url ?
this.setState({
previewFile: file.url,
fileVisible: true,
}) :
message.error('请先保存');
} handleFileChange = ({ fileList }) => this.setState({ fileList })
弹框表单中上传多张图片
引入upload.js中封装的handImageUpload文件上传七牛云的方法
import { handleImageUpload } from '@/utils/upload';
import {setFileHost} from '@/utils/utils';- state中定义初始数据
// 上传多张轮播图（可上传视频）
imgList: [],
fileThumbs: [],
previewVisible: false,
previewImage: '', // 上传一张图片
introImgList: [],
introFileThumb: '',
introPreviewVisible: false,
introPreviewImage: '', showModal显示弹框的方法中: 处理获得的图片数组存入state
showEditModal = item => {
const { dispatch } = this.props; dispatch({
type: 'project/fetchDetail',
payload: {
goodsId: item.id
},
callback: (res) => {
if(res){
this.setState({
detail: res.data,
imgList: res.data.rotationChart && res.data.rotationChart.length
? this.initImgList(res.data) : "", // Upload显示图片本地存储的图片url数组
fileThumbs: res.data.rotationChart && res.data.rotationChart.length
? this.initFileThumbs(res.data) : "", // 上传七牛云后存储的用于传给后端的图片url数组
introImgList: res.data.introPic
? [{
uid: '-1',
status: 'done',
name: res.data.introPic,
url: `${setFileHost()+res.data.introPic}`,
thumbUrl: `${setFileHost()+res.data.introPic}`
}] : '',
introFileThumb: res.data.introPic ? res.data.introPic : '',
current: item,
addSubmit: false
}, () => {
this.setState({
visible: true
})
});
}
}
})
};弹框表单中嵌入Upload组件
const ImgUpButton = ( // 上传图片的按钮
<div>
<Icon type="plus" />
<div className="ant-upload-text">Upload</div>
</div>
);<FormItem label="产品图片" {...formLayout}>
{ getFieldDecorator('rotationChart', {
rules: [{ required: true, message: '请上传1-7张图片'}],
// 默认显示是图片数组，无值也是空数组
initialValue: current && detail && detail.rotationChart && detail.rotationChart.length
? initImgList(detail) : []
})(
<div>
<Upload
accept="image/*"
// action={(file) => handleImageUpload(file, 'image').then(res => {
// handleFileThumb(res, file, imgList)
// })}
listType="picture-card"
fileList={imgList}
onPreview={handleImgPreview}
onRemove={handleImgRemove}
// beforeUpload上传前的处理函数： 嵌套handleImageUpload方法 （上传一张图片或一个文件时，如果需要上传前判断文件类型、文件大小也是这么做）
// 1.包含handleFileThumb方法，代替action实现上传七牛云服务器后存储state；2.同时将新的图片数组imgArray存入本地imgList改变Upload组件显示的图片
beforeUpload={beforeUpload}
// onChange={handleImgChange}
>
{imgList.length >= 7 ? null : ImgUpButton}
</Upload>
<Modal visible={previewVisible} footer={null} onCancel={handleImgCancel} style={{textAlign: 'center'}}>
{ previewType == 'liveWallPaper' ?
<video src={previewImage} style={{ width: '50%' }} controls="controls" autoPlay="autoplay">
您的浏览器不支持 video 标签。
</video>
: <img alt="产品图片" style={{ width: '100%' }} src={previewImage} />}
</Modal>
</div>
)}
</FormItem>使用到的方法
initImgList = (item) => { // 处理Upload默认显示的数据
let defaultImgList = [];
item.rotationChart.forEach((imgListItem, index) => {
defaultImgList.push ({
uid: `${-1-index}`,
status: 'done',
name: item.name,
url: imgListItem.img ? `${setFileHost()+imgListItem.img}` : '',
thumbUrl: imgListItem.thumb ? `${setFileHost()+imgListItem.thumb}` : ''
})
})
return defaultImgList
}initFileThumbs = (item) => { // 不更改不上传新的图片时默认向后端传的图片url数组
let defaultFileThumbs = [];
item.rotationChart.forEach((fileThumb, index) => {
defaultFileThumbs[index] = fileThumb;
})
return defaultFileThumbs
}handleFileThumb = (res, file, imgList) => { // 更改fileThumbs数组
let { fileThumbs } = this.state;
fileThumbs[imgList.length-1] = {
img: res,
index: imgList.length-1,
type: file.type.split('/')[0],
thumb: res
};
this.setState({
fileThumbs
})
}// 关闭预览弹框
handleImgCancel = () => this.setState({ previewVisible: false }) // 显示预览弹框
handleImgPreview = (file) => {
this.setState({
previewImage: file.url || file.thumbUrl,
previewVisible: true,
});
} // 删除预览弹框
handleImgRemove = (file) => {
const { fileThumbs, imgList } = this.state;
let newList = [...imgList];
let newFileThumbs = [...fileThumbs];
newList.forEach((imgItem, index) => {
if(imgItem.uid == file.uid){
newList.splice(index, 1)
newFileThumbs.splice(index, 1)
}
})
this.setState({
imgList: newList,
fileThumbs: newFileThumbs
}, () => {
return true
})
}beforeUpload = (file) => {
let type = file.type.split('/')[0];
let name = file.name.split('.')[0]; // 判断文件类型 -- 如果是视频url直接存入imgList，存入fileThumb
if(type == 'video') {
let imgArray = [...this.state.imgList];
imgArray.push(file); handleImageUpload(file, 'video', name).then(res => {
this.setState({
imgList: imgArray
})
this.handleFileThumb(res, file, imgArray)
})
}else{
// 如果是图片，使用react-cropper插件相关设置进行裁剪处理
// 当打开同一张图片的时候清除上一次的缓存
if (this.refs.cropper) {
this.refs.cropper.reset();
} var reader = new FileReader();
const image = new Image();
//因为读取文件需要时间,所以要在回调函数中使用读取的结果
reader.readAsDataURL(file); //开始读取文件 reader.onload = (e) => {
image.src = reader.result;
image.onload = () => {
this.setState({
srcCropper: e.target.result, //cropper的图片路径
selectImgName: file.name, //文件名称
selectImgSize: (file.size / 1024 / 1024), //文件大小
selectImgSuffix: file.type.split("/")[1], //文件类型
editImageModalVisible: true, //打开控制裁剪弹窗的变量，为true即弹窗
})
if (this.refs.cropper) {
this.refs.cropper.replace(e.target.result);
}
}
}
return false;
}
}
不需要裁剪的使用beforeUpload判断文件大小的上传一张图片
<FormItem label="人物介绍图片" {...formLayout}>
{getFieldDecorator('introPic', {
initialValue: current && detail && detail.introPic
? [{
uid: '-1',
status: 'done',
name: detail.introPic,
url: `${setFileHost()+detail.introPic}`,
thumbUrl: `${setFileHost()+detail.introPic}`
}] : ''
})(
<div>
<Upload
accept="image/*"
// action={(file) => handleImageUpload(file, 'image').then(res => {
// handleIntroFileThumb(res)
// })}
listType="picture-card"
fileList={introImgList}
onPreview={handleIntroImgPreview}
onRemove={handleIntroImgRemove}
beforeUpload={beforeIntroUpload}
// onChange={handleIntroImgChange}
>
{introImgList.length >= 1 ? null : ImgUpButton}
</Upload>
<Modal visible={introPreviewVisible} footer={null} onCancel={handleIntroImgCancel} style={{textAlign: 'center'}}>
<img alt="人物介绍图片" style={{ width: '100%' }} src={introPreviewImage} />
</Modal>
</div>
)}
</FormItem>beforeIntroUpload = (file) => {
const isLt3M = file.size / 1024 / 1024 < 3;
if (!isLt3M) { //添加文件限制
message.error('文件大小不能超过3M');
return false;
}
// console.log('file', file) handleImageUpload(file, 'image').then(res => {
this.setState({ // 存入introImgList
introImgList: [{
uid: file.uid,
status: 'done',
name: file.name,
url: `${setFileHost()+res}`,
thumbUrl: `${setFileHost()+res}`
}]
})
this.handleIntroFileThumb(res) // 存入introFileThumbs
}) return true
}
转载请注明出处