今天来看一下如何在vue+element-ui的项目中成功上传文件给后台服务器

<el-upload
            class="upload-demo"  
            ref="upload"  // ref给节点命名
            :limit="1" //limit显示上传的数量
            accept=".xls, .xlsx"  //accept选择接受文件的种类
            :before-upload="beforeUpload"  //before-upload文件上传成功之前的回调函数可以返回为false可以阻止文件上传
            :action="$store.state.baseUrl.api + '/monitor/device/channel/importChannelList'"  //后台接收的地址
            :file-list="fileList"  //上传文件的列表
            :on-success="uploadSuccessed" // 成功之后的回调函数
            :on-error="uploadFailed" //发生错误的回调函数
            :auto-upload="false"  //是否自动上传
          >

在before-update中我需要进行的操作

beforeUpload(file) {
      let formData = new FormData();    //创建一个表单对象，固定格式
      formData.append("file", file);  //在表单中加入要上传的文件
      axios
        .post("/monitor/device/channel/importChannelList", formData)  //发送请求看是否成功
        .then(res => {
          if (res.data.code == 200) {
            this.$message({
              type: "success",
              message: "上传成功！"
            });
          } else {
            this.$message.error(res.data.message);
          }
        })
        .catch(err => {
          console.log(err);
        });

      return false;  //这儿我默认返回的失败
    },

在成功之后on-success中

if (res.code == 200) {
        this.$message({
          type: "success",
          message: "文件上传成功！"
        });
        // 关闭对话框并清空
        this.leadTo = false;
        this.fileList = [];
      } else {
        this.$message.error(res.message);
        // 关闭对话框并清空
        this.leadTo = false;
        this.fileList = [];
      }

如果没有设置自动上传我们就需要手动提交

this.$refs.upload.submit() //在对应的点击事件中设置upload是对应节点的名字