vue 文件上传 el-upload(单个文件)

小功能剪切:

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对象

4、看后台返回Content-Type类型,把这个放进接口 headers :{ } 里去

这样基本可以实现单个文件上传了,快弄,下班~

猜你喜欢

转载自blog.csdn.net/xfy991127/article/details/136877882