vue框架下：label+input选择文件上传文件(踩坑)

本文链接：https://blog.youkuaiyun.com/weixin_45925443/article/details/108923909

本文介绍了在Vue框架下使用label+input实现文件上传时遇到的问题及解决办法。问题在于改变data中数据时页面无法渲染，经过分析发现是事件处理和数据更新之间的交互问题。解决方案是正确地在事件中更新数据，确保Vue能够检测到数据变化并重新渲染视图。

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

文章目录

目的
问题

目的

使用Vue框架和axios上传文件：
label+input选择文件上传文件，将input标签隐藏，只显示label标签，同时在事件函数里面通过改变Vue data的数据实现显示标签的变化

HTML代码：

<template>
  <div class="page">
    <div class="upload-mod-wrap">
      <!-- 上传文件的盒子 -->
      <div class="upload-file">
        <div class="upload-file-header">
          <a href="javascript:;">X</a>
        </div>
        <div ref="uploadFileBody" class="upload-file-body">
          <!-- 上传文件input -->
          <div v-show="isActive == 0" class="upload-file-btn">
            <div class="input-label" @click="clickInput">
              <span>+</span><br />
              <span>选取文件</span>
            </div>
            <input
              ref="fileInput"
              type="file"
              id="js-upload-file"
              @change="uploadFile"
            />
          </div>
          <!-- 进度条 -->
          <div v-show="isActive == 1" class="upload-file-loading clear">
            <div class="loading-bar">
              <div ref="loadingBar" id="londing" :style="{
       width: progress }">
                <span v-if="!isLoading">上传完成</span>
              </div>
            </div>
            <div class="loading-info">
              <span>文件名：</span>
              <span class="echo-size"> {
  { filename }}</span>
              <br />
              <span>进度：</span>
              <span class="echo-size"> {
  { progress }}</span>
            </div>
          </div>
          <!-- 上传文件的表面 -->
          <!-- <div class="upload-file-face">+</div> -->
        </div>
        <div class="upload-file-tail">
          <div>
            <button>取消</button>
            <button>退出</button>
          </div>
        </div>
      </div>
    </div>
    <div class="page-content"></div>
  </div>
</template>

修改后的JS代码：

<script>
const axios = require("axios");

export default {
   
  name: "OPenFile",
  data() {
   
    return {
   
      isActive: 0,
      isLoading: true,
      errInfo: "",
      filename: "还未选择任何文件",
      progress: "0%",
    };
  }