vue 文件上传 el-upload（单个文件）

最新推荐文章于 2024-06-18 22:00:29 发布

@AfeiyuO

最新推荐文章于 2024-06-18 22:00:29 发布

阅读量437

点赞数 1

分类专栏：项目小功能总结文章标签： vue

本文链接：https://blog.csdn.net/xfy991127/article/details/136877882

版权

项目小功能总结专栏收录该内容

10 篇文章 0 订阅

订阅专栏

本文介绍了如何在ElementUI中使用`el-upload`组件实现文件导入，通过`http-request`调用接口，根据不同情况设置URL，并处理上传文件和响应结果的处理。

摘要由CSDN通过智能技术生成

小功能剪切：

1、复制组件库组件

其他属性请查看组件库：https://element.eleme.cn/#/zh-CN/component/upload

:http-request   //导入数据的方法（接口）

<el-upload ref="upload" action="" :http-request="importData" :auto-upload="true" :show-file-list="false">
   <el-button size="medium" class="search-btn">
        <i class="el-icon-download"></i>
        导 入
    </el-button>
</el-upload>

2、实现方法

importData(file) {
      let me = this;
      let url = '';
      switch (me.type) {
        case '行业财会监督人才库':
          url = 'XXX';
          break;
        case '师资库':
          url = 'XXX';
          break;
        case '资深会员':
          url = 'XXX';
          break;
        default:
          break;
      }
      if (!url) return;
      const from = new FormData();
      from.append('multipartFile', file.file);//把上传的文件对象传进去，下面展示数据大家查看
      me.$axios({
        url: url,
        method: "post",
        data: from,
        headers: {
          "Content-type": "multipart/form-data;charset=utf-8",//接口里面的Content-Type
        }
      }).then(res => {
        if (res.data.code == 200) {
          me.$message({
            message: '导入成功',
            type: 'success'
          });
          me.getData();
        } else {
          let msg = res.data.msg
          msg = msg.replace(/\n/g, '<br/>')

          me.$message({
            dangerouslyUseHTMLString: true,
            message: msg,
            type: 'warning'
          })
        }
      }).catch(err => { })
    },

3、上传file对象