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

最新推荐文章于 2024-04-16 17:28:35 发布

前端小白学习中....

最新推荐文章于 2024-04-16 17:28:35 发布

阅读量1.4k

点赞数

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

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

版权

VUE 同时被 2 个专栏收录

17 篇文章 1 订阅

订阅专栏

elementUI

13 篇文章 0 订阅

订阅专栏

<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)
        }
      })
},