山东大学项目实训审计系统（五）上传文件

2021-06-10 11:04:17 阅读：129 来源： 互联网

标签：文件 name testmsg 山东大学 fileList 实训 file 上传

文章目录

一、上传文件功能讲解

1.选用工具

选用EementUI库中的upload组件，选择理由是其有优美的过度动画，不需要自己再去处理
在这里插入图片描述

2.具体代码

要将文件上传到我们的后端地址，故这里只用到组件中的FileList数组，设置upload组件不自动上传文件，在选中文件后将文件加入FileList数组，点击提交按钮后将数组作为参数发送后端请求，在选择删除文件时将文件从FileList数组中清除

组件代码

 <el-upload
        ref="upload"
        action="/"
        :file-list="fileList"
        :auto-upload="false"
        :on-change="handleChange"//绑定文件改变事件
        :on-remove="handleRemove"//绑定删除文件事件
        accept=".doc,.docx,.pdf"
        style="height: 320px;width: 100%;overflow-y:auto;margin-left: 10px"
      >
        <el-button size="small" type="primary">点击上传</el-button>
        <div
          slot="tip"
          class="el-upload__tip"
          style="float: right;margin-right: 0px;font-size: 10px;font-weight: lighter;color: #a40002"
        >
        </div>
      </el-upload>
      <div style="text-align: center">
      <el-button
        type="primary"
        @click="TemplateUpload()"
        style="margin-top: 0px;"
        >上传模板</el-button
      >
    </div>

函数代码

//选中文件后判断文件类型，将正确文件加入fileList中等待上传
    handleChange(file) {
      // console.log(this.fileList);
      var testmsg = file.name.substring(file.name.lastIndexOf(".") + 1);
      const extension = testmsg === "docx";
      if (testmsg != "docx" && testmsg != "doc" && testmsg != "pdf") {
        this.$message({
          message: "上传文件只能是.doc/.docx/.pdf格式!",
          type: "warning"
        });
      } else {
        this.fileList.push(file);
      }
    },
    handleRemove(file) {
      this.fileList = this.fileList.filter(one => file.name !== one.name);
    },
    TemplateUpload() {
      if (this.fileList.length != 0) {
        this.$message.success("上传成功!");
        // alert("上传成功!");
        let formData = new FormData();
        this.fileList.forEach(file => {
          let newFile = file.raw;
          formData.append("files", newFile);
        });
        axios
          .post("https://baixx.site/api/template", formData, {
            headers: { token: sessionStorage.getItem("token") }
          })
          .then(res => {
            this.$emit("refresh_Template");
            this.close();
          });
      } else {
        this.$message.error("请选择上传的模板文件")
      }
    }

二、效果展示

在这里插入图片描述

标签：文件,name,testmsg,山东大学,fileList,实训,file,上传
来源： https://blog.csdn.net/xdl229/article/details/117770584

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9