上传文件

<el-upload
  class="upload-demo"
  action="上传地址"
  :on-preview="handlePreview"
  :on-remove="handleRemove"
  :before-remove="beforeRemove"
  multiple
  :limit="3"
 :data="listData"
 accept=".doc, .docx, .xls, .xlsx, .csv"
  :on-exceed="handleExceed"
  :file-list="fileList">
  <el-button size="small" type="primary">点击上传</el-button>
  <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
</el-upload>

limit：限制上传个数

multiple：是否支持多选文件data：上传时需要携带的参数，如果是多个参数，则以对象的形式写在一个变量中，如：

listData：{

filename：‘’，

id：

}

具体属性可以在官网查看：

Element - The world's most popular Vue UI framework

如果需要对文件大小进行限制则需要绑定上传文件之前的钩子：before-upload

 // 上传文件之前
    beforeUpload(file) {
      this.formData.fileName = file.name
      let size10M = file.size / 1024 / 1024 < 30
      if (!size10M) {
        this.$message.warning('上传文件大小不能超过 30MB!');
        return false
      }
    },

accept：限制文件格式

删除文件：

  handleRemove(file, fileList) {
      // 删除文件成功
      let data = file.response.data   // 删除的文件
      this.FileVoList = this.FileVoList.filter(item => item !== data);   // 将此次删除的文件从我们保存的列表中删除掉
    },

上传成功保存到我们自定义的变量列表中：

 // 上传成功
    handlePreview(file) {
      this.FileVoList.push(file.data)
    },

上传文件达到限制：

 // 达到限制
    handleExceed(files, fileList) {
      this.$message.warning(`当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
    },

下载文件

 <a :href="filePath" download target="_blank">
          <span>文件名</span>
          <span>点击下载</span>
        </a>