vue 前端引入本地文件并读取

car 331

于 2019-11-19 16:13:11 发布

阅读量5.7k

点赞数 1

本文链接：https://blog.youkuaiyun.com/qq_40596494/article/details/103144991

版权

本文介绍了在Vue项目中如何实现前端本地文件的选择与读取，通过FileReader API详细讲解了文件读取的步骤和方法，包括选择文件、预览文件和上传文件等操作。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<template>
   <div > 
    <Row>
    <i-col span="14">
       <span>上传文件：</span> 
       <a href="javascript:;" class="a-upload">
       <input type="file"  @change="tirggerFile($event)">点击这里上传文件
       </a>
   </div>
</template>
<script>
export default {   
 methods:{
        tirggerFile(event) {
　　　　　　　　　//此处校验文件后缀
                var file = event.target.files[0].name; // (利用console.log输出看file文件对象)json
                var num = file.split('.');
                var mun = num[num.length - 1];
                if ( mun == 'json') {
                    this.readFile();
                } else {
                    this.$Notice.error({
                        title: '请重新点击选择文件传入符合标准的文件',
                        duration: 2
                    });

最低0.47元/天解锁文章