el-upload上传文件取消默认直接上传，改为手动上传

最新推荐文章于 2025-03-19 15:33:16 发布

原创最新推荐文章于 2025-03-19 15:33:16 发布 · 1k 阅读

9 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript #前端

el-upload上传文件取消默认直接上传，改为手动上传

html部分

<el-upload
      ref="upload"
      :accept="fileType.join(',')"
      :limit="1"
      :headers="upload.headers"
      :action="upload.url"
      :before-upload="beforeUpload"
      :disabled="upload.isUploading"
      :on-progress="handleFileProgress"
      :on-success="handleFileSuccess"
      :auto-upload="false"
      :data="dataInfo"   //绑定对象 若需要传递多个参数时使用  不需要则去掉
      drag
    >
      <i class="el-icon-upload" />
      <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
      <div slot="tip" class="el-upload__tip" style="color: red">
        提示：仅允许导入“xls”或“xlsx”格式文件！
      </div>
    </el-upload>

JS部分

import { getToken } from "@/utils/auth";

export default {
  name: "MesDeptProjectMouthWorkingDetail",
  data() {
    return {
        upload: {
        // 设置上传的请求头部
        headers: { Authorization: getToken() },
        // 上传地址
        url: process.env.VUE_APP_BASE_API + '/importData/upload',
        // 是否更新已经存在的用户数据
        isUploading: false
      },
      dialogVisiblefile: false,
      fileType: ['.xlsx', '.xls'],
      dataInfo: {
        deptId: null,
        yearAndMouth: null
          //不需要设置上传文件的参数 file
      },
    },
     methods:{
          beforeUpload(file) {
              const isExcel = /\.(xls|xlsx)$/.test(file.name);
              if (!isExcel) {
                this.$message.error('上传文件只能是 .xls、.xlsx 格式!');
                return false;
              }
              return true;
            },
            // 文件上传中处理
            handleFileProgress() {
              this.upload.isUploading = true
            },
            // 文件上传成功处理
            handleFileSuccess() {
              this.upload.isUploading = false
              this.$refs.upload.clearFiles()
            },
            // 提交上传文件
            submitUpload() {
              this.dialogVisiblefile = false
              this.$refs.upload.submit()
        	},
     	}
  	}
}