-
antd,input组件如何使用validator、dependencies自定义规则解决输入框中密码两次输入不一致的警告提示问题。
<Form.Item required name="password" validateTrigger='onBlur' rules={[{ required: true, message: '请输入新密码' },{ // validator:(rules,value,callback)=> // {this.handleCheckPwd(rules,value,callback)} }]} > <Input size="large" type="password" ref='password' placeholder="请输入新密码" prefix={<LockOutlined />} style={{marginTop:'20px'}}/> </Form.Item> <Form.Item required name="cfmloginpass" validateTrigger='onBlur' dependencies={['password']} rules={[ { required: true, message: '请再次输入新密码' }, ({ getFieldValue }) => ({ validator(rule, value) { if (!value || getFieldValue('password') === value) { return Promise.resolve(); } return Promise.reject('两次输入的密码不一致，请检查后重新输入'); }, }), ]} >
2.富文本编辑器
import E from 'wangeditor';
this.state={
editor: new E('#editor')
info:{}
}
componentDidMount(){
let editor = this.state.editor;
editor.customConfig.menus = [
'head', // 标题
'bold', // 粗体
'fontSize', // 字号
'fontName', // 字体
'italic', // 斜体
'underline', // 下划线
'strikeThrough', // 删除线
'foreColor', // 文字颜色
'backColor', // 背景颜色
'link', // 插入链接
// 'list', // 列表
'justify', // 对齐方式
// 'quote', // 引用
// 'emoticon', // 表情
'image', // 插入图片
// 'table', // 表格
// 'video', // 插入视频
// 'code', // 插入代码
'undo', // 撤销
'redo' // 重复
]
editor.customConfig.uploadImgServer = "http://goldenaward.duocaishenghuo.cn/v1/manager/uploadPic";
editor.customConfig.uploadFileName = 'context_picture';
editor.customConfig.uploadImgMaxSize = 50 * 1024 * 1024;
editor.customConfig.uploadImgMaxLength = 1;
let token = window.localStorage.getItem("token")
editor.customConfig.uploadImgHeaders = {
'Authorization': 'Bearer '+token
}
editor.create();
this.getData()
}
getData(){
post(' ')
.then(res => {
this.setState({
info:res
},()=>{
this.addformRef.current.setFieldsValue({
title:this.state.info.tittle
})
this.state.editor.txt.html(decodeURI(this.state.info.describe))
this.state.editor.$textElem.attr('contenteditable',false)
}
)
}).catch(res=> {
console.log(res)
})
}
关于富文本编辑器->后端->前端的传值问题，富文本编辑器->后端传值时，若采用
let html = this.state.editor.txt.html().toString()
encodeURI(html)
则后端->前端时，在前端收到的值需要decodeURI解码，同时由于富文本编辑器传的值为带标签的代码，所以需要使用dangerouslySetInnerHTML方法，若想将标签去掉则需要使用正则.replace(/<[^>]+>/g, "")
dangerouslySetInnerHTML={{__html: decodeURI(obj.details).replace(/<[^>]+>/g, "")}}
3.关于antd的文件上传upload功能
1.upload使用
const pdfprops = {
name: 'file',
headers: {
authorization: 'authorization-text',
},
beforeUpload: file => {
console.log('yes')
-------------------------return false：不上传 只展示------------------
return false;
},
onChange: info => {
-------------------------上传后的文件存在info中------------------------
let file = info.file
-------------------------判断上传的文件类型是否为所需------------------
const ispdf = file.type === 'application/pdf';
if (!ispdf) {
message.error('请上传pdf文件!');
} else {
console.log('info',info)
let fileList = [...info.fileList];
------------------fileList.slice：控制上传的文件个数--------------------
fileList = fileList.slice(-1);
fileList = fileList.map(file => {
if (file.response) {
file.url = file.response.url;
}
return file;
});
------------------将上传的文件存在state中设好的空数组里------------------
this.setState({ pdffileList:fileList });
}
return false
},
};
-------------{...pdfprops}：实现设置的pdfprops内的功能-------------
-------------fileList：已经上传的文件列表，有改变时调用onchange---------
<Upload {...pdfprops} fileList={this.state.pdffileList}>
{pdfUrl ? <img src={pdfUrl} style={{ width: '100%' }} alt="avatar" /> : <>
{oldpdfurl ? <img src={urlHOST + oldpdfurl} style={{ width: '100%' }} alt="avatar" /> :
<Button>
<UploadOutlined /> 选择文件
</Button>
}
</>}
</Upload>
2.将文件传给后端
onCreate = async () => {
const { pdffileList,imagefileList,oldimageurl,oldpdfurl } = this.state;
if (imagefileList.length == 0&&oldimageurl=='') {
message.error('未选择图片')
return
}
if (pdffileList.length == 0&&oldpdfurl=='') {
message.error('未上传项目报告书PDF格式文档')
return
}
try {
const value = await this.addformRef.current.validateFields();
const { wordfileList,pdffileList,jpgfileList,imagefileList } = this.state;
const formData = new FormData();
if (imagefileList.length > 0) {
console.log("照片",imagefileList)
--------------imagefileList为数组，文件存在了其下的originFileObj中-------
imagefileList.forEach(file => {
console.log("照片文件",file.originFileObj)
formData.append('pictures[]', file.originFileObj);
});
} else {
------------------编辑情况下 未修改img传原url-------------------------
formData.append('picture_urls', oldimageurl)
}
if (pdffileList.length > 0) {
pdffileList.forEach(file => {
formData.append('project_report_pdf', file.originFileObj);
});
} else {
---------------------编辑情况下 未修改pdf传原url-----------------------
formData.append('project_report_url', oldpdfurl)
}
---------------------form表单中的其他非文件数据-------------------
formData.append('case_name', value.casename)
formData.append('category', this.state.category*1)
let config = {
headers: {
'Content-Type': 'multipart/form-data'
}
}
----------------------------当id存在时即为修改------------------------
if (this.state.id) {
let id = this.props.match.params.id * 1
formData.append('news_id', id)
post('/player/upload', formData, config).then(res => {
message.success('修改成功')
}).catch(res => {
})
} else {
----------------------------当id不存在时即为添加------------------------
post('/player/upload', formData, config).then(res => {
message.success('添加成功')
console.log(res)
}).catch(res => {
})
}
}catch (errorInfo) {
console.log('Failed:', errorInfo);
}
}
