我有表单模式,可以在“编辑”和“创建帖子”之间切换 我需要上传图片并提交表格。有一个上载仅图像字段的示例。在这里,我需要使用其他表单字段提交文件
<form @submit.prevent="editmode ? updatePost() : createPost()">
<div class="modal-body">
<div class="form-group">
<input v-model="form.title" id="title" type="text" name="title"
placeholder="Title"
class="form-control" :class="{ 'is-invalid': form.errors.has('title') }">
<has-error :form="form" field="title"></has-error>
</div>
<div class="form-group">
<input v-model="form.featured" id="featured" type="file" name="featured"
placeholder="Featured Image" @change="selectFile"
class="form-control" :class="{ 'is-invalid': form.errors.has('featured') }">
<has-error :form="form" field="featured"></has-error>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
<button v-show="editmode" type="submit" class="btn btn-success">Update</button>
<button v-show="!editmode" type="submit" class="btn btn-primary">Create</button>
</div>
</form>
这是我调用的用于上传图像文件的脚本。我正在使用this.form.post('api / post')发布数据。我该如何在脚本中提交multipart / form-data
export default {
data() {
},
methods: {
selectFile(e) {
const file = e.target.files[0];
this.form.featured = file;
},
createPost(){
this.$Progress.start();
this.form.post('api/post')
.then(()=>{
$('#addNew').modal('hide')
this.$Progress.finish();
})
.catch(()=>{
})
}
答案 0 :(得分:1)
使用vform upload example,您可以上传文件,但仍可以传递其他字段。
您需要导入额外的库调用“ objectToFormData.js”,以将对象转换为FormData。
这应该可行。
您将objectToFormData.js下载到本地文件
放在/resources/js/objectToFormData.js
在您的app.js文件中添加以下代码。
从“ ./objectToFormData”导入objectToFormData; window.objectToFormData = objectToFormData;
按如下所示更改您的代码,需要从this.form.post更改为this.form.submit,以添加transformRequest。
export default {
data() {
},
methods: {
selectFile(e) {
const file = e.target.files[0];
this.form.featured = file;
},
createPost(){
this.$Progress.start();
this.form.submit('post','api/stock-import', {
// Transform form data to FormData
transformRequest: [function (data, headers) {
return objectToFormData(data)
}]
}).then(()=>{
$('#addNew').modal('hide')
this.$Progress.finish();
})
.catch(()=>{
})
}