使用带有表单文本字段的 vue js 上传图像

Question

我开始使用 Vue Js 进行小型项目，我想在我的联系表单中添加 上传文件 选项，我使用序列化作为表单，因为我有很多输入文本字段。但它不适用于 append 功能。如何将上传文件添加到我的序列化表单

这是我的代码：

addProducts () {
  const formData = $('#add-product').serialize()
  // formData.append('image', this.selectedFile, this.selectedFile.name)
  this.$axios.$post('http://endpoint.quicknsales.com/api/Product', formData).then((response) => {
    this.validation(response)
    if (response.success) { this.refresh = true }
  })
}

我的 HTML 代码的一部分：

<div class="form-group mb-2">
  <div class="row">
    <div class="col-md-6">
      <label class="mb-0"><strong>Buying Price:</strong></label>
      <input
        id="product_buying_price"
        v-model="formFields.product_buying_price"
        type="text"
        class="form-control rounded-0"
        placeholder="Product Buying Price"
        name="general[product_buying_price]"
      >
    </div>
    <div class="col-md-6">
      <label class="mb-0"><strong>Selling Price:</strong></label>
      <input
        id="product_selling_price"
        v-model="formFields.product_selling_price"
        type="text"
        class="form-control rounded-0"
        placeholder="Product Selling Price"
        name="general[product_selling_price]"
      >
      <input id="file" type="file" name="general[file]">
    </div>
  </div>
</div>

如何将上传文件添加到我的表单中，如您所见，我已经使用了 append 功能但它不起作用

Answer 1

两天后这是我的解决方案：

const formData = new FormData()
  formData.append('image', this.selectedFile, this.selectedFile.name)
  $($('form-in-question').serializeArray()).each(function (i, field) {
    formData.append(field.name, field.value)
  })
  this.$axios.$post('endpoint.com', formData, {
    headers: {
      'Content-Type': 'multipart/form-data'
    }
  }).then((response) => {
    this.validation(response)
    if (response.success) { this.refresh = true }
  })