elementUI上传功能实战心得

    最近产品添加了上传文件的功能，我也是刚开始做有关上传的东西，所以这两天收获蛮多，在博客中记录一下心得。

一. 基础用法

    饿了么在官网把基础用法的API 和示例写的很清楚，这里为节约获取有效资源的时间，不再赘述，只做补充。

  首先，不要被这句“只能传咘啦咘啦”的给骗了，我刚开始就是被这句话迷惑，去找了其他插件，结果由于文档不详细，又换了回来。其实从某种方面来说，文件上传时没有差别的，所以放心取用吧，这里的只能上传指的是由你限定的文件格式，可以通过accept做限制，accept接收各种格式的后缀名，用逗号隔开，action为文件上传到的地址，limit指同时下载数，:auto-upload="true"指此时是自动上传的，还有一大堆的触发事件，官网上有，很容易理解。

[code]<el-upload class="upload-demo"
ref="upload"
action="https://jsonplaceholder.typicode.com/posts/"
accept=".pdf,.PDF"
:limit="1"
:auto-upload="true">
<el-button slot="trigger" size="small" type="primary">选取文件
</el-button>
</el-upload>

    然而这种方法有个问题，就是如果你除了上传这个文件外还要传一些信息，比如填写的上传人，选择的文件类型等，需要调用两次接口，而处于性能的考虑，后端可能只允许你调用一个接口把这些信息都传过去。这时候你可能就懵了，官网对于这种方法也并没有说的很仔细，其实element是可以实现这个功能的。

二. 自定义上传方法

[code]<el-upload
class="upload-demo"
ref="upload"
action=""    //这里可以随机填，但必须要有
:http-request="requestFile"
accept=".pdf,.PDF"
:limit="1"
:on-change="handlePreview"
:file-list="fileList"
:auto-upload="false">
<el-button slot="trigger" size="small" type="primary">选取文件</el-button>
</el-upload>

<script>
export default {
data() {
return {
fileList: [],
}
},
methods: {
handlePreview(file) {
// console.log(file)
this.temp.pdf_file = file.raw
console.log(this.temp)
},
requestFile(param) {
var fileObj = param.file
console.log(fileObj)
this.file = fileObj
var FileController = this.uploadUrl    // 接收上传文件的后台地址
var form = new FormData()    // FormData 对象
form.append('pdf_file', fileObj)    // 文件对象
// form.append('xxx', 'xxx')    // 其他参数
var xhr = new XMLHttpRequest()    // XMLHttpRequest 对象
xhr.open('post', FileController, true)
xhr.send(form)
console.log(this.fileList)
},
}
}

        :on-change为文件改变时的钩子，即你点击选取文件时触发，在这里触发handlePreview这个事件，参数file可以找到这个文件，file.raw可以找到这个文件的文件流，我们需要获取到这个数据，传给后端，:http-request是自定义上传最重要的方法，可以覆盖默认的上传行为，使自定义上传的实现。需要注意的是文件流需要先用new FormData()和append处理。