elemetUi 组件--el-upload实现上传Excel文件的实例

前端之家收集整理的这篇文章主要介绍了elemetUi 组件--el-upload实现上传Excel文件的实例前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

elemetUi 组件--el-upload实现上传Excel文件的实例

【需求】实现上传Excel文件,在上传到服务器时,还要附加一个参数,在请求上传文件接口前,先要进行文件格式判断。

【知识点】

  1、el-upload 官方文档中,主要用到了以下属性

上传时附带的额外参数上传的文件字段名上传文件之前的钩子,参数为上传文件,若返回 false 或者返回 Promise 且被 reject,则停止上传

  2、split进行字符串截取

【分析】

上传数据
    <el-form-item>

      <el-upload
          class="upload-demo"
          ref="upload"
          action="http://10.1.20.218:8088/gnh-webadmin-platfrom/api/v1/sendSalaryBillGeinihua"
          :on-preview="handlePreview"
          :before-upload="beforeAvatarUpload"
          :on-remove="handleRemove"
          :file-list="fileList"
          :auto-upload = 'false'
          :on-success = 'handleSuccess'
          :data="form"
          name="salaryBill"&gt;
        <el-button slot="trigger" size="small" type="primary"&gt;选取<a href="https://www.jb51.cc/tag/wenjian/" target="_blank" class="keywords">文件</a></el-button>
        <el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload"&gt;<a href="https://www.jb51.cc/tag/shangchuan/" target="_blank" class="keywords">上传</a>到服务器</el-button>
        <div slot="tip" class="el-upload__tip"&gt;只能<a href="https://www.jb51.cc/tag/shangchuan/" target="_blank" class="keywords">上传</a>xls/xlsx<a href="https://www.jb51.cc/tag/wenjian/" target="_blank" class="keywords">文件</a></div>
      </el-upload>

    </el-form-item>
  </el-form>
</div>

如有疑问请留言或者到本站社区交流讨论,感谢阅读,希望能帮助到大家,谢谢大家对本站的支持

原文链接:https://www.f2er.com/js/35517.html

猜你在找的JavaScript相关文章