react-前端excel 文件/PDF文件导入 --导出、照片上传、mp4格式视频下载

需要了解，new FormData() --上传时，将内容转为文件流

FormData提供一种表示表单数据的键值对的构造方式，实现表单数据的序列化，从而减少表单元素的拼接，提高工作效率

new FileReader()--base64压缩，目前不了解

一、excel文件导出

三种导出: 一种是纯粹前端导出；两种后端导出: 分为后端给地址导出，还有就是文件流的形式导出，最好是后端导出，不会卡，前端导出数据量一大很卡

Blod：blob是存放二进制大对象的容器,包括large object ；创建一个bold对象

后端返回二进制数据流，生成Excel ：

① 点击模板获取--导出，弹框进行确认，点击确认

② 调接口，获取结果，接口的reaponseType: ' blob'

③ 调用window的url方法，创建a标签，点击a = url, 设置点击下载

-- 导出文件为 pdf 时，修改 type: 'application/pdf;chartset=UTF-8'

  // 模板获取const getTemplate = async () => {const res = await getStuTemplate()// const blob = new Blob(['\ufeff' + res], { type: 'application/vnd.ms-excel' })// 调用window的url方法const url = window.URL.createObjectURL(res)// 通过创建a标签实现const link = document.createElement('a')link.href = url// 命名// link.download = res?.headers['content-disposition'].split(';')[1].split('=')[1] || '模板'link.download = decodeURI('考生信息')document.body.appendChild(link)// 下载文件link.click()// 释放内存 document.body.removeChild(link)}

// 考生信息--导出excel模板
export async function getStuTemplate(params?: any) {return request(`/${Proxy_Api}/entrantManage/exportExcel`, {method: 'GET',responseType: 'blob',params,})
}

// 导出 -- PDFconst getTemplate = async () => {const res = await getStuTemplate({ code })// 创建blob对象，解析流数据const blob = new Blob([res], { type: 'application/pdf;chartset=UTF-8'})// 调用window的url方法，根据解析后的blob对象创建URL 对象const url = window.URL.createObjectURL(blob)// 通过创建a标签实现const link = document.createElement('a')link.href = url// 命名// link.download = res?.headers['content-disposition'].split(';')[1].split('=')[1] || '模板'link.download = decodeURI('请假统计')document.body.appendChild(link)// 下载文件link.click()// 释放内存 document.body.removeChild(link)}

二、excel文件导入--上传

① 用Dragger组件进行上传，点击上传后，选取文件

② 设置组件的props，用beforeUpload钩子函数拦截文件，不设置action地址，取消自动上传

③ 通过beforeUpload，拦截默认上传，对上传文件进行处理，可以判断文件格式

④ 点击modal弹框的确认后，创建new FormData()，使用append,发送fetch请求，返回数据需要转化为json格式

① 设置组件<Modal destroyOnClose={true} title="数据导入" visible={isUploadOpen} onOk={handleOkUpload} onCancel={handleCancelUpload} width={550}><Dragger {...props} style={{ marginBottom: 20, marginTop: 20 }}><p className="ant-upload-drag-icon"><InboxOutlined /></p><p className="ant-upload-text">点击或将文件拖拽到这里上传</p><p className="ant-upload-hint">当前仅支持扩展名：.xls/.xlsx</p></Dragger><p style={{ fontSize: 12, color: '#00000073', marginTop: 10 }}>注：若在此之前已经上传过数据而此次上传存在覆盖操作，则相关分组信息需要重新导入</p></Modal>// dragger组件

② 设置组件props// 设置文件变量const [oneFile, setOneFile] = useState<any>();const props: UploadProps = {maxCount: 1, //最大数量multiple: false,  //是否支持多选onRemove: (file) => {  //删除setOneFile(null)},// beforeUpload 拦截默认上传，回调参数就是file文件// 可以对文件类型进行判断beforeUpload: (file) => {const fileName = file.name.substring(file.name.lastIndexOf('.') + 1, file.name.length)const fileType = fileName == 'xls' || fileName == 'xlsx'if (!fileType) {message.error('上传失败，请上传xls/xlsx格式的文件')} else {setOneFile(file)}return false;},};

③ 上传文件/**点击上传 */const handleOkUpload = () => {const formData = new FormData();formData.append('file', oneFile as RcFile);fetch(`${Proxy_Api}/entrantManage/importExcel/${code}`, {method: 'POST',body: formData,}).then((res) => {return res.json()}).then((res) => {if (res?.success) {message.success('导入成功');setOneFile(null)setIsUploadOpen(false)} else {message.error(res.desc)}}).catch(() => {message.error('导入失败');})};

三、照片上传

① 上传props，不设置action,设置beforeUpload，拦截上传文件

② 对上传文件进行判断，格式，大小，每次上传前，修改变量 oneFile ,用于最后提交

③ 设置props的 onChange，改变上传文件时，调用base64方法，修改imageUrl变量，用于在页面显示当前上传图片

④ 提交，new FormData 来转为文件流，使用append,发送fetch请求，返回数据需要转化为json格式

① 设置组件const [imageUrl, setImageUrl] = useState<any>();<Form.Item label="考点图片" name="photo"><Upload  {...props} >{imageUrl ? // 上传图片后，图片反显，图片+上传按钮[<img src={imageUrl} alt="avatar" style={{ height: '60px', marginRight: 10 }} />, <Button icon={<UploadOutlined />}>上传文件</Button>] : <Button icon={<UploadOutlined />}>上传文件</Button>}</Upload></Form.Item>

② 设置上传props// 上传的props
const props: UploadProps = {maxCount: 1,multiple: false,name: "avatar",action: "#",listType: "picture",className: "avatar-uploader",showUploadList: false,onRemove: (file) => {setOneFile(null)},/**上传文件之前的钩子，参数为上传的文件,可设置文件格式和大小，若返回false停止上传 */beforeUpload: beforeUpload,onChange: handleChange,};

③ 提交上传文件const [oneFile, setOneFile] = useState<any>(); //文件变量
/**上传文件之前的钩子，参数为上传的文件,可设置文件格式和大小，若返回false停止上传 */const beforeUpload = (file: RcFile) => {const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png';if (!isJpgOrPng) {message.error('请上传 JPG/PNG 格式的图片!');}const isLt2M = file.size / 1024 / 1024 < 2;if (!isLt2M) {message.error('图片需要小于 2MB!');}setOneFile(file)return isJpgOrPng && isLt2M;// 返回false ,不请求，但是获取不到显示图片，用action:"#",替换不请求// return false;};

  ④ base64设置反显图片// 上传判断，是否显示图片const getBase64 = (img: RcFile, callback: (url: string) => void) => {const reader = new FileReader();reader.addEventListener('load', () => callback(reader.result as string));// 方法可以将读取到的文件编码成DataURL ，可以将资料(例如图片、excel文件)内嵌在网页之中，不用放到外部文件reader.readAsDataURL(img);};

  ⑤ onChange--上传文件改变时的回调 */const handleChange: UploadProps['onChange'] = (info: UploadChangeParam<UploadFile>) => {if (info.file.status === 'uploading') {return;}if (info.file.status === 'done') {getBase64(info.file.originFileObj as RcFile, (url) => {setImageUrl(url);});}};

⑥ 提交/**新增、修改--确认 */const handleOk = () => {addForm.validateFields().then(async (values) => {if (imageUrl) {const { address, examYear, code, name } = valueslet newForm = new FormData()newForm.append("address", address);newForm.append("examYear", examYear);newForm.append('code', code);newForm.append('name', name);newForm.append('photo', oneFile);fetch(`${Proxy_Api}/examPlaceManage`, {method: 'POST',body: newForm,}).then((res) => {return res.json()}).then((res) => {if (res?.success) {message.success('新增成功');setOneFile(null)setIsModalOpen(false);} else {const { desc } = resmessage.error(desc);}}).catch(() => {message.error('新增失败');})

四、mp4视频下载

参考：前端使用 fetch() 流式下载.mp4视频文件，跟踪进度_fetch下载进度_快撑死的鱼的博客-CSDN博客

使用 fetch API 进行流式下载时，可以使用 Response.body 对象跟踪下载进度

流读取：

Response.body 是一个 ReadableStream 对象

ReadableStream.getReader() 创建流读取器，并且会把流锁定，默认返回的是 ReadableStreamDefaultReader 类型

The getReader() method of the ReadableStream interface creates a reader and locks the stream to it. While the stream is locked, no other reader can be acquired until this one is released.

response.headers.get('Content-Length') 得到响应的总长度

ReadableStreamDefaultReader.read() 方法得到一个 Promise 对象，可以获取到流内部序列中的下一个分块，循环调用直到完成，同时收集数据得到一个 Uint8Array 数组

最后转换成 Blob 就可以完成下载了

//点击视频，调接口，获取视频。下载本地const getVideo = async () => {const videoUrl = `/${Second_Proxy_Api}/realTimeMonitor/selectVideo/....`const response = await fetch(videoUrl)const reader = response.body.getReader()const contentLength = +response.headers.get('Content-Length')let receivedLength = 0let chunks = []while (true) {const { done, value } = await reader.read();if (done) {break}chunks.push(value)receivedLength += value.length// 下载进度console.log(`Reveived ${receivedLength} of ${contentLength}`)}// 通过创建a标签实现const a = document.createElement("a");a.style.display = 'none'document.body.append(a)// 调用window的url方法const url = window.URL.createObjectURL(new Blob(chunks, { type: 'video/mp4' }))a.href = url// a.download = item.name --命名a.download = '视频'// 下载文件a.click()// 释放内存document.body.removeChild(a)window.URL.revokeObjectURL(url)}