Element-ui使用上传时弹框选择文件类型

实现效果

1,点击上传,上传文件;

2,选择文件;

3,弹框选择文件类型;

4,选择类型后确定上传;

一,上传

跳过;

二,定义弹框+下拉框

1,定义属性

javascript 复制代码
dialogVisible: false, //初始页面关闭弹框

2,定义弹框

el-autocomplete 组件在 input输入框中,'带输入建议';

dialogVisible:属性; @close="decisionTyoe(false)":点击×时调用关闭函数传入false,停止上传;

@click="decisionTyoe(false)":点击取消时调用关闭函数传入false,停止上传;

@click="decisionTyoe(true)":点击取消时调用关闭函数传入false,上传文件;

javascript 复制代码
    <el-dialog title="选择类型" :visible.sync="dialogVisible" @close="decisionTyoe(false)">
      <el-autocomplete class="feed-word-type" v-model="m_arrWordTypeValue"
                       :fetch-suggestions="doWordTypeValue"
                       @select="handleQueryWordType">
      <template slot="prepend">文件类型</template>
    </el-autocomplete>

      <span slot="footer" class="dialog-footer">
        <el-button @click="decisionTyoe(false)">取 消</el-button>
        <el-button type="primary" @click="decisionTyoe(true)">确 定</el-button>
      </span>
    </el-dialog>

3,函数定义

注意!!!一定要开启监听,原因是后续的方法需要根据监听来判断是否选择了文件类型(取消,确定)

javascript 复制代码
    decisionTyoe(flag){
      this.dialogVisible= false;
      // 开启监听
      this.$emit('dialog-closed', flag);
    }

4,下拉框框函数定义

javascript 复制代码
	//下拉框数据
    doWordTypeValue(queryString, cb) {
      var results = [{
        value: 'IOT',
        file_type: 1,
      }, {
        value: 'MCU',
        file_type: 2,
      }, {
        value: '时序',
        file_type: 3,
      }]
      // 调用 callback 返回建议列表的数据
      cb(results);
    },
    //选择下拉框
    handleQueryWordType(inItem){
      this.m_arrWordTypeValue = inItem.value;
      this.extraData.file_type = inItem.file_type;
    },

三,上传合并弹框

1,弹框选择要在上传后台前,所以要使用到 上传组件的before-upload属性(上传文件之前的钩子,参数为上传的文件,若返回 false 或者返回 Promise 且被 reject,则停止上传。)

javascript 复制代码
              <el-upload
                :action="m_uploadUrl"
                :auto-upload="true"
                :data="extraData"
                :show-file-list="false"
                :before-upload="doImportBefore"
                :on-success="doImportSuccess">
                <i class="el-icon-upload2">上传</i>
              </el-upload>

2,定义doImportBefore函数来选择上传文件与打开弹框

javascript 复制代码
    doImportBefore(inFile) {
      // 打开对话框
      this.dialogVisible = true;

      // 需要来进行等待用户弹框选择文件类型;
      // 使用Promise函数等待监听dialog-closed
      return new Promise((resolve, reject) => {
      	// 当用户点击了确定或取消时触发监听,
        this.$once('dialog-closed', (confirmed) => {
          if (confirmed) {
            console.log('用户点击了确认按钮');

            ///
			// 文件的逻辑处理
            let nPos = inFile.name.lastIndexOf('.');
            if (nPos < 0) {
              this.$message.error('支持的文件格式 => dat 或 bin');
              resolve(false);
              return;
            }
            let strExt = inFile.name.substring(nPos + 1);
            strExt = strExt.toLowerCase();

            if (strExt !== 'dat' && strExt !== 'bin') {
              this.$message.error('支持的文件格式 => dat 或 bin');
              resolve(false);
              return;
            }
            ///

            // 直接设置异步加载状态...
            this.m_bIsLoading = true
            resolve(true);
            return;
          } else {
            this.$message.error('用户取消了上传');
            reject(false);
            return;
          }
        });
      });

    }
相关推荐
LuciferHuang7 小时前
震惊!三万star开源项目竟有致命Bug?
前端·javascript·debug
GISer_Jing7 小时前
前端实习总结——案例与大纲
前端·javascript
天天进步20157 小时前
前端工程化:Webpack从入门到精通
前端·webpack·node.js
姑苏洛言8 小时前
编写产品需求文档:黄历日历小程序
前端·javascript·后端
知识分享小能手8 小时前
Vue3 学习教程,从入门到精通,使用 VSCode 开发 Vue3 的详细指南(3)
前端·javascript·vue.js·学习·前端框架·vue·vue3
姑苏洛言9 小时前
搭建一款结合传统黄历功能的日历小程序
前端·javascript·后端
你的人类朋友10 小时前
🤔什么时候用BFF架构?
前端·javascript·后端
知识分享小能手10 小时前
Bootstrap 5学习教程,从入门到精通,Bootstrap 5 表单验证语法知识点及案例代码(34)
前端·javascript·学习·typescript·bootstrap·html·css3
一只小灿灿10 小时前
前端计算机视觉:使用 OpenCV.js 在浏览器中实现图像处理
前端·opencv·计算机视觉