element ui ---- el-upload实现手动上传多个文件

最新推荐文章于 2025-06-07 03:44:12 发布

行进中的蜗牛

最新推荐文章于 2025-06-07 03:44:12 发布

阅读量4.9k

点赞数 2

CC 4.0 BY-SA版权

文章标签： ui javascript vue.js

本文链接：https://blog.youkuaiyun.com/qq_41932589/article/details/131479549

该文章展示了如何使用Vue.js的el-upload组件进行文件上传操作。通过监听onChange和onRemove事件，对文件列表进行管理和错误处理。当文件大小超过100MB时，系统会拒绝上传并删除文件。上传过程使用了formData对象，并通过自定义接口createFileRequest发送请求。

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

ui部分

<el-upload
        ref="upload"
        drag
        :file-list="fileList"
        :auto-upload="false"
        :on-change="onchange"
        :on-remove="handleRemove"
        action="javascript:void(0)"
        multiple
      >
        <i class="el-icon-upload"></i>
        <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
      </el-upload>

js 实现上传

// 上传函数
handleUpload() {
      const formData = new FormData()
      // fileList 在data中定义的数组，把所有文件放到formData中
      this.fileList.forEach((f) => {
        formData.append('file', f.raw)
      })
      // 上传文件 api 【createFileRequest是自己封装的一个接口】
      createFileRequest(formData)
        .then((res) => {
          this.msgSuccess('文件上传成功')
          this.fileList = []
        })
        .catch((e) => {
          this.msgError('文件上传失败')
        })
    },
    onchange(file) {
      if (file.size / 1024 / 1024 < 100) {
        this.fileList.push(file)
      } else {
        this.msgError('文件过大')
        this.handleRemove(file)
      }
    },
    // 文件删除处理
    handleRemove(file) {
      this.fileList = this.fileList.filter((f) => file.name !== f.name)
    }