Agregar vista previa de archivo usando antd
Importar {botón, carga, modal, alerta} desde "antd";
Importar React desde "react", { Children, cloneElement, isValidElement, useState, useEffect, useRef};
Importar axios desde "axios"
const Previewer = ({ url, onClose, isEditing, onEditSave }) = {
Return (
& ltmodal nombre de clase = { estilos . modal show } título = { ¿Estoy editando? "Edición de documento": "Vista previa del documento" } ancho visible = { 1200 } al cancelar = { una vez perdido } pie de página = {
¿está editando? [
& ltbutton key = " back " onClick = { onClose } & gt;
Regresar
& lt/Button & gt; ,
& ltbutton key = "enviar" type = "primary" onClick = { onEditSave } & gt;
Habilitar envío
& lt/Button & gt ;
]:null } & gt;
& ltiframe src = { URL } title = 'wps' ancho = ' 100% ' alto = ' 592 '/& gt ;
& lt/Modal & gt;
)
}
const mapDOMTree = (niños, emparejar niño)= & gt ;{
if (tipode niños === 'función ') devuelve nulo
return Children.map(children, (child)= & gt;{
if (! niño) devuelve nulo
if (matchChild(niño)) devuelve coincidencia niño(niño);
devuelve isValidElement(elemento hijo)? cloneElement(niño, niño.props, mapdom) árbol(niño . props . niños, coincide con niño)):niño
});
};
const base URL 2 = getUrl( '/ contract/API/xft-contract-procode/object/v 1/attachments/service/create-uri-by-id ');
Función CUpload({ onPreview, onEdit, onEditSave, Children, showDownloadIcon = verdadero, showRemoveIcon = verdadero, showEditButton = verdadero, showPreviewIcon = verdadero, ... resto }) {
const [visible, setVisible] = useState(false)
const [ url, setUrl] = useState()
const [edición, setEditing] =
useState(false)
const toggle =()= & gt; {
set visible(prev visible = & gt;! Vista previa)
}
const onPreviewFile = async(file)= & gt;{
const previerUrl = await onPreview? . (archivo)
setUrl(previeurl)
toggle()
}
const onEditFile = async(file)= & gt; {
const previerUrl = ¿esperar enEditar? . (archivo)
setUrl(previeurl)
setEditing(true)
alternar()
}
const handleUpload = archivos = & gt{
Regresar {
Nombre de archivo: archivos.nombre,
Tipo de archivo: archivos.tipo
}
}
const al cerrar =()= & gt;{
setEditing(false)
switch()
}
const descargado =(archivo)= & gt;{
axios.post(`${baseUrl2}?id=${file.id} `)
. Luego (res = & gt{
Establecer datos = RES . datos . datos;
Descargar (data.tempUri, data.fileName)
}
).catch((Error)= & gt{
Modal.showServeError(Error);
})
}
descarga constante = (url, nombre de archivo)= >{
//Para IE
//if(ventana . navigator . mssaveoropenblob){
//ventana .mssaveoropenblob(URL, nombre de archivo);
// }Otro {
const link = createelement(' a '); > p>
estilo de enlace . display = ' none ';
link.href = url
link.download =nombre de archivo;
/. / document.body.appendChild(enlace);
enlace clic();
//Ventana.
URL . revokeobjecturl(enlace . href);
enlace eliminar()
// }
};
const editar close = async()= >{
Esperar onEditSave()
onClose()
}
const baseUrl = getUrl (' contrato/API/xft-contract-procode/object/v 1/attachments ')
Devolver (
& lt& gt
& ltUpload< / p>
{...rest}
maxCount={1}
data={handleUpload}
accept = ' aplicación/vnd . formatos-documento de oficina. documento de procesamiento de textos, aplicación/msword '
action={baseUrl}
showUploadList={{
showDownloadIcon,
showRemoveIcon,
}}
onDownload={downloadd}
itemRender={(originNode, file)=>{
if (originNode.type!== 'div' ||! showPreviewIcon) return originNode
return mapDOMTree(originNode, (children)= & gt;{
if( Children . clave = = = 'descargar-eliminar'){
devolver elemento clonado(
niños,
accesorios para niños,
& lt& gt
& ltButton
type="text "
size="small "
onClick = {() = & gt; onPreviewFile(archivo)}
nombre de clase = " ant-upload-list-item-card-actions-BTN "
icono = { & ltEyeOutlined />}
title= "Vista previa del archivo"
/& gt;
showEditButton & amp& amp& ltbutton
type="text "
size="small "
onClick = {()= & gt; onEditFile(file)}
nombre de clase = " ant-upload-list-item-card-actions-BTN "
icono = { <edit esquematizado/& gt;}
título= "Editar archivo"
/& gt;}
{Children.Props.Children}
& lt/& gt;,
);
}
Devuelve falso
});
}}
& gt{Niños} & lt/Subir & gt;
Visible& amp& amp& ltPreviewerUR
L = { URL } onClose = { onClose } isEditing = { editando } onEditSave = { editar cerrar }/& gt;}
& lt/& gt;
); p>
};
Exportar botón de carga de función predeterminada (props) {
const { setValue, id, subming, formItemValue, setPrinstineValue, isEdit } = props
const [lista, lista de conjuntos]= useState([]);
edición constante ref = useRef(false);
console.log('props -' , props)
use effect(()= & gt;{
if (formItemValue?.fileId) {
Lista de colecciones ([{... formItemValue, nombre: formItemValue? fileId, estado: 'Completo' }])
}
}, [valor de formato])
const onChange =( información)= & gt; {
console.log('info -', información);
if (info.file.status === 'hecho') {
setValue({[id]:info . archivo . respuesta . datos . datos, [Ziming]: info.fileList[0].nombre }
}
if(info . archivo . estado = = = ' eliminado '){
setPrinstineValue(indefinido);
SetPrinstineValue(indefinido) )
}
setList(info.fileList)
}
const en vista previa =(e)= & gt;{
editingRef.current = falso
return http . get('/contract/API/xft-contract-procode/common/v 1/preview? adjuntarId=' + e.fileId). Entonces (res = & gtres.data.data.data). catch((Error)= & gt{
Modal.showServeError(Error);
})
}
const en edición =(e)= >{
editingRef.current = true
return http get(`/contract/API/xft-contract-procode/contract/v 1/ institución /archivo/edición en línea? adjuntarId=${props.formItemValue? fileId} & ampid=${props.data.__super.id} `). Luego (
res = & gtres.data.data.data).
catch((Error)= & gt{
Modal.showServeError(Error);
})
}
const onEditSave = ()= & gt;{
if (editingRef.current) {
editingRef.current = false
return http get(`/contract/API. /xft-contract-procode/common/v 1/complete/fileEdit/$ { props } `)
}
}
const uploadButton =. & ltButton & gtupload
return (
& ltcup
onPreview={onPreview}
onEdit={ onEdit}
onEditSave={onEditSave}
onChange={onChange}
fileList={list}
showRemoveIcon={isEdit}
showEditButton={isEdit}
& gt
{ list.length & gt= 1 ?null:botón de carga}
& lt/taza de carga & gt ；
)
}