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

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()
        	},
     	}
  	}
}
Element UI的el-upload组件中,如果你想改变上传文件列表显示的位置,并将其放在按钮上方,可以自定义上传按钮和上传列表的样式。首先,你需要了解el-upload的基本结构,它通常包含一个上传按钮和一个可滚动的文件列表容器。 你可以通过以下几个步骤实现: 1. 使用`<el-upload>`标签创建上传组件,同时设置`action`属性指定上传的URL,`list-type`用于指定文件列表的样式(如默认的`text`、`picture`等): ```html <template> <div class="upload-container"> <el-button type="primary" @click="uploadFiles">上传</el-button> <el-upload :action="uploadUrl" list-type="text" :file-list="fileList" :on-success="handleSuccess" :on-error="handleError" > <i class="el-icon-upload"></i> 手动上传 </el-upload> </div> </template> <script> export default { data() { return { uploadUrl: 'your-upload-url', // 替换为你实际的上传地址 fileList: [], // 初始化文件列表为空 }; }, methods: { uploadFiles() { // ... 实现上传逻辑 }, // ... 其他处理成功和错误的方法 } }; </script> <style scoped> .upload-container { display: flex; justify-content: space-between; } /* 自定义上传按钮和文件列表的位置 */ .el-upload__container { flex-direction: column-reverse; /* 将文件列表翻转到按钮上方 */ } </style> ``` 2. 在CSS部分,使用`:scope`选择器或者`.el-upload__container`选择器将文件列表容器的方向改为从上到下,以放置在按钮上方: ```css .upload-container .el-upload__container { flex-direction: column; align-items: flex-start; /* 确保文件列表在按钮之上 */ } ```
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

涔溪

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值