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

最新推荐文章于 2024-04-17 09:36:59 发布

是我胡汉三啊

最新推荐文章于 2024-04-17 09:36:59 发布

阅读量1.7k

点赞数

分类专栏： vue 踩坑大全文章标签： vue html js

本文链接：https://blog.csdn.net/weixin_45925443/article/details/108923909

版权

文章目录

目的
问题

目的

使用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: