本项目是站在巨人的肩膀上开发的，巨人的项目 👉 the-file-preview

安装

npm i vue-file-previewer

描述

支持vue2和vue3，实现了对线上文件和本地上传文件的预览

参数选项

参数	类型	描述	返回值
url	String	线上文件的url	-
file	File	本地的上传文件	-
loaded	Event	文件加载成功回调	{ type: String, url: String }
error	Event	文件加载、渲染报错	{ type: String, url: String, error: Error }

示例

点击查看线上演示.

项目地址

github
npm

使用

main.js 中注册全局组件

import VueFilePreviewer from 'vue-file-previewer';
Vue.component('VueFilePreviewer', VueFilePreviewer);

当使用线上url预览时

<template>
 <VueFilePreviewer :url="url" @loaded="handleLoaded" @error="handleError" />
</template>

当预览本地文件时 ``` <template>
要上传的文件： <input type="file" @change="uploadHandle"/>
<VueFilePreviewer :file="file" @loaded="handleLoaded" @error="handleError" /> </template>

export default { name: 'Demo', data() { return { file: null, }; }, methods: { uploadHandle(data){ this.file = data.target.files[0]; }, handleLoaded({ type, url }) { console.log(type, url) }, handleError({ type, url, error }) { console.log(type, url, error) } }, }; ```

Detalhes do pacote

vue-file-previewer

readme (leia-me)

安装

描述

参数选项

示例

项目地址

使用