elementUI上传功能实战心得

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

一. 基础用法

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

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

<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是可以实现这个功能的。

二. 自定义上传方法

 

<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处理。