preview和response的区别

chrome F12开发者工具之preview 与response的区别

在Preview(预览功能)中，控制台会把发送过来的json数据自动转换成javascript的对象格式,而且可以层层展开，方便前端工程师遍历调用。

Response的意思是:(Raw response data)即:原始-响应-数据

Perview的意思是(response preview)：响应-预览 (响应资源进行了格式处理的内容)

Response的意思是:(Raw response data)：原始-响应-的数据(响应资源未进行格式处理的内容)

常见问题

import styles from './style.scss'// 自定义样式，文件名称不可修改

import { Button, Upload, Modal, Alert } from 'antd'

import React, { Children, cloneElement, isValidElement, useState, useEffect, useRef } from 'react'

import axios from 'axios'

const Previewer = ({ url, onClose, isEditing, onEditSave }) =>{

    return (

        <Modal className={styles.modalshow} title={isEditing ? "文档编辑" : "文档预览"} visible width={1200} onCancel={onClose} footer={

            isEditing ? [

                <Button key="back" onClick={onClose}>

                    返回

                </Button>,

                <Button key="submit" type="primary" onClick={onEditSave}>

                    提交

                </Button >

            ] : null} >

            <iframe src={url} title='wps' width='100%' height='592' />

        </Modal >

    )

}

const mapDOMTree = (children, matchChild) =>{

    if (typeof children === 'function') return null

    return Children.map(children, (child) =>{

        if (!child) return null

        if (matchChild(child)) return matchChild(child)

        return isValidElement(child) ? cloneElement(child, child.props, mapDOMTree(child.props.children, matchChild)) : child

    })

}

const baseUrl2 = getUrl('/contract/api/xft-contract-procode/object/v1/attachments/service/create-uri-by-id')

function CUpload({ onPreview, onEdit, onEditSave, children, showDownloadIcon = true, showRemoveIcon = true, showEditButton = true, showPreviewIcon = true, ...rest }) {

    const [visible, setVisible] = useState(false)

    const [url, setUrl] = useState()

    const [editing, setEditing] = useState(false)

    const toggle = () =>{

        setVisible(prevVisible =>!prevVisible)

    }

    const onPreviewFile = async (file) =>{

        const previerUrl = await onPreview?.(file)

        setUrl(previerUrl)

        toggle()

    }

    const onEditFile = async (file) =>{

        const previerUrl = await onEdit?.(file)

        setUrl(previerUrl)

        setEditing(true)

        toggle()

    }

    const handleUpload = files =>{

        return {

            fileName: files.name,

            fileType: files.type

        }

    }

    const onClose = () =>{

        setEditing(false)

        toggle()

    }

    const downloadd = (file) =>{

        axios.post(`${baseUrl2}?id=${file.id} `)

            .then(res =>{

                let data = res.data.data

                download(data.tempUri, data.fileName)

            }

            ).catch((error) =>{

                Modal.showServeError(error)

            })

    }

    const download = (url, fileName) =>{

        // for IE

        // if (window.navigator.msSaveOrOpenBlob) {

        //     window.navigator.msSaveOrOpenBlob(url, fileName)

        // } else {

        const link = document.createElement('a')

        link.style.display = 'none'

        link.href = url

        link.download = fileName

        // document.body.appendChild(link)

        link.click()

        // window.URL.revokeObjectURL(link.href)

        link.remove()

        // }

    }

    const editClose = async () =>{

        await onEditSave()

        onClose()

    }

    const baseUrl = getUrl('contract/api/xft-contract-procode/object/v1/attachments')

    return (

        <>

            <Upload

                {...rest}

                maxCount={1}

                data={handleUpload}

                accept='application/vnd.openxmlformats-officedocument.wordprocessingml.document,application/msword'

                action={baseUrl}

                showUploadList={{

                    showDownloadIcon,

                    showRemoveIcon,

                }}

                onDownload={downloadd}

                itemRender={(originNode, file) =>{

                    if (originNode.type !== 'div' || !showPreviewIcon) return originNode

                    return mapDOMTree(originNode, (children) =>{

                        if (children.key === 'download-delete') {

                            return cloneElement(

                                children,

                                children.props,

                                <>

                                    <Button

                                        type="text"

                                        size="small"

                                        onClick={() =>onPreviewFile(file)}

                                        className="ant-upload-list-item-card-actions-btn"

                                        icon={<EyeOutlined />}

                                        title="Preview File"

                                    />

                                    {showEditButton &&<Button

                                        type="text"

                                        size="small"

                                        onClick={() =>onEditFile(file)}

                                        className="ant-upload-list-item-card-actions-btn"

                                        icon={<EditOutlined />}

                                        title="Edit File"

                                    />}

                                    {children.props.children}

                                </>,

                            )

                        }

                        return false

                    })

                }}

            >{children}</Upload>

            {visible &&<Previewer url={url} onClose={onClose} isEditing={editing} onEditSave={editClose} />}

        </>

    )

}

export default function UploadButton(props) {

    const { setValue, id, mingzi, formItemValue, setPrinstineValue, isEdit } = props

    const [list, setList] = useState([])

    const editingRef = useRef(false)

    console.log('props--', props)

    useEffect(() =>{

        if (formItemValue?.fileId) {

            setList([{ ...formItemValue, name: formItemValue?.fileName, id: formItemValue?.fileId, status: 'done' }])

        }

    }, [formItemValue])

    const onChange = (info) =>{

        console.log('info---', info)

        if (info.file.status === 'done') {

            setValue({ [id]: info.file.response.data.data, [mingzi]: info.fileList[0].name })

        }

        if (info.file.status === 'removed') {

            setPrinstineValue(undefined)

            setValue(undefined)

        }

        setList(info.fileList)

    }

    const onPreview = (e) =>{

        editingRef.current = false

        return Http.get('/contract/api/xft-contract-procode/common/v1/preview?attachId=' + e.fileId).then(res =>res.data.data.data).catch((error) =>{

            Modal.showServeError(error)

        })

    }

    const onEdit = (e) =>{

        editingRef.current = true

        return Http.get(`/contract/api/xft-contract-procode/contract/v1/institution/file/onlineEdit?attachId=${props.formItemValue?.fileId}&id=${props.data.__super.id}`).then(

            res =>res.data.data.data).catch((error) =>{

                Modal.showServeError(error)

            })

    }

    const onEditSave = () =>{

        if (editingRef.current) {

            editingRef.current = false

            return Http.get(`/contract/api/xft-contract-procode/common/v1/complete/fileEdit/${props.formItemValue?.fileId}`)

        }

    }

    const uploadButton = <Button>上传</Button>

    return (

        <CUpload

            onPreview={onPreview}

            onEdit={onEdit}

            onEditSave={onEditSave}

            onChange={onChange}

            fileList={list}

            showRemoveIcon={isEdit}

            showEditButton={isEdit}

        >

            {list.length >= 1 ? null : uploadButton}

        </CUpload>

    )

}

---