如何点击组件的el-button按钮触发的是原生的input上传文件的方法

有一个上传本地文件的功能，老大觉得原生的上传文件样式不好看，想让我使用组件的el-upload上传文件方法，可是原生input,type="file"代码已经写完了，我就灵机一动，可不可以使用组件的样式来触发原生input上传的方法，果然，一试可以，代码如下：

 <el-form-item label="附件：" class="floatLeft">
          <el-button
            size="mini"
            type="primary"
            class="button"
            @click="goFile"
          >
            <i class="el-icon-upload2"></i>上传</el-button
          >
          <input
            type="file"
            style="display: none;"
            id="file"
            ref="files"
            @change="upload"
          />
        </el-form-item>

methods(){
 // 点击上传文件触发input文件
    goFile() {
      this.$refs.files.click();
    },
    //上传文件oss接口
    upload() {
      const loading = this.$loading({
        lock: true,
        text: "文件上传中...",
        spinner: "el-icon-loading",
        background: "rgba(0, 0, 0, 0.7)",
      });
      var fileObj = document.getElementById("file").files; // js 获取文件对象
      var form = new FormData();
      form.append("file", this.file);
      if (fileObj.length != 0) {
        var i = fileObj.length;
        this.counts = i;
        var that = this;
        for (var j = 0; j < i; j++) {
          (function (i) {
            form.append("file", fileObj[i]); // 文件对象
          })(j);
        }
      }
      this.$posts("/ap/pcmin/hr/remes/upload", form).then((res) => {
        // console.log(res, "文件上传成功");
        loading.close();
        this.url = res.url;
        // 去调新增文件接口
        var addfile = {
          folders_id: this.folders_id,
          url_path: this.url,
        };
        this.$posts("/api/pcadmin/hr/files", this.encode(addfile)).then(
          (res) => {
            // console.log(res, "新增文件成功了");
            if (res.success == true) {
              this.search();
              this.$notify({
                title: "成功",
                message: res.data,
                type: "success",
                duration: 5000,
              });
            } else {
              this.$notify.error({
                title: "提示",
                message: res.data,
              });
            }
          }
        );
      });
    },
}

最后

以上就是典雅柚子为你收集整理的如何点击组件的el-button按钮触发的是原生的input上传文件的方法的全部内容，希望文章能够帮你解决如何点击组件的el-button按钮触发的是原生的input上传文件的方法所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。