js前端上传详解

最新推荐文章于 2024-08-10 23:14:08 发布

niuge No.1

最新推荐文章于 2024-08-10 23:14:08 发布

阅读量243

点赞数

分类专栏： web 文章标签： javascript

本文链接：https://blog.csdn.net/niuge8905/article/details/120812680

版权

web 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

经常使用element ui的upload做上传，很好奇原生的怎么实现，今天尝试了下。

首先是使用input，type使用file

        <el-button
          type="warning"
          plain
          icon="el-icon-download"
          size="mini"
          @click="doUpload"
          >上传</el-button
        >
        <input id="filePath" name="filePath" v-show="false" type="file" />

然后是实现上述两个方法

doUpload() {
      const fileNode = document.getElementById("filePath");
      fileNode.addEventListener("change", this.uploadFile);
      fileNode.click();
    },
    uploadFile() {
      var formData = new FormData();
      const fileNode = document.getElementById("filePath");
      if (fileNode.files[0] === null) {
        this.$modal.msgSuccess("请先选择文件路径");
        return false;
      }
      formData.append("fileName", fileNode.files[0].name);
      formData.append("file", fileNode.files[0]);
      addFile(formData).then(() => {
        this.getList();
        this.$modal.msgSuccess("文件添加成功");
        fileNode.removeEventListener("change", this.uploadFile);
      });
    }

文件上传的接口使用若依的接口：

后台手册 | RuoYi