首页 > 解决方案 > 将带有表单的文件从 nuxt 发送到节点服务器(nodemailer)

问题描述

我在 nuxt 有这样的表格:

<v-form v-if="displayForm" ref="form" v-model="valid" enctype="multipart/form-data" lazy-validation>
<v-flex xs12 md6 sm12>
        <v-text-field
          v-model="linkOriginal"
          label="Link to the original work (not required)"
        />
      </v-flex>
      <v-flex xs12 md6 sm12>
        <span>Pic from original work (required)</span>
        <input id="file" ref="file" type="file" @change="handleFileUpload()">
      </v-flex>
</v-form>

我的脚本是这样的:

<script>
export default {
  data() {
    return {
      file: "",
      linkOriginal: "",
    };
  },
  methods: {
    handleFileUpload() {
      console.log(this.$refs.file.files[0]);
      this.file = this.$refs.file.files[0];
    },
    submit() {
      if (this.$refs.form.validate()) {
        let formData = new FormData();
        formData.append("file", this.file);
        formData.append("notifDate", this.notifDate)
        this.$axios
          .post(
            "http://mynodeserver.com:3000/infringement",
            formData,
            { 
              headers: { 
               "Access-Control-Allow-Origin": true 
               "Content-Type": "multipart/form-data"
              } 
            }
          )
          .then(response => {
            this.displayForm = false;
            this.displayError = false;
           this.displaySuccess = true;
      })
      .catch(e => {
        this.displayForm = false;
        this.displaySuccess = false;
        this.displayError = true;
      });
      } else {
        console.log("u need to complete the required elements");
      }
    },
    clear() {
      this.$refs.form.reset();
    }
  }
};
</script>

在我的节点服务器端部分,当我控制台日志 req.body.file 或 req.body.notifDate 它返回 undefined 所以我无法将它附加到我想用 nodemailer 发送的电子邮件中。我在这里想念什么?

标签: node.jsvue.jsnodemailervuetify.jsnuxt.js

解决方案


请求将axios.post()对象作为第二个参数,axios.post('/api/submit', {data: formData})


推荐阅读