zoukankan      html  css  js  c++  java
  • el-upload 手动上传文件

    <el-upload
            style="display: inline"
            ref="upload"
            :show-file-list="false"
            :on-success="onSuccess"
            :on-error="onError"
            accept=".csv,.xls,.xlsx"
            :before-upload="beforeUpload"
            :on-change="handleChange"
            :auto-upload="false" //禁止文件自动上传
            action="..........">  //文件上传的后端地址
            <!-- :auto-upload="false" -->
            <el-button slot="trigger" size="small" type="primary" style="margin-top: 10px">选择文件</el-button>
            <el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload">上传文件</el-button>
            <!--<el-button size="mini" type="success" >导入</el-button>-->
          </el-upload>
    
    //选择文件并显示文件名/文件大小/状态 等      
    handleChange(file, fileList) { this.oploadfileList = []; let size = file.size; if(size < 0.1 * 1024){ //小于0.1KB,则转化成B size = size.toFixed(2) + "B" }else if(size < 0.1 * 1024 * 1024){ //小于0.1MB,则转化成KB size = (size/1024).toFixed(2) + "KB" }else if(size < 0.1 * 1024 * 1024 * 1024){ //小于0.1GB,则转化成MB size = (size/(1024 * 1024)).toFixed(2) + "MB" }else{ //其他转化成GB size = (size/(1024 * 1024 * 1024)).toFixed(2) + "GB" } let name = file.name; let type = name.substring(name.lastIndexOf('.')+1);//文件后缀名 // console.log(name,size) this.oploadfileList.push({file_name: name, file_size: size,file_jindu: '100%',file_zhuangtai:'已上传',file_caozuo:'此不可逆操作'}); // console.log(fileList) // this.fileData = new FormData() // var that = this this.fileList = fileList; this.fileData.append('file', file); },
    //上传文件
          submitUpload(file, fileList) {
            this.$refs.upload.submit();
          },
    
    //文件上传成功后
    onSuccess(response, file, fileList) { // console.log(file) // console.log(response) this.uploadBtnIcon = 'el-icon-upload2'; this.btnText = '数据导入'; if (response.code === 0) { let _this=this; // 定义预存变量 setTimeout(function(){ _this.$message({ message: '批量操作成功', type: 'success' }); _this.dialogVisible2 = false; },3000); } else { this.$message({ message: response.message, type: 'error' }) } this.orderInfos() },

      

  • 相关阅读:
    模拟登陆+数据爬取 (python+selenuim)
    matplotlib基本使用(矩形图、饼图、热力图、3D图)
    tensorflow进阶篇-4(损失函数1)
    CS231n学习笔记-图像分类笔记(下篇)
    CS231n学习笔记-图像分类笔记(上篇)
    numpy 基本使用1
    tensorflow基础篇-2
    tensorflow进阶篇-3
    tensorflow基础篇-1
    自定义滚动条第一版
  • 原文地址:https://www.cnblogs.com/moguzi12345/p/12870657.html
Copyright © 2011-2022 走看看