element ui自定义上传文件

自定义上传按钮，非自动上传，效果图

代码实现：

  <el-form-item label="数据制作文件">
                  <el-upload
                    class="upload-demo inline-block"
                    action="http://localhost:9080/5gso-backstage/soForm/uploadFile"
                    ref="upload"
                    :on-preview="handlePreview"
                    :on-exceed="handleExceed"
                    :on-success="fileSuccess"
                    :limit="1"
                    :on-change="handleChange"
                    :auto-upload="false"
                    accept=".csv"
                  >
                    <el-button slot="trigger" size="small" type="primary" style="margin-left: 5px">选取</el-button>
                    <el-button style="margin-left: 5px;" size="small" type="success" @click="submitUpload">上传
                    </el-button>
                  </el-upload>

主要是上传按钮增加click函数并且 :auto-upload=“false”，请求返回的结果可以通过:on-success属性，定义函数获得。函数部分代码如下：

 submitUpload() {
        this.$refs.upload.submit()
      },
      handleRemove(file, fileList) {
        console.log(file, fileList);
      },
      handlePreview(file) {
        console.log(file);
      },
      handleExceed(files, fileList) {
        this.$message.warning(`当前限制选择 1 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
      },
      handleChange(file) {
        this.filename = file.name;
      },
      beforeRemove(file) {
        return this.$confirm(`确定移除 ${file.name}？`);
      },
      fileSuccess(res) {
        if (res.msg == "success") {
        
          this.$message({
            type: "success",
            message: "上传成功!"
          });
        } else {
          this.$message.error("上传失败！");
        }
      },

最后

以上就是聪明冰棍为你收集整理的element ui自定义上传文件的全部内容，希望文章能够帮你解决element ui自定义上传文件所遇到的程序开发问题。

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