element之upload组件

最近做项目的附件上传，前端vue用到element的上传，记录下以备不时之需

单个文件上传的HTML。

下面为js脚本

export default {
  name: "schemeList",
  data() {
    return {
      loading: false,
      attachList:[],
      attachmentList: [],
      viwMode: "add",
      tableHeight: 160,
      uploadUrl: "/upload",
      form: {
        file: ""
      },
      fileList: [],
      importHeaders: {
        enctype: "multipart/form-data"
      },
    };
  },
  watch: {},
  computed: {},
  created: function() {},
  mounted: function() {
  },
  methods: {
    fileChange(file) {
      this.form.file = file.raw;
      this.fileList.push(file.raw); //上传文件变化时将文件对象push进files数组
      //alert(file.raw);
    },
    handleProgress(event, file, fileList) {
      alert("in progress");
    },
    submitUpload() {
      let that = this;
      debugger;
      if(that.form.file==null || that.fileList.length == 0){
         that.$message.info("请选择要上传的文件！");
        return;
      }

      that.loading=true;
      let formData = new FormData();
      formData.append("file", that.form.file); //单个文件
      that.$axios
        .post(that.uploadUrl, formData, {
          "Content-Type": "multipart/form-data"
        })
        .then(res => {
          that.$refs.upload.clearFiles();
          that.fileList = [];
          that.$message.success(res.data);
          console.log(res);
        })
        .catch(err => {
          that.$message.error(err.data);
          console.log(err);
        });
    },
    handleRemove(file, fileList) {
      this.$refs.upload.clearFiles();
      this.fileList = [];
      console.log(file, fileList);
    },
    handlePreview(file) {
      alert(file);
      console.log(file);
    }
  }
};

yml文件配置