element Ui VUE 前端实现同步调用后端接口,并等待响应后,在操作下一步

我这里是使用文件上传的场景,

主要关键字 await async 进行同步阻塞,然后,就可以在循环中,等待响应后,在进行调用
如果不等待,则前端会一次性将循环体遍历完,请求直接占满,导致其他功能请求,会阻塞,受到影响
async fnUploadDocFileForBatchOrder(data) {
      return uploadDocFileForBatchOrder(data); // js 调用的后端方法
    },
    async fnUploadDocFileForOrder(data) {
      return uploadDocFileForOrder(data); // js 调用的后端方法
    },
    async uploadIma(i) {
      let cc;
      console.log("总文件数:" + this.fileList.length + "==当前第" + i + "个");
      if (i >= this.fileList.length) {
        return false;
      }
      let fd = new FormData();
      fd.append("file", this.fileList[i].raw);
      this.uploadForm.fileList = fd;
      if (this.upload.title == "单个订单数据导入") {
        cc = await this.fnUploadDocFileForOrder(this.uploadForm);
      } else {
        cc = await this.fnUploadDocFileForBatchOrder(this.uploadForm);
      }
      // console.log(JSON.stringify(cc));
     // 这里控制循环体是否结束
      if (cc != undefined && cc.code != undefined) {
        return true;
      }
      return false;
    },
    // 提交上传文件
    async submitFileForm() {
      if (this.fileList.length == 0) {
        this.$message.error("请上传文件");
        return false;
      }
      if (
        this.uploadForm.fileSource == undefined ||
        this.uploadForm.fileSource.length == 0
      ) {
        this.$message.error("请选择文件来源");
        return false;
      }
      if (
        this.uploadForm.orderType == undefined ||
        this.uploadForm.orderType.length == 0
      ) {
        this.$message.error("请选择订单类型");
        return false;
      }
      if (this.upload.title == "单个订单数据导入") {
        if (
          this.uploadForm.code == undefined ||
          this.uploadForm.code.length == 0
        ) {
          this.$message.error("请输入单号");
          return false;
        }
      }

      this.upload.open = false;
      this.msgSuccess("数据上传中,已转入后台处理,请不要关闭浏览器");
      this.buttenloading = true;
      this.getList();
      this.progressshow = true;
      let flag = true;
      let index = 0;
      while (flag) {
        // 进度条变量
        this.progressd = parseInt((index / this.fileList.length) * 100);
        flag = await this.uploadIma(index);
        index++;
      }
      this.buttenloading = false;
      this.progressshow = false;
      this.fileList = [];
      this.$refs.upload.submit();
    },

js 方法文件

// 批量上传单据
export function uploadDocFileForBatchOrder(data) {
    return request({
        url: `/docfile/uploadDocFileForBatchOrder?orderType=${data.orderType}&fileSource=${data.fileSource}`,
        method: 'post',
        // headers: { 'Content-Type': 'multipart/form-data' },
        data: data.fileList
    })
}

export function uploadDocFileForOrder(data) {
    return request({
        url: `/docfile/uploadDocFileForOrder?code=${data.code}&orderType=${data.orderType}&fileSource=${data.fileSource}`,
        method: 'post',
        data: data.fileList
    })
}
  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
好的,以下是一个前端采用 Vue.jsElement UI 框架,实现上传图片并调用后端 `IFormFile` 接口的示例代码: ```html <template> <el-card> <el-upload class="avatar-uploader" action="/api/upload" :show-file-list="false" :before-upload="beforeUpload" > <img v-if="imageUrl" :src="imageUrl" class="avatar"> <i v-else class="el-icon-plus avatar-uploader-icon"></i> </el-upload> </el-card> </template> <script> export default { data() { return { imageUrl: '' } }, methods: { beforeUpload(file) { // 设置请求头部 file.headers = { 'Content-Type': 'multipart/form-data' }; return true; } } } </script> <style> .avatar-uploader { display: flex; justify-content: center; align-items: center; cursor: pointer; width: 200px; height: 200px; border: 1px dashed #ccc; border-radius: 4px; overflow: hidden; } .avatar { width: 100%; height: 100%; object-fit: cover; } .avatar-uploader-icon { font-size: 28px; color: #999; } .avatar-uploader:hover { border-color: #409EFF; } .avatar-uploader.is-active { border-color: #409EFF; } </style> ``` 上述代码中,`el-card` 和 `el-upload` 组件是 Element UI 提供的。`el-upload` 组件设置了 `action` 属性,指定了上传文件时需要调用后端接口的地址。同时,`before-upload` 方法可设置请求头部,以便后端能够正确地接收到文件。 在接收到上传的文件之后,后端需要调用 `IFormFile` 接口进行处理。下面是一个示例的后端代码: ```csharp [HttpPost("api/upload")] public async Task<IActionResult> Upload(IFormFile file) { if (file == null || file.Length == 0) { return BadRequest("File is null or empty."); } // 处理上传的文件 // ... return Ok("File uploaded successfully."); } ``` 在上述代码中,`Upload` 方法接收一个 `IFormFile` 参数,该参数即为前端上传的文件。在处理完文件后,可以返回一个成功的响应

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值