input上传多个文件并携带文本参数

最新推荐文章于 2024-01-24 10:39:34 发布

前端方程

最新推荐文章于 2024-01-24 10:39:34 发布

阅读量647

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.csdn.net/weixin_44040867/article/details/119818420

本文介绍了如何在Vue应用中使用`<input type=file>`实现文件选择，并通过`axios`库将选中的Excel文件和表单数据一起发送到内网API。重点展示了文件上传和POST请求的整合过程。

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

   				<input
                  type="file"
                  ref="fileId"
                  multiple="multiple"
                  @change="getFile"
                  class="mail-file-upload"
                />

main.js 

import axios from 'axios';
Vue.prototype.$ajax = axios

    getFile() {
      //获取file内容
      let files = this.$refs.fileId.files;
      this.xlsxFile = files;
    },


点击发请求函数
sendEmail() {
      let acc = JSON.stringify(this.form);
      let formdata = new FormData();
      if (this.xlsxFile) {
        formdata.append("files", this.xlsxFile);
      }

      formdata.append("email", acc);
      this.$ajax
        .post(
          process.env.VUE_APP_BASE_API + "/address/email/sendInnerSysEmail",
          formdata,
          {
            headers: {
              "Content-Type": "multipart/form-data"
            }
          }
        )
        .then(function(response) {
          console.log(response);
        });
    }