Vue 表单提交 -- 文件上传

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对象，不需要对数据做处理。

accept：接受上传的文件类型

file-list：上传的文件列表

action：必选参数，上传的地址

data：上传时附带的额外参数，要求传入一个对象

before-upload：上传文件之前的钩子，参数为上传的文件，若返回 false 或者返回 Promise 且被 reject，则停止上传

on-exceed：文件超出个数限制禅橡时的钩子

on-success：文件上传成功时的钩子

show-file-list：是否显示已上传文件列表

multiple：是否支贺仔旁持多选文件

limit：最大允许上传个数

本文只作为个戚棚人学习记录......

---