ElementUI实现手动上传

最新推荐文章于 2024-05-22 11:23:12 发布

前端杨小白

最新推荐文章于 2024-05-22 11:23:12 发布

阅读量8.9k

点赞数 2

分类专栏： ElementUI 文章标签： vue 文件上传 elementUI

本文链接：https://blog.csdn.net/yangwqi/article/details/101520826

版权

ElementUI 专栏收录该内容

31 篇文章 3 订阅

订阅专栏

目录导航

目的

点击上传按钮是只是本地展示上传信息点击确定按钮时调用上传接口实现上传功能

实现方案

ElementUI的上传有auto-upload属性 :是否在选取文件后立即进行上传
ElementUI的上传自带submit方法 :手动上传文件列表

H5代码块

<el-button size="mini" type="primary" @click="uploadOpen" >
 上传测试文件
</el-button>
<!-- 弹框 -->
<el-dialog
  title="上传测试文件"
  :visible.sync="uploadVisible"
  width="60%"
  :close-on-click-modal="false"
>
  <el-form ref="uploadform" 
  	:model="uploadform" 
  	label-width="110px" 
  	:label-position="labelPosition" 
  	size="small"
  >
    <el-form-item label="上传测试文件" prop="docType.crFile" ref="crFile">
      <el-upload
        ref="doctypeCrfile"
        :file-list="uploadform.docType.crFile"
        :data="{text:'测试数据'}"
        :auto-upload="false"
        :action="apis.url"
        :on-preview="handlePreview"
        :on-remove="handleRemove"
        :before-remove="beforeRemove"
         multiple
        :limit="9999"
        :on-exceed="handleExceed"
        :on-success="handleSuccess"
      >
        <el-button size="mini" type="primary">点击上传</el-button>
      </el-upload>
    </el-form-item>
  </el-form>
  <span slot="footer" class="dialog-footer">
    <el-button size="mini" type="primary" @click="uploadConfirm">确 定</el-button>
    <el-button size="mini" @click="uploadVisible= false">关 闭</el-button>
  </span>
</el-dialog>

JS代码块

export default {
  data() {
    return {
      uploadVisible: false,
      labelPosition: "left",
      uploadform:{
        docType: {
          crFile: []
        }
      },
    }
  },
  methods: {
    uploadOpen(){
      var vm = this;
      vm.uploadform.docType.crFile=[];
      vm.uploadVisible= true;
    },
    handlePreview(file) {
      var fileUrl = library.isEmpty(file.url) ? file.response.url : file.url;
      fileUrl = fileUrl.indexOf(apis.api_file_urlNew) >= 0 ? fileUrl : (apis.api_file_urlNew + fileUrl);
      window.open(fileUrl);
    },
    handleRemove(file, fileList) {
      console.log(file, fileList);
      for (var i = 0; i < this.fileList.length; i++) {
        if (this.fileList[i].uid == file.uid) {
          this.fileList.splice(i, 1);
          break;
        }
      }
    },
    handleExceed(files, fileList) {
      this.$message.warning(`最多上传 ${this.limit} 个文件`);
    },
   	beforeRemove(file, fileList) {
      if (this.Qualified == "") {
        return this.$confirm(`确定移除 ${file.name}？`);
      } else if (this.Qualified == "1") {
        return true;
      }
    },
    // 上传测试文件
    uploadConfirm(){
      var vm = this;
      vm.$refs.doctypeCrfile.submit();
    },
    handleSuccess(response){
      if(response.code==200){
        this.$message.success('上传成功');
        this.uploadVisible=false;
      }
    },
  }
}