在vue中实现文件的上传

vue+element实现文件上传

我们这里使用element-ui中的upload组件来实现文件的上传下载（https://element.eleme.cn/#/zh-CN/component/upload#shou-dong-shang-chuan）,这里我们以excel文件为例

<el-upload
         class="upload-demo"
         ref="upload"
         :limit="1"
         :before-upload="beforeUpload"
        accept=".xls,.xlsx"    //限制选择文件的格式
      >
         <el-button
          class="btn"
          slot="trigger"
          size="small"
          type="primary"
          style="margin-right: 20px"
        >导入模板</el-button>

      </el-upload> 

 beforeUpload(file) {
      // console.log(file,'文件');
      this.files = file;
      const extension = file.name.split(".")[1] === "xls";
      const extension2 = file.name.split(".")[1] === "xlsx";
      const isLt5M = file.size / 1024 / 1024 < 5;
      if (!extension && !extension2) {
        return;
      }
      if (!isLt5M) {
        return;
      }
      this.fileName = file.name;
      setTimeout(() => {
        this.submitUpload();
      }, 500);
      return false; // 返回false不会自动上传
    },

    // 上传文件
    submitUpload() {
      if (this.fileName == "") {
        this.$message.warning("请选择要上传的文件！");
        return false;
      }
      let fileFormData = new FormData();
      var json = { id: "123" };
      fileFormData.append("json", JSON.stringify(json));
      //filename是键，file是值，就是要传的文件，test是要传的文件名
      fileFormData.append("file", this.files);
      let requestConfig = {
        headers: {
          "Content-Type": "multipart/form-data;charset=UTF-8"
        }
      };
      // 执行上传文件
      let id = "";
      this.$http
        .post("url", fileFormData, requestConfig)
        .then(resp => {
          if (resp.data.status != 200) {
          } else {
            id = resp.data.result[0].attachmentId;
          }
        })