【问题标题】:Send a file with a form from nuxt to node server (nodemailer)将带有表单的文件从 nuxt 发送到节点服务器(nodemailer)
【发布时间】:2019-03-04 04:43:04
【问题描述】:

我在 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 时,它​​返回未定义,因此我无法将它附加到我想使用 nodemailer 发送的电子邮件中。我在这里错过了什么?

【问题讨论】:

    标签: node.js vue.js nodemailer vuetify.js nuxt.js


    【解决方案1】:

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

    【讨论】:

    • 另外,请添加到您的答案中,解决问题需要做什么。
    猜你喜欢
    • 2015-05-16
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2019-01-16
    • 1970-01-01
    • 1970-01-01
    • 2021-04-13
    相关资源
    最近更新 更多