vue+el-upload实现文件上传

vue+el-upload实现文件上传：

项目中遇到过需要文件上传的情况，在此简单举例单文件上传方法。

---

步骤：

首先了解element中的el-upload组件，本次代码选择在选取文件后自动上传的方式。

1、 搭建文件上传组件
（accept=".xlsx, .xls"限制了只能选择excel文件）
（ :http-request="uploadHttpRequest"是自定义上传方法）
（ :limit="1"限制选择一个文件）
（:on-remove="handleRemove"文件列表移除文件时方法）

 			<el-upload
              ref="uploadplan"
              class="upload-demo"
              action=""
              accept=".xlsx, .xls"
              :on-remove="handleRemove"
              :http-request="uploadHttpRequest"
              :limit="1"
              :file-list="fileList"
            >
              <el-button type="primary" size="small">
                上传
              </el-button>
            </el-upload>

2、 在data中声明文件上传列表

  
 data() {
    return {
      fileList: [],//上传的文件列表
      }
    }

3、 自定义上传方法
------------------注意看代码后的注释------------------

 methods: {
  //自定义上传方法
    uploadHttpRequest(param) {
      console.log(param.file);//查看是否选取到文件
      let formData = new FormData(); //FormData对象，添加参数只能通过append('key', value)的形式添加
      formData.append("id", this.tid);//添加id（这里是项目需要，根据个人情况选择是否添加）
      formData.append("xxxFile", param.file); //添加文件对象
      this.$axios.post("这里写接口地址",formData,{
           headers: {
              "Content-Type": "multipart/form-data",//配置header，我们上传的文件编码格式就是multipart/form-data
            },
        }).then((res)=>{
          console.log(res)
        })
    },


 	//  文件列表移除文件时的钩子
    handleRemove(file, fileList) {
      this.$message.warning("文件已移除");
    },

 }

如有不足欢迎指出。