文件上传有两种方式upload

文件上传有两种方式

1.基于文件处理为文件流然后然后传给服务器，这个我们一般是用form-data来处理的，我们把文件流信息放到form-data里面，把form-data传给我们的服务器。然后服务器拿到form-data相关的数据做处理。

2.客户端需要把文件转化为base64位，转化为base64然后传给服务器，服务器在转化为文件

VUE elementUI 表单上传

在项目开发需求中基于VUE + elementUI在表单实现多张图片和Excel文件上传的需求。

1.图片上传模板

2、常用方法介绍

1、在实现自定义上传的:auto-upload设为"false"时before-upload将会无效，此时如要验证文件类型或者大小此处使用on-change的方法，在on-change方法中判断图片类型、大小，如果符合要求加入到pthotoLists中，不符合则移除

2、表单点击提交进行验证以及文件自定义上传将文件通过参数传递

1、将form表单元素的name与value进行组合，实现表单数据的序列化，从而减少表单元素的拼接，提高工作效率

3、通过append方法进行添加文件和数据

4、pPostFile为接口提交方式相当于axios

action为 提交的地址（接口名称）

formDataObj为表单中提交的所有参数（内容）

hearder即为header中需要的参数

接收双方所携带的数据类型。

jQuery的ajax方法和post方法分别发送请求，在后台Servlet进行处理时结果是不一样的，比如用$、ajax方法发送请求时(data参数是一个JSON、stringify()处理后的字符串，而不是一个JSON对象)，servlet里可以这样使用Gson来解析：newJsonparser()、parse(request、getReader())。

但此时是不可用request、getParam(key)来取值的。如果用$、post方法来发送请求(data参数是一个JSON对象，而不要再用JSON、stringify()处理为字符串了)，结果恰恰相反。在Chrome中调试发现，$、ajax发送的请求显示在requestpayload下面，而使用$、post方法发送的请求显示在formdata下面。关键就是设置Content-type这个Header为application/x-www-form-urlencoded，实际上对于常规的HTML页面上的form的Content-type默认就是这个值。

这里要注意post请求的Content-Type为application/x-www-form-urlencoded，参数是在请求体中，即上面请求中的FormData。在servlet中，可以通过request、getParameter(name)的形式来获取表单参数。

最近接到一个需求，需要统计页面的相关数据，并进行上报，本文就介绍一下数据上报的一些方法。

此时进行数据上报，只需要在页面 load 时上报即可。

此时进行数据上报，只需要在页面 beforeunload 时上报即可。

如果是这种情况，可以在 visibilitychange 时通过读取 document.visibilityState 或 document.hidden 区分页面 tab 的激活状态，判断是否需要进行上报。

我们可以直接将数据通过 ajax 发送到后端，以 axios 为例。

但这种方法有一个问题，就是在页面卸载或刷新时进行上报的话，请求可能会在浏览器关闭或重新加载前还未发送至服务端就被浏览器 cancel 掉，导致数据上报失败。

我们可以将 ajax 请求改为同步方法，这样就能保证请求一定能发送到服务端。由于 fetch 及 axios 都不支持同步请求，所以需要通过 XMLHttpRequest 发送同步请求。

这里要注意的是，将请求改为同步以后，会阻塞页面关闭或重新加载的过程，这样就会影响用户体验。

我们可以通过在 beforeunload 事件处理器中创建一个图片元素并设置它的 src 属性的方法来延迟卸载以保证数据的发送，因为绝大多数浏览器会延迟卸载以保证图片的载入，所以数据可以在卸载事件中发送。

此时服务端可以返回一个 1px * 1px 的图片，保证触发 img 的 onload 事件，但如果某些浏览器在实现上无法保证图片的载入，就会导致上报数据的丢失。

为了解决上述问题，便有了 navigator.sendBeacon 方法，使用该方法发送请求，可以保证数据有效送达，且不会阻塞页面的卸载或加载，并且编码比起上述方法更加简单。

用法如下：

url 就是上报地址，data 可以是 ArrayBufferView ， Blob ， DOMString 或 Formdata ，根据官方规范，需要 request header 为 CORS-safelisted-request-header ，在这里则需要保证 Content-Type 为以下三种之一：

我们一般会用到 DOMString , Blob 和 Formdata 这三种对象作为数据发送到后端，下面以这三种方式为例进行说明。

如果数据类型是 string ，则可以直接上报，此时该请求会自动设置请求头的 Content-Type 为 text/plain 。

如果用 Blob 发送数据，这时需要我们手动设置 Blob 的 MIME type，一般设置为 application/x-www-form-urlencoded 。

可以直接创建一个新的 Formdata ，此时该请求会自动设置请求头的 Content-Type 为 multipart/form-data 。

注意这里的 JSON.stringify *** 作，服务端需要将数据进行 parse 才能得到正确的数据。

我们可以使用 sendBeacon 发送数据，这一方法既能保证数据可靠性，也不影响用户体验，如果浏览器不支持该方法，则可以降级使用同步的 ajax 发送数据。

---