vue项目中使用ElemetUI的Upload组件的http-request方法同时上传多个文件并提交表单数据

最新推荐文章于 2024-08-23 16:26:36 发布

蜉蝣&一粟

最新推荐文章于 2024-08-23 16:26:36 发布

阅读量6.3k

点赞数

分类专栏： vue 前端爬坑之路

本文链接：https://blog.csdn.net/RJN0814/article/details/96870603

版权

本文介绍了如何在Vue项目中使用ElementUI的Upload组件通过http-request方法实现多个文件上传的同时，一并提交表单数据。通常，Upload组件的submit()方法会导致多次请求，但借助http-request，我们可以确保所有文件和表单数据仅通过一个请求发送。

摘要由CSDN通过智能技术生成

本篇讲述使用ElementUI中的Upload组件的http-request方法进行多个文件上传的同时提交表单数据

上篇博客使用的是Upload携带额外参数的方法进行文件上传的同时提交表单数据，那种方法仅适用于单个文件上传的时候携带表单数据。
而开发过程中一般会有多个文件上传的需求，用Upload携带额外参数，使用其自带的this.$refs.upload.submit()事件进行上传会发送多个请求，现在我们需要上传多个文件并且提交表单数据的这些操作，只发送一次请求就能完成。

下面先贴上我的html代码，具体的实现细节再一步步讲解。代码看起来一长串，实际很简单，就是一个表单，和一个upload组件。

    <div>
      <el-row>
        <div class="top">
          <el-form :model="form" label-width="65px" label-position="left" ref="form">
            <el-form-item label="访问模式">
              <el-radio-group v-model="form.visitMode">
                <el-radio label="1">HTTP</el-radio>
                <el-radio label="2">HTTPS</el-radio>
              </el-radi