Ajax文件上传Vue.js
Ajax file upload Vue.js
我正试图使用Vue.js通过Ajax上传一个文件,但服务器一直在响应,说文件需要是一个图像(当它不使用Ajax时,它可以工作)。我的设置如下:
<input type="file" name="avatar" v-model="profileFormData.avatar">
我的数据是:
profileFormData: {
"name": '',
"email": '',
"avatar": '',
},
对于文件上传,我需要做一些特定的事情吗?
我似乎已经找到了解决这个问题的方法。首先,我必须从form元素(以及该表单中的每个元素)中删除v模型。然后,不发布v-model,而是使用FormData
获取要发送的数据。
这里有一个例子:
//Pass the form into a new FormData object
var formData = new FormData(this.el);
//Pass through the object instead of data passed via a v-model
this.vm
.$http[this.getRequestType()](this.el.action, formData)
.then(this.onComplete.bind(this))
.catch(this.onError.bind(this));
相关文章:
- 如何创建带有插槽的vue js组件预加载程序
- 引用vue.js中v-for中的上一个值
- 如何访问<插槽>内部v-for(vue.js)
- 调用laravel{{action(Controller@method}}通过传递vue.js数组中的变量
- Vue.js获取组件中的一个元素
- 将自定义脚本加载到Vue.js组件中
- Vue.js:手表数组长度
- Vue.js片段实例
- vue-js-单选按钮won't默认情况下使用v-model属性进行检查
- 访问JQuery中的vue-js变量
- 如何在Vue.js中使用列表视图
- Vue.js-插值错误-如何将样式修改为v-bind:style
- 如何从Vue.js中的子组件访问父方法
- Ajax文件上传Vue.js
- Vue.js如何在定义API变量之前实现自定义过滤器
- Vue.js 在方法内失去范围
- Vue.js 数据对象不适用于某些 lodash 函数
- Vue.js继承调用父方法
- 使用 Vue.js 调用 Node.js 服务器
- 从mixin Vue.js获取数据