上传文件vue+iview如何上传文件并携带请求头和参数实现批量导入数据?

2022-08-22 13:05:37

![在这里插入图片描述](https://img-blog.csdnimg.cn/20210125163753476.png在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

<template><divclass="app"><Upload
      ref="upload"
      action="/api/device/deviceInfo/createDeviceInfoByExcel"//接口地址:headers="{//请求头
        token: token,'Content-Type':'multipart/form-data',}"
      name="excel-file":show-upload-list="true"//是否显示已上传文件列表:before-upload="handleUpload"//上传文件之前的钩子:on-format-error="handleFormatError"//文件格式验证失败时的钩子:format="['xlsx', 'xls']"//规定上传文件格式><Button type="info" icon="ios-cloud-upload-outline">导入</Button></Upload></div></template><script>exportdefault{data(){return{
      token: localStorage.getItem("token"),//请求头要求传的token值};},created(){
    console.log(this.token);},
  methods:{handleUpload(file){
      console.log(file);//钩子函数返回字段let formData=newFormData();
      formData.append("file", file);
      console.log(formData);this.$axios({
        url:"/api/device/deviceInfo/createDeviceInfoByExcel",
        method:"post",
        headers:{"Content-Type":"multipart/form-data",
          token: localStorage.getItem("token"),},
        data: formData,}).then((res)=>{
        console.log(res);if(res.data.retCode==="000001"){//根据接口状态码判断是否导入成功this.$Message.success("数据导入成功!");}else{this.$Message.error("数据导入失败!");}});},handleFormatError(file){this.$Notice.warning({
        title:"文件格式不正确",
        desc:"文件 "+ file.name+" 格式不正确,请上传.xls,.xlsx文件。",});},},mounted(){},};</script><style scoped>.app{
  position: relative;
  width:100%;
  max-width:1920px;
  max-height:1080px;
  background-size:100%100%;
  margin: auto;
  overflow: hidden;}</style>
  • 作者:听听那晚风
  • 原文链接:https://blog.csdn.net/GongWei_/article/details/113121571
    更新时间:2022-08-22 13:05:37