el-upload上传组件使用笔记

element的上传组件能够很方便快捷美观地实现上传，在此对使用过的属性做一下笔记

例子：这是一个拖拽上传的demo

<el-upload
	class="upload-demo"
	ref="upload"
	drag
    :action="uploadFile()"
	:data="checkData"
	:file-list="fileList"
	accept=".pdf"
	style="text-align: center"
	:auto-upload="false"
	:limit="1"
	:on-change="checkFile"
	:on-success="saveFileDetail">
	<i class="el-icon-upload"></i>
<div class="el-upload__text">
	将文件拖到此处，或
	<em>点击上传</em>
</div>
<div class="el-upload__tip" slot="tip">只能上传pdf文件，且不超过100mb</div>
</el-upload>

1. action----此属性用来设置上传的后端接口地址，可使用绑定回调来设置。
   例如：

uploadFile: function() {
      return 'http://localhost:8081/file/uploadOss'
    },

2、data—此属性用来绑定在向后端传递文件时附上的其他信息
例：
前端数据设置：

checkData: {
        md5: ''
      }

后端接收：

CommonResponse<FileVo> uploadOss(
    @RequestParam("file") MultipartFile file, 
    @RequestParam("md5") String bidMd5) {
	/*
		弊端：未接收请求头
		具体代码内容
	*/
}

3、file-list—绑定上传的文件列表

4、accept—可限制选择文件时显示的文件类型，但只限于显示，如果选择所有文件还是可以选择指定文件类型外文件，因此还需在选择文件后做一个判断（顺带在选中文件且文件合法时生成文件校验码随文件传到后端
例子：

// 检查文件是否合法，符合条件即不超过500mb的投标pdf文件
    checkFile(file, fileList) {
      var FileExt = file.name.replace(/.+\./, '')
      // 正则表达式的意思是至少出现一次字符加上反义.的字符串，也就是将后缀前的文件名以及.替换为空
      if (['pdf'].indexOf(FileExt.toLowerCase()) === -1) {
        this.$message({
          type: 'warning',
          message: '请上传后缀名为pdf的附件！'
        })
        // 清空
        this.fileList = []
        return false
      } else if (file.size > 100 * 1024 * 1024) {
        this.$message({
          type: 'warning',
          message: '上传附件不能大于100mb！'
        })
        this.fileList = []
        return false
      } else {
      // 下面是做了一个md5的校验码进行校验
        console.log('handleChange')
        const _this = this
        var fileReader = new FileReader()
        //此处打印file可看到file下的raw为文件属性
        var dataFile = file.raw
        var spark = new SparkMD5.ArrayBuffer()
        //获取文件二进制数据
        fileReader.readAsArrayBuffer(dataFile)
        //异步执行函数
        fileReader.onload = function(e) {
          spark.append(e.target.result)
          var md5 = spark.end()
          console.log('md5')
          console.log(md5)
          _this.checkData.md5 = md5
        }
        console.log('fileList----------')
        console.log(fileList)
      }
    },

5、auto-upload—是否在选中文件后自动上传文件，默认为true
可在确定提交按钮重定向提交函数

uploadSubmit() {
      this.$refs.upload.submit()
      // 
    },

6、limit—设置限制上传文件数
7、on-change—选中文件后的回调函数
8、on-success—上传文件成功后的回调函数，会返回后端响应参数