element ui实现手动上传文件，且只能上传单个文件，并能覆盖上传。

前端小白学习中....

于 2023-02-01 13:35:34 发布

阅读量1.5k

点赞数

CC 4.0 BY-SA版权

分类专栏： VUE elementUI 文章标签： vue.js elementui 前端

本文链接：https://blog.csdn.net/weixin_43305450/article/details/128832287

VUE 同时被 2 个专栏收录

17 篇文章

订阅专栏

elementUI

13 篇文章

订阅专栏

该段代码展示了在Vue.js中使用el-upload组件进行文件上传的过程，包括自定义http请求、文件类型检查（仅允许Excel）、文件大小限制（10MB内）以及如何处理上传后的响应。当文件列表有变化时，只保留最后一个文件，并更新fileName字段。

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

<el-upload ref="upload" action="" :http-request="uploadHttpReq" :on-change="handleChange" :before-upload="beforeUpload" :file-list="fileList" :auto-upload="false" :show-file-list="false" class="upload_class">
    <el-input v-model="uploadForm.fileName" readonly style="width:100%" />
</el-upload>

handleChange(file, fileList) {
      if (fileList.length > 0) {
        this.fileList = [fileList[fileList.length - 1]]  // 这一步，是 展示最后一次选择的文件
      }
      this.uploadForm.fileName = file.name
},
beforeUpload(file) {
      var isExcel = true
      if (file.type === 'application/vnd.ms-excel.sheet.macroEnabled.12' || file.type == 'application/vnd.ms-excel' || file.type == 'application/x-excel' || file.type == "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet") {
        isExcel = true
      } else {
        isExcel = false
      }
      if (!isExcel) {
        this.$msg.error('上传格式有误');
        return isExcel;
      }
      const isLt10M = file.size / 1024 / 1024 < 10;
      if (!isLt10M) {
        this.$msg.error('文件大小限制为10MB')
        return isLt10M;
      }
},
uploadHttpReq(item) {
      let formData = new FormData();
      formData.append("file", item.file);
      this.$http.post(url,formData).then(res => {
        if (res.resultCode === '200') {
          this.$message.success('上传成功')
        } else{
          this.$message.error(res.message)
        }
      })
},