Element-UI的upload组件实现文件的上传

一.上传文件

<el-upload
  class="upload-demo"
  action="https://jsonplaceholder.typicode.com/posts/" //需要上传的地址
  :on-remove="handleRemove"  //文件列表移除文件时的钩子
  :show-file-list="false" //是否显示上传的文件
  //删除文件之前的钩子，参数为上传的文件和文件列表，若返回 false 或者返回 Promise 且被 reject，则停止删除
  :on-success="handleAvatarSuccess" //成功时调用的方法
  :on-error="" //失败时调用的方法
  multiple
  :limit="3" //上传的文件数量
  :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>
<script>
  export default {
    data() {
      return {
          //上传的图片，名称，地址
        fileList: [{name: 'food.jpeg', url:  'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'}, {name: 'food2.jpeg', url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'}]
      };
    },
    methods: {
      handleAvatarSuccess(res, file) {
         //成功时调用的方法
        this.imageUrl = URL.createObjectURL(file.raw);
      },
      handleExceed(files, fileList) {
          //文件超出个数限制时,提示弹框
        this.$message.warning(`当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
      },
      beforeRemove(file, fileList) { 
          //是否删除文件
        return this.$confirm(`确定移除 ${ file.name }？`);
      }
    }
  }
</script>

二.跨域问题的解决,文件类型的修改

//跨域问题解决
action="https://jsonplaceholder.typicode.com/posts/"  
//跨域的地址
:headers="token"  //请求头绑定的token，以对象的方式

token: {
   Authorization: "Bearer " + localStorage.getItem("adminToken") // 直接从本地获取token就行
}

//修改文件数据类型
accept=".xls,.xlsx"

三.常用属性

    action: 是请求后端接口的路径 （必填的）
    header: 是配置请求头的 / 在此处带了token
    on-change: 文件状态改变时的钩子，添加文件、上传成功和上传失败时都会被调用
    on-remove: 是文件列表中移除文件时执行的
    before-remove: 删除文件之前执行的，可以用作提示用户二次确认删除
    limit: 是上传文件的个数
    auto-upload: 是控制是否自动上传的
    on-exceed: 上传文件个数超过限制的时候执行的