axios上传文件

㈠ 常见的四种post提交数据编码格式

HTTP/1.1 协议规定的 HTTP 请求方法有 OPTIONS、GET、HEAD、POST、PUT、DELETE、TRACE、CONNECT 这几种。其中 POST 一般用来向服务端提交数据，本文主要讨论 POST 提交数据的几种编码方式。

协议规定 POST 提交的数据必须放在消息主体（entity-body）中，但协议并没有规定数据必须使用什么编码方式。但是，数据发送出去，还要服务端解析成功才有意义。

服务端通常是根据请求头（headers）中的 Content-Type 字段来获知请求中的消息主体是用何种方式编码，再对主体进行解析。POST 提交数据方案，包含了 Content-Type 和消息主体编码方式两部分。下面就正式开始介绍它们。

这应该是最常见的 POST 提交数据的方式了。浏览器的原生 form 表单，如果不设置 enctype属性，那么最终就会默认以 application/x-www-form-urlencoded 方式提交数据。

在POST提交数据中Content-Type 被指定为 application/x-www-form-urlencoded；提交的数据按照 key1=val1&key2=val2 的方式进行编码，key 和 val 都进行了 URL 转码。大部分服务端语言都对这种方式有很好的支持。很多时候，我们用 Ajax 提交数据时，也是使用这种方式。

这也是一个常见的 POST 数据提交的方式。我们使用表单上传文件时，必须让 form 的 enctype 等于这个值。这种方式一般用来上传文件，各大服务端语言对它也有着良好的支持。上面提到的这两种 POST 数据的方式，都是浏览器原生支持的。

application/json 这个 Content-Type 作为响应头大家肯定不陌生。

实际上，现在越来越多的人把它作为请求头，用来告诉服务端消息主体是序列化后的 JSON 字符串。

由于 JSON 规范的流行，除了低版本 IE 之外的各大浏览器都原生支持 JSON.stringify，服务端语言也都有处理 JSON 的函数，使用 JSON 不会遇上什么麻烦。

顺便提一句，angular框架与 axios 默认的post采用是这种编码，php端不能直接使用$POST接受，使用

它是一种使用 HTTP 作为传输协议，XML 作为编码方式的远程调用规范,它的使用也很广泛，能很好的支持已有的 XML-RPC 服务。不过，XML 结构还是过于臃肿，一般场景用 JSON 会更灵活方便。

我们会发现，在很多post,put,delete等请求之前，会有一次 options 请求。

根本原因就是，W3C规范这样要求了！在跨域请求中，分为简单请求（get和部分post，post时content-type属于application/x-www-form-urlencoded，multipart/form-data，text/plain中的一种）和复杂请求。而复杂请求发出之前，就会出现一次options请求。

什么是options请求呢？它是一种探测性的请求，通过这个方法，客户端可以在采取具体资源请求之前，决定对该资源采取何种必要措施，或者了解服务器的性能。

在ajax中出现options请求，也是一种提前探测的情况，ajax跨域请求时，如果请求的是json，就属于复杂请求，因此需要提前发出一次options请求，用以检查请求是否是可靠安全的，如果options获得的回应是拒绝性质的，比如404\403\500等http状态，就会停止post、put等请求的发出。

虽然在下面的参考文献中有人提出可以取消options请求，但是实测后发现是不行的，jquery封装之后，更不能轻易取消。因此，靠javascript客户端取消options请求是不可能的，只能通过服务端对options请求做出正确的回应，这样才能保证options请求之后，post、put等请求可以被发出。但是，我们不能允许所有的options请求，而应该是有条件的，所以最好是通过一个特殊的机制，去验证客户端发出的options请求数据是否是符合服务端的条件的，如果不满足，返回403，则客户端会取消原有的post计划。

前台跨域post请求，由于CORS（cross origin resource share）规范的存在，浏览器会首先发送一次options嗅探，同时header带上origin，判断是否有跨域请求权限，服务器响应access control allow origin的值，供浏览器与origin匹配，如果匹配则正式发送post请求。

如果有服务器程序权限，设置，比如jsp中，设置header access control allow origin等于*，就可以得到跨域访问的目的。

㈡ axios.post 变成 options请求怎么解决

让后台通过option请求
请采纳

㈢ 为什么axios请求接口会发起两次请求

如果只是普通的 ajax 请求，也不会发起这个请求，只有当 ajax 请求绑定了 upload 的事件并且跨域的时候，就会自动发起这个请求。
这样就明了了，就是我们有upload事件绑定（一般都是本地调试，所以会有跨域），我仔细看了下axios文档，发现config配置文件中有两个参数
// onUploadProgress: function(progressEvent) {
// // Do whatever you want with the native progress event
// },
// onDownloadProgress: function(progressEvent) {
// // Do whatever you want with the native progress event
// },
分别处理上传和下载事件，也就是这里绑定了upload事件，所以每次请求都会有个option请求。
解决方案很简单，直接注释掉就好了，当然如果开发的工程上线使用跟请求的接口是同一个域名下自然不会两次请求。

㈣ elupload怎么绑定数据

elupload绑定数据：用v-model绑定一个变量。

在http-request属性中调用一个定义的方法，方法中执行图片上传到php后端的操作，可以用 axios 调用php后端api执行上传，注意上传文件之前要 new FormData()，因为是表单上传，将文件 append到 formData中。

数据库绑定控件：

发送给请求的客户端浏览器，然后将数据呈现在浏览器页面上。数据库绑定控件能够自动绑定到数据源公开的数据，并在页请求生命周期中适当的获取数据。常用的数据库绑定控件有：GridView控件和DataList控件。

当然，这些数据库绑定的控件也包含一些第三方控件。下面拿Spread举例说明如何将第三方控件绑定到数据库。

预先设置SqlDataSource1的各项参数（包括查询，更新，删除，插入），通这样绑定数据后：数据正常显示，单元格类型与数据库字段类型不匹配，commanbar上边的更新、删除、插入 等操作无效果。

㈤ axios 如何把表单文件里的图片传到后台图片需要提前转换格式吗

常见的做法是：
1. 拿到type=file的内容
2. axios的headers的content-type设置成multipart/form-data
const file = event.target.files[0]
axios.post('upload_file', file, {
headers: {
'Content-Type': 'multipart/form-data'
}
}).then(res => console.log(res)).catch(err => console.log(err))

㈥ 为什么axios请求接口会发起两次请求

config配置文件中有两个参数
// onUploadProgress: function(progressEvent) {
// // Do whatever you want with the native progress event
// },
// onDownloadProgress: function(progressEvent) {
// // Do whatever you want with the native progress event
// },
分别处理上传和下载事件，也就是这里绑定了upload事件，所以每次请求都会有个option请求。

㈦ HTTP请求常见的Content-Type类型

在现在ajax库已经完善的前提下，Content-Type有哪几种类型其实无所谓，按住application/json用就完了。但是，保不齐面试要考，所以还是全面了解一下为好。

最常见的 POST 提交数据的方式，原生Form表单如果不设置 enctype 属性，默认为application/x-www-form-urlencoded 方式提交数据。

首先，Content-Type被指定为 application/x-www-form-urlencoded；其次，请求体格式是 key1=val1&key2=val2 的形式，其中key 和 val 都进行了 URL 转码，就好像URL传参一样。大部分服务端语言都对这种方式有很好的支持。

不支持文件上传。

jQuery的Content-Type默认值是”application/x-www-form-urlencoded;charset=utf-8”。

另一个常见的 POST 数据提交的方式，如果 Form 表单的 enctype 设置为multipart/form-data，它的请求体的格式是：将表单的数据处理为一条消息，以标签为单元，用分隔符（这就是boundary的作用）分开，比如：

解释一下：

支持文件上传。

ajax请求的话，在 window.FormData 诞生之前无法实现， window.FormData 诞生后可以实现。

出现的较晚，但越来越流行。请求体是序列化后的 JSON 字符串，最大好处就是 JSON 格式比键值对支持复杂得多的结构化数据。

Form表单只要设置enctype为application/json就可以支持，但是也要看浏览器版本，低版本 IE 不支持这个enctype值。

ajax方面，axios默认采用application/json。

不支持上传文件。

在Chrome浏览器的Postman工具中，还可以看到”binary“这一类型，指的就是一些二进制文件类型。如application/pdf，指定了特定二进制文件的MIME类型。就像对于text文件类型若没有特定的子类型（subtype），就使用 text/plain。类似的，二进制文件没有特定或已知的 subtype，即使用 application/octet-stream，这是应用程序文件的默认值，一般很少直接使用 。

对于application/octet-stream，只能提交二进制数据，而且只能提交一个二进制数据，如果提交文件的话，只能提交一个文件，后台接收参数只能有一个，而且只能是流（或者字节数组）。

很多web服务器使用默认的 application/octet-stream 来发送未知类型。出于一些安全原因，对于这些资源浏览器不允许设置一些自定义默认操作，导致用户必须存储到本地以使用。一般来说，设置正确的MIME类型很重要。

即便是只上传一个文件，实践中也通常不用application/octet-stream，毕竟现在的浏览器没有不支持form-data的。

㈧ vue中使用axios上传文件

我看了下我之前写的几个代码，全都不是直接挂在在vue 原型上的，

而是写个apis.js 里面引入 引入

然后再把 这个js 挂在vue原型上

main.js

能不能直接挂载再vue 原型 我也不清楚，需要求证

㈨ ajax为什么要用formdata封装在提交数据

一般文件上传是使用form表单提交，通常我们提交（使用submit button）时，会把form中的所有表格元素的name与value组成一个queryString，提交到后台。这用jQuery的方法来说，就是serialize。
通过$('#postForm').serialize()可以对form表单进行序列化，从而将form表单中的所有参数传递到服务端。

但是上述方式，只能传递一般的参数，上传文件的文件流是无法被序列化并传递的。
不过如今主流浏览器都开始支持一个叫做FormData的对象，有了这个FormData，我们就可以轻松地使用Ajax方式进行文件上传了。
但是提交以后会有刷新。而且文件本身是一个二进制流。这时可以创建一个formData。然后append该文件，然后封装成一个对象，直接进行ajax提交就可以了
具体如下：
var formdata = new FormData();
formData.append('file', $('#file')[0].files[0]);
$.ajax({
url: '/upload',
type: 'POST',
cache: false,
data: formData,
processData: false,
contentType: false
}).done(function(res) {
}).fail(function(res) {});//向后台上传附件，传四个参数 postFile(parentNodeId, nodeId){ let param=new FormData();//创建 form对象 param.append('businessNo',projectNo); param.append('packageNo', "commonProject"); param.append("parentNodeId",parentNodeId); param.append("nodeId",nodeId); var uploadObject=event.target.files; console.log(uploadObject); var i; for( i in uploadObject){ param.append("file", uploadObject[i]); } //console.log(param.get('file'));//查看file,需要使用get方法,FormData私有类对象,访问不到,可以通过get判断值是否传进去 let config={ headers:{ 'Content-Type': 'multipart/form-data' } //添加表头，因为模拟form提交时，上传文件，需要 }; //this.fileList.push(e.target.files[0]); axios.post("/auditMgr/fileUp",param,config ).then((res)=>{ console.log(res.data); this.getuploadfile(); }) },