提交 4d2c35a0 作者: 龚洪江

修复:论坛上传视频

上级 4c8b2052
...@@ -79,6 +79,10 @@ export default { ...@@ -79,6 +79,10 @@ export default {
imgOss: () => { imgOss: () => {
return config.baseUrl + '/pms/upload/imgOss'; return config.baseUrl + '/pms/upload/imgOss';
}, },
//文件上传地址
fileUpload: () => {
return config.baseUrl + '/pms/upload/breakpoint';
},
//宣传中心 //宣传中心
listBannerImg: ( listBannerImg: (
moduleCode: string, moduleCode: string,
......
...@@ -44,7 +44,6 @@ export const Uploader: React.FC<PropsType> = (props) => { ...@@ -44,7 +44,6 @@ export const Uploader: React.FC<PropsType> = (props) => {
listType, listType,
fileList, fileList,
beforeUpload: (res) => { beforeUpload: (res) => {
console.log('上传文件-->', res);
const isType = fileType?.includes(res.type); const isType = fileType?.includes(res.type);
const isSize = res.size / 1024 / 1024 < (fileSize || 2); const isSize = res.size / 1024 / 1024 < (fileSize || 2);
const isLength = fileList.length < (fileLength || 1); const isLength = fileList.length < (fileLength || 1);
......
...@@ -40,6 +40,7 @@ export interface CommentParams { ...@@ -40,6 +40,7 @@ export interface CommentParams {
content: string; //评论内容 content: string; //评论内容
dynamicId: number; //动态id dynamicId: number; //动态id
parentId?: number; //父级评论 parentId?: number; //父级评论
rootPath: string;
} }
export interface ByDynamicResp { export interface ByDynamicResp {
......
.mediaContent{
display: flex;
align-items: center;
.mediaItemWrap{
position: relative;
.mediaItem{
margin-right: 10px;
margin-bottom: 10px;
}
.mediaDelete{
position: absolute;
right: 0;
top: 0;
transform: translate(0%,-50%);
}
}
}
import { PlusOutlined } from '@ant-design/icons';
import { Form, Input, Modal, Upload, Image, Button, Row, Col } from 'antd'; import { Form, Input, Modal, Upload, Image, Button, Row, Col } from 'antd';
import type { RcFile, UploadProps } from 'antd/es/upload'; import type { UploadProps } from 'antd/es/upload';
import type { UploadFile } from 'antd/es/upload/interface'; import type { UploadFile } from 'antd/es/upload/interface';
import { useContext, useEffect, useState } from 'react'; import { useContext, useEffect, useState } from 'react';
import gApi from '~/api'; import gApi from '~/api';
...@@ -8,7 +7,9 @@ import NImage from 'next/image'; ...@@ -8,7 +7,9 @@ import NImage from 'next/image';
import api from './api'; import api from './api';
import { useGeolocation } from '~/lib/hooks'; import { useGeolocation } from '~/lib/hooks';
import { UserContext } from '~/lib/userProvider'; import { UserContext } from '~/lib/userProvider';
import { useToken } from 'antd/es/theme/internal'; import uploadImg from '~/assets/images/upload.png';
import deleteIcon from '~/assets/images/delete-icon.png';
import styles from './index.module.scss';
type Props = { type Props = {
open: boolean; open: boolean;
...@@ -25,10 +26,6 @@ const normFile = (e: any) => { ...@@ -25,10 +26,6 @@ const normFile = (e: any) => {
}; };
export default function PublishMessage(props: Props) { export default function PublishMessage(props: Props) {
const [confirmLoading, setConfirmLoading] = useState(false);
const [previewOpen, setPreviewOpen] = useState(false);
const [previewImage, setPreviewImage] = useState('');
const [previewTitle, setPreviewTitle] = useState('');
const [fileList, setFileList] = useState<UploadFile[]>([]); const [fileList, setFileList] = useState<UploadFile[]>([]);
const [showLoading, setShowLoad] = useState(false); const [showLoading, setShowLoad] = useState(false);
const [form] = Form.useForm(); const [form] = Form.useForm();
...@@ -39,22 +36,23 @@ export default function PublishMessage(props: Props) { ...@@ -39,22 +36,23 @@ export default function PublishMessage(props: Props) {
useEffect(() => { useEffect(() => {
setToken(window.localStorage.getItem('token') || ''); setToken(window.localStorage.getItem('token') || '');
}, []); }, []);
//预览关闭
const handlePreviewCancel = () => setPreviewOpen(false);
//图片预览
const handlePreview = async (file: UploadFile) => {
if (file.url) {
setPreviewImage(file.url);
setPreviewOpen(true);
setPreviewTitle(file.name || file.url!.substring(file.url!.lastIndexOf('/') + 1));
}
};
//图片上传 //图片上传
const handleChange: UploadProps['onChange'] = (info) => { const handleChange: UploadProps['onChange'] = (info) => {
console.log('uploadChange', info); const isType = [
'video/mp4',
'video/avi',
'video/wmv',
'video/rmvb',
'image/png',
'image/jpeg',
'image/jpg',
'image/gif',
'image/bmp',
].includes(info.file.type as string);
if (!isType) {
window.messageApi.error('上传文件类型错误');
return;
}
if (info.file.status === 'uploading') { if (info.file.status === 'uploading') {
let find = fileList.find((item) => { let find = fileList.find((item) => {
return item.uid === info.file.uid; return item.uid === info.file.uid;
...@@ -64,11 +62,10 @@ export default function PublishMessage(props: Props) { ...@@ -64,11 +62,10 @@ export default function PublishMessage(props: Props) {
} }
return; return;
} else if (info.file.status === 'done') { } else if (info.file.status === 'done') {
// Get this url from response in real world.
if (info.file.response.code === '200' && info.file.response.result) { if (info.file.response.code === '200' && info.file.response.result) {
let fileList1 = fileList.map((item) => { let fileList1 = fileList.map((item) => {
if (item.uid === info.file.uid) { if (item.uid === info.file.uid) {
info.file.url = info.file.response.result?.[0]; info.file.url = info.file.response.result;
return info.file; return info.file;
} }
return item; return item;
...@@ -85,10 +82,13 @@ export default function PublishMessage(props: Props) { ...@@ -85,10 +82,13 @@ export default function PublishMessage(props: Props) {
setFileList([...info.fileList]); setFileList([...info.fileList]);
} }
}; };
//删除媒体
const deleteMedia = (file: UploadFile) => {
let list = fileList.filter((v) => v.uid !== file.uid);
setFileList(list || []);
};
//提交 //提交
const onFinish = (values: any) => { const onFinish = (values: any) => {
console.log(values);
setShowLoad(true); setShowLoad(true);
if (userInfo) { if (userInfo) {
...@@ -98,9 +98,10 @@ export default function PublishMessage(props: Props) { ...@@ -98,9 +98,10 @@ export default function PublishMessage(props: Props) {
lon: position?.position?.lng, //经度 lon: position?.position?.lng, //经度
description: values.description, //描述 description: values.description, //描述
userId: userInfo.id, //用户id userId: userInfo.id, //用户id
mediaVO: fileList mediaVO: fileList.map((item) => ({
.filter((item) => item.url) type: item.type?.includes('image') ? 0 : 1,
.map((item) => ({ type: 0, url: item.url as string })), url: item.url as string,
})),
}) })
.then((res) => { .then((res) => {
setShowLoad(false); setShowLoad(false);
...@@ -108,23 +109,26 @@ export default function PublishMessage(props: Props) { ...@@ -108,23 +109,26 @@ export default function PublishMessage(props: Props) {
window.messageApi.success('发布成功'); window.messageApi.success('发布成功');
props.onCancel(); props.onCancel();
props.onOk && props.onOk(); props.onOk && props.onOk();
setTimeout(() => { setTimeout(() => {
form.resetFields(['title', 'description']); form.resetFields();
setFileList([]); setFileList([]);
}, 500); }, 500);
} }
}); });
} }
}; };
//取消
const handleCancel = () => {
form.resetFields();
setFileList([]);
props.onCancel();
};
return ( return (
<Modal <Modal
title='' title=''
open={props.open} open={props.open}
onCancel={props.onCancel} onCancel={handleCancel}
width={500} width={500}
confirmLoading={confirmLoading}
footer={null} footer={null}
okButtonProps={{ style: { height: 37, padding: '0 32px', fontSize: 16 } }} okButtonProps={{ style: { height: 37, padding: '0 32px', fontSize: 16 } }}
cancelButtonProps={{ style: { display: 'none' } }} cancelButtonProps={{ style: { display: 'none' } }}
...@@ -140,34 +144,59 @@ export default function PublishMessage(props: Props) { ...@@ -140,34 +144,59 @@ export default function PublishMessage(props: Props) {
style={{ height: 120, resize: 'none' }} style={{ height: 120, resize: 'none' }}
></Input.TextArea> ></Input.TextArea>
</Form.Item> </Form.Item>
<Row style={{ marginTop: '10px' }}>
{fileList.length ? (
<Col>
<div className={styles.mediaContent}>
{fileList.map((v, index: number) => (
<div className={styles.mediaItemWrap} key={index}>
<div className={styles.mediaItem}>
{v.type?.includes('image') ? (
<Image
src={v.url}
width={100}
height={100}
alt=''
style={{ verticalAlign: 'top' }}
/>
) : (
<video src={v.url} style={{ width: '100px', height: '100px' }} controls />
)}
</div>
<NImage
src={deleteIcon}
alt=''
className={styles.mediaDelete}
width={20}
height={20}
onClick={() => deleteMedia(v)}
/>
</div>
))}
</div>
</Col>
) : (
''
)}
<Col>
<Form.Item valuePropName='picture' getValueFromEvent={normFile}> <Form.Item valuePropName='picture' getValueFromEvent={normFile}>
<Upload <Upload
name='uploadFile' name='uploadFile'
action={gApi.imgOss} action={gApi.fileUpload}
listType='picture-card' listType='picture-card'
fileList={fileList}
onPreview={handlePreview}
onChange={handleChange} onChange={handleChange}
showUploadList={false}
maxCount={1} maxCount={1}
headers={{ token: token }} headers={{ token: token }}
> >
{fileList.length >= 8 ? null : ( {fileList.length >= 8 ? null : (
<div> <NImage src={uploadImg} alt='' width={100} height={100} />
<PlusOutlined />
<div style={{ marginTop: 8 }}>Upload</div>
</div>
)} )}
</Upload> </Upload>
<Modal
open={previewOpen}
title={previewTitle}
footer={null}
onCancel={handlePreviewCancel}
bodyStyle={{ textAlign: 'center' }}
>
<Image alt='example' src={previewImage} preview={false} />
</Modal>
</Form.Item> </Form.Item>
</Col>
</Row>
<Row justify='space-between' align='middle'> <Row justify='space-between' align='middle'>
<Col> <Col>
<NImage <NImage
......
...@@ -102,6 +102,7 @@ export default function Forum() { ...@@ -102,6 +102,7 @@ export default function Forum() {
.comment({ .comment({
content: values.content, content: values.content,
dynamicId: item.id, dynamicId: item.id,
rootPath: item.id.toString(),
}) })
.then((res) => { .then((res) => {
if (res.code === '200') { if (res.code === '200') {
......
...@@ -24,12 +24,11 @@ interface PropsBox { ...@@ -24,12 +24,11 @@ interface PropsBox {
export default function OrderForGoods(props: PropsBox) { export default function OrderForGoods(props: PropsBox) {
const { setIsorderForGoods, shopDetail, detailData, wareSkuList, discount, mallDetail } = props; const { setIsorderForGoods, shopDetail, detailData, wareSkuList, discount, mallDetail } = props;
const [value, setValue] = useState(1); const [value, setValue] = useState(0);
const [areaValue, setAreaValue] = useState<string>(); const [areaValue, setAreaValue] = useState<string>();
const [list, setList] = useState<Array<UserAddress> | null>(); const [list, setList] = useState<Array<UserAddress> | null>();
const onChange = (e: RadioChangeEvent) => { const onChange = (e: RadioChangeEvent) => {
console.log('radio checked', e.target.value);
setValue(e.target.value); setValue(e.target.value);
}; };
const onChangeValue = (index: number) => { const onChangeValue = (index: number) => {
...@@ -37,7 +36,7 @@ export default function OrderForGoods(props: PropsBox) { ...@@ -37,7 +36,7 @@ export default function OrderForGoods(props: PropsBox) {
}; };
const detailSumbit = () => { const detailSumbit = () => {
if (!list?.length) return message.warning('暂无地址信息,请前往云享飞添加地址'); if (!list?.length) return message.warning('暂无地址信息,请前往云享飞添加地址');
if (list?.length && !value && value !== 0) return message.warning('请选择地址'); if (!value) return message.warning('请选择地址');
if (detailData && list && mallDetail) { if (detailData && list && mallDetail) {
const pushList = { const pushList = {
buyNum: mallDetail.buyNum, buyNum: mallDetail.buyNum,
......
Markdown 格式
0%
您添加了 0 到此讨论。请谨慎行事。
请先完成此评论的编辑!
注册 或者 后发表评论