el-upload上传文件

本文详细解析了Element UI中的文件上传组件使用方法,包括如何限制上传文件类型、大小,如何监听文件变化,以及如何在上传前进行表单验证。同时,介绍了如何将上传的文件与表单数据一并发送到后端。

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

               <el-upload
                  class="upload-demo"
                  action=""
                  :on-change="onChange"
                  :limit="1"
                  :file-list="fileList"
                  :auto-upload="false"
                >
                  <el-button size="small" type="primary">点击上传</el-button>
                  <!-- <div slot="tip" class="el-upload__tip">
                    只能上传jpg/png文件,且不超过500kb
                  </div> -->
                </el-upload>

                onChange(file, filelist) {
                  // console.log(file, filelist, "文件改变");
                  this.fileList = filelist;
                }



onSubmit(form) {
      let vm = this;
      let param = new FormData(); //通过new FormData,新建局部参数。
      for (let key in vm.form) {
        if (vm.form[key]) {
          param.append(key, vm.form[key]); //遍历向param中添加参数
        }
      }
      this.$refs[form].validate(async valid => {
        let ServiceID = this.serviceID || 0;
        // console.log(ServiceID, "sid");
        if (valid) {
          // console.log(vm.fileList, "file");
          if (vm.fileList.length !== 0) {
            param.append("ServiceFiles", vm.fileList[0].raw);//通过fileList数组取得上传的文件
            await requestApi(
              "v1/mgmt/services/" + ServiceID,
              param,//直接以param作为请求参数
              "post",
              true
            ).then(
              res => {
                // console.log(JSON.stringify(res), "1111111111111");
                // if(!res.data.resultStatus) {
                //   console.log(res.data.errorMessage)
                //   return
                // }

                if (res.data.resultStatus) {
                  this.getServiceInfo();
                  this.dialogVisible = false;
                  this.$message.success("保存成功!");
                } else {
                  debugger;
                  this.$message.warning(res.data.errorMessage);
                }
              },
              err => {//服务器出错时处理
                if (err) {
                  console.log(err, "errrrr");
                  let errMessage = err.data.errorMessage
                    ? err.data.errorMessage
                    : "Internal Server Error";
                  this.$message.warning(errMessage);
                  // this.$message.warning(err);
                }
              }
            );
          } else {
            vm.$message.info("请上传程序包!");
          }
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值