npm i the-file-preview
支持vue2和vue3，实现了对线上文件和本地上传文件的预览
| 参数 | 类型 | 描述 |
|---|---|---|
| url | String | 线上文件的url |
| file | File | 本地的上传文件 |
点击查看 线上演示.
main.js 中注册全局组件
import FilePreview from 'the-file-preview';
Vue.component('FilePreview',FilePreview);
- 当使用线上url预览时
<template>
<filePreview :url="url"/>
</template>
- 当预览本地文件时
<template>
<div class="upload">
要上传的文件： <input type="file" @change="uploadHandle"/>
</div>
<filePreview :file="file"/>
</template>
export default {
name: 'Demo',
data() {
return {
file: null,
};
},
methods: {
uploadHandle(data){
this.file = data.target.files[0];
},
},
};