Vue 表单提交 -- 文件上传

JavaScript08

Vue 表单提交 -- 文件上传,第1张

1.必须是post请求，需要设置headers: {'Content-Type':'multipart/form-data'},在这个前提下才能文件上传。

2.你的文件上传 <input type="file" @change="getFile($event)"/>

外层要有 <form enctype="multipart/form-data" name="fileinfo" id="myForm"></form>

3. <input type="file" @change="getFile($event)"/>的change方法很重要，要记得加上，是用来获取选择的文件的信息数据。

4.参数传递要这么处理：把接口的所有参数通过这个方式加到params里。这样在控制台看到的参数格式才是对的，如下图。

这里遇到一个坑，就是不这么处理，而是简单的formData = params这么传递，auth_user_file看到是｛｝，虽然选择文件时在控制台能看到信息，但是作为接口参数传递时就为{}

5.因为我们这个项目的文件上传项不是必填，也可以选择手动输入，如果没有选择文件，建议这么处理。

-- headers: { 'Content-Type': 'application/x-www-form-urlencoded'}

-- params = Qs.stringify(params)//处理参数参数作为对象传递就可以了，但是要用vue的qs进行处理。参数格式在控制台看到是这样的

关于文件上传实现的源码贴在下面，供参考

PermissionSettings.vue

servers.js

$.ajax文件上传：

报错

增加参数：processData设置为false。因为data值是FormData对象，不需要对数据做处理。

vue.js把表单提交到data里：axios({url:'/user',method:'post',data:{firstName:'Fred',lastName:'Flintstone'},transformRequest:[function(data){//Dowhateveryouwanttotransformthedataletret=''for(letiti