vue 使用element-ui的el-upload httprequest实现上传文件到后台的功能

之前做上传，参考element UI的官方示例，使用action属性，action是上传的地址。

这次做的项目，换了一个后端对接，说，上传不需要调用接口，我懵了，我寻思示例不都是使用了action嘛，经过一番了解，upload组件还提供了http-request覆盖默认上传行为。

elementUI 的upload组件的http-request方法的使用

http-request有个默认的参数：content

content是一个object对象：里面包含一些upload组件的回调方法，可以使用upload组件原生的方法。

下面记录下具体使用方法，很简单

1、

:action是必不可少但是却没什么作悄颤用的

:http-request可以覆盖默认的上传方法

2、我配置中兄的:action的值（就是官方文档示卖运袭例的值）

3、:http-request函数内容，将上传成功的文件保存到mode里面，mode是自己在data里面定义的变量，初始值是mode:{}

4、上传按钮的点击事件

5、上传成功，后台可以读取到数据

包括action 和 http-request两种方式

上传成功回调方法 绑雹闹定 handleSuccess 方法

自定义上传相比action上传，扩展性更强，当项目里上传需求较多，且连接不同接口地址时，配置uploadheaders 配置很多显然不太优雅。

注意：自定义上传时，需要对该上传设置一下枯缓请求头 。 在拦截器源败罩里设置请求头

自定义上传的触发方式 ，点击确定时在 importUser 里执行，执行这句即是执行uploadFile方法

注意： formdata打印不出来，实际有值

result你是用什么方首知法读凳陵取出来的？

readAsBinaryString还是readAsText，目测这会影响二进制文件的读取的。

如果readAsBinaryString：

可以设置一下xhr.responseType="blob"，把result封装到blob里头在发送出去试试，好像还可以是是arraybuffer。搜索一下“XMLHttpRequest blob”

FileReader和xhr打交道还没有正式遇见过，以前只弄过filesystem。

如果还是不行，就全部发文本得了，FileReader的readAsDataURL里面就是base64编码后的数据了，取出来发给服枣芹戚务器解码，用普通的post就能完成，小数据用get也无压力。

---