用element如何在vue中上传文件

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

在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是对应节点的名字