js實現圖片預覽
參考：添加鏈接描述
-
圖片預覽
本來用的是element-plus自帶的組件el-image，但是去不掉縮略圖，所以換成了el-imag-viewer組件（圖片可拖拽），由于用的vite沒有require方法，需要自己處理一下圖片才能顯示。
參考1：巧用element-ui自帶隱藏的圖片查看器el-image-viewer瀏覽圖片(附兼容IE騷操作)
參考2：vue3中使用require導入圖片 -
pdf預覽
用iframe自帶的:src=“url”屬性顯示不出來pdf，未找到原因，后面綁了一個ref=“pdfRef”，使用pdfRef.value.setAttribute(‘src’,url)可以正常顯示出pdf文件。
參考：vue 在線預覽 word ，Excel，pdf，圖片 數據流 內網文件流 親測有效（word 目前支持docx文件以及doc文件（doc需要后端處理）） -
Excel預覽（Docx預覽一樣的）
xlsx插件無問題，但是需要將arraybuffer轉成文件流再做處理才可以，我沒用XLSX插件，用的是vue-office插件（沒有使用fetch，用的常規的post請求方式，則需要將arraybuffer轉成文件流才能顯示出來，對了，不能忘記設置樣式高度，否則也顯示不出來）。
注意：vue-office插件只能預覽xlsx格式的excel表格，不能預覽xls格式的。而且有默認展示的行、列數，如果想展示更多需要自己設置，表格的寬高目前也不能自適應，看源代碼有提供一個方法transformData，但需要循環遍歷才能修改寬高（且寬高的值只能接收數字形式）。具體可見源碼：vue-office插件屬性使用說明文檔
安裝vue-office插件：npm install @vue-office/excel
xlsx插件預覽excel參考：vue 在線預覽 word ，Excel，pdf，圖片 數據流 內網文件流 親測有效（word 目前支持docx文件以及doc文件（doc需要后端處理））
參考：上傳文件預覽
參考npm插件文檔：添加鏈接描述 -
將arraybuffer轉成文件流
let fileReader = new FileReader()fileReader.readAsArrayBuffer(file) // file就是接收到的arraybufferfileReader.onload = () => {this.src = fileReader.result}
參考：Blob，ArrayBuffer，File，FileReader，Buffer，TypeArray 的作用和區別
參考：二進制學習——Blob，ArrayBuffer、File、FileReader和FormData的區別
)
)
)
)