我开始使用 Vue Js 从事小型项目,我想在我的联系表中添加上传文件选项,因为我有很多输入文本字段。但不适用于追加功能。如何将上传文件添加到我的序列化表格
这是我的代码:
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 (添加)功能,但是它不起作用
答案 0 :(得分:0)
两天后,这是我的解决方案:
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 }
})