Vue简易上传组件

最新推荐文章于 2025-11-14 07:23:52 发布

原创

最新推荐文章于 2025-11-14 07:23:52 发布 · 313 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#上传 #axios #vue

本文介绍了作者在找不到合适上传插件的情况下，决定自行编写一个Vue上传组件的过程。组件使用axios进行文件上传，并且在创建过程中注意了vue transition-group的key使用以及在网络不佳或文件过大时如何取消请求以避免带宽占用。组件的样式处理采用了stylus。

一直找不到合适的上传插件，要么和其他插件有冲突，要么文件类型不支持......。干脆自己写一个。

先上代码

<template>
  <div class="upload">
    <section class="list">
        <transition-group tag="ul" name="slide">
          <li v-for="(item, index) of fileList" :key="item.id">
            <div class="left">
              <img :src="item.preview" alt="">
            </div>
            <div class="center">
              <span>{
  
  {item.name}}</span>
              <el-progress :percentage="item.progress"
                v-show="item.progress !== undefined && item.progress !== 100"></el-progress>
            </div>
            <div class="right" @click="deleteMe(item, index)">
              <i class="iconfont icon-cancel"></i>
            </div>
          </li>
        </transition-group>
    </section>
    <footer class="add">