zoukankan      html  css  js  c++  java
  • element ui

    1. 不立即上传,通过点击登录按钮后上传文件和参数

    <el-upload
                style="float: left"
                ref="upload"
                action="#"
                accept=".csv"
                :file-list="fileList"
                :auto-upload="false"
                :on-change="handleChange"
              >
                <template #trigger>
                  <el-button type="primary"
                    ><i class="el-icon-document"></i
                    ><span class="icon-title">参照..</span></el-button
                  >
                </template>
                <el-button class="login-left" type="danger" @click="handleUpload"
                  ><i class="el-icon-edit"></i
                  ><span class="icon-title">登録</span></el-button
                >
              </el-upload>

    2. onChange 事件 把文件赋值给变量,点击上传把文件变量append 到formdata 中

    const handleChange = (file, fileList) => {
          if (fileList.length > 1) {
            fileList.splice(0, 1);
          }  // 每次上传显示的都是当前的,只能有一个(不用limit来限制了)
          files.value = file.raw; // 把文件赋值给变量
        };
    
    
     const handleUpload = () => {
        // 把文件和参数 append 进去 const data
    = new FormData(); data.append("file", files.value); data.append("BrokerId", dataForm.brokerCd); data.append("TradeServiceId", dataForm.tradeServiceCd);
    getLogin(data).then((data)
    => { // 上传文件的接口url if (data.code === 20000) { proxy.$http.msgSuccess(proxy.$http.msg("I_COM_0006")); proxy.$refs.upload.clearFiles(); // 上传后清空文件 } }); };
  • 相关阅读:
    使用Vue.extend来动态创建组件
    SKU
    城市选择
    面试题整理
    清除本域名Cookies
    vue 使用腾讯IM即时通信
    路由重复加载报错的问题
    Vue 、H5音乐播放器播放音乐
    Android 开发实用方法大全
    Android 欢迎界面淡入效果并用WebView加载网址
  • 原文地址:https://www.cnblogs.com/rabbit-lin0903/p/14767812.html
Copyright © 2011-2022 走看看