element ui 自定义文件上传二进字流传值问题

 1.封装的post请求

import axios from './axios.js' //引入axios文件
export function post (url, data) {return axios({method: 'post',url,data: {...data}})
}//修改后 正常了
export function post (url, data) {return axios({method: 'post',url,data: data})
}

2.api文件里面引用post封装请求

import { post } from '@/axios' //引用axios//上传文件接口
export function uploadFile(type, data) {return post(urlbase+'/user/prompt/upload/'+type,data)
}

3.上传文件组件

<template><div><div class="upload" v-show="this.operation!=2"><el-button class="but" @click="downloadTemplate">下载导入模板</el-button><el-upload:headers="headers"accept=".xls, .xlsx, .csv":show-file-list='false'class="upload-demo"action="#":on-error="uploadFied":before-upload="beforeUploadxls":file-list="fileList"><el-button size="small" type="primary">批量导入</el-button><div v-show="!nums" slot="tip"  class="el-upload__tip">支持上传xls、xlsx、csv格式的文件,最大2M</div></el-upload></div><div v-show="this.fielId"><ul class="el-upload-list el-upload-list--text" style="position: relative;width: 200px;left:0px;"><li tabindex="0" class="el-upload-list__item is-success"><a class="el-upload-list__item-name"><!-- <i class="el-icon-document"></i> -->{{this.fileNmae}}</a><label class="el-upload-list__item-status-label"><iclass="el-icon-upload-success el-icon-circle-check"></i></label><i  @click="handleRemove" class="el-icon-close"></i><i class="el-icon-close-tip">按 delete 键可删除</i></li></ul><span style="color: darkorange;">导入成功{{this.nums}}条,<span @click="downloads" :disabled='false' style="color: #409EFF;">查看上传结果</span></span></div></div>
</template><script>
import {uploadFile,} from '../api/user'export default {props:['value',"num","types","operation"],data(){return{fielId:this.value,fileList:[],loading:false,fileNmae:'',//文件名称nums:'',//成功条数}},watch: {value(newValue) {// console.log('newValue',newValue);this.fielId = newValue;}},methods: {//上传前验证格式beforeUploadxls(file) {console.log('file',file);const extension = file.name.split(".")[1] === "xls" || file.name.split(".")[1] === "xlsx" || file.name.split(".")[1] === "csv";const isSize = file.size / 1024 / 1024 > 2;if (!extension) {this.$message.warning("文件格式有误!");return false;}if(isSize){this.$message.warning("上传文件大小不能大于2M!");return false;}this.loading = this.$loading({lock: true,text: "上传中",spinner: "el-icon-loading",background: "rgba(0, 0, 0, 0.7)",});console.log(111,this.fileList);let formdata = new FormData();formdata.append("template",file);console.log('formdata-file', formdata.get('file'));uploadFile(this.types,formdata).then(res=>{let {fileId,succeedLine}=res.dataif(res.code==200){this.$message.success(res.message)//上传成功赋值this.fileNmae=file.namethis.nums=succeedLinethis.$emit("input", fileId)}else{this.$message.error(res.message)}this.loading.close()}).catch((err)=>{this.loading.close()})},//查看上传结果downloads(){},//下载模板downloadTemplate(){let a = document.createElement("a");a.href = "./template/TipTemplate.xlsx";// a.download = "导入模板.xlsx";a.style.display = "none";document.body.appendChild(a);a.click();a.remove();},//删除handleRemove(file, fileList){console.log('删除');this.fielId=''this.$emit('input', '')},//上传失败uploadFied(err, file, fileList){console.log('失败');this.loading.close()}},created() {},computed:{}
}
</script><style lang="less" scoped>.upload{display: flex;.but{height: 33px;margin-right: 10px;}.el-upload__tip{position: relative;right: 116px;}}
</style>

导致文件流获取值一直传不到后端,解决办法修改post请求,data写法

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/888538.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【设计模式系列】单例模式(二十)

一、什么是单例模式 单例模式&#xff08;Singleton Pattern&#xff09;是一种常用的软件设计模式&#xff0c;属于创建型模式。它的目的是确保一个类只有一个实例&#xff0c;并提供一个全局访问点来获取这个实例。 单例模式的主要特点包括&#xff1a; 唯一性&#xff1a…

在 SpringBoot 集成了 Mybatis 的基础上添加 Mybatis-Plus

SpringBoot 集成了 Mybatis 可以参考前一篇文章 《SpringBoot 项目快速集成 Mybatis》 在 SpringBoot 集成了 Mybatis 的基础上添加 Mybatis-Plus 步骤&#xff1a; 引入 mybatis-plus 依赖&#xff1a; <dependency><groupId>com.baomidou</groupId><…

BioDeepAV:一个多模态基准数据集,包含超过1600个深度伪造视频,用于评估深度伪造检测器在面对未知生成器时的性能。

2024-11-29, 由罗马尼亚布加勒斯特大学创建BioDeepAV数据集&#xff0c;它专门设计来评估最先进的深度伪造检测器在面对未见过的深度伪造生成器时的泛化能力&#xff0c;这对于提高检测器的鲁棒性和适应性具有重要意义。 数据集地址&#xff1a;biodeep 一、研究背景&#xff1…

工业—使用Flink处理Kafka中的数据_ChangeRecord1

使用 Flink 消费 Kafka 中 ChangeRecord 主题的数据,当某设备 30 秒状态连续为 “ 预警 ” ,输出预警 信息。当前预警信息输出后,最近30

Flink四大基石之State(状态) 的使用详解

目录 一、有状态计算与无状态计算 &#xff08;一&#xff09;概念差异 &#xff08;二&#xff09;应用场景 二、有状态计算中的状态分类 &#xff08;一&#xff09;托管状态&#xff08;Managed State&#xff09;与原生状态&#xff08;Raw State&#xff09; 两者的…

opencv-android编译遇到的相关问题处理

1、opencv-android sdk下载 下载地址&#xff1a;https://opencv.org/releases/ 下载安卓SDK即可 2、解压下载好的SDK 3、导入opencv的SDK到安卓项目中 导入步骤在/OpenCV-android-sdk/sdk/build.gradle文件的注释中写的非常详细&#xff0c;大家可安装官方给出的步骤导入。…

前端项目开发 如何解决 error ‘val‘ is not defined no-undef 问题?

在前端开发中&#xff0c;error val is not defined no-undef 是 ESLint 报出的错误&#xff0c;表示在代码中使用了未定义的变量 val&#xff0c;但是 ESLint 没有找到它的声明。为了解决这个问题&#xff0c;通常有以下几种方法&#xff1a; 1. 检查变量是否正确声明 最常见…

深入探索 HarmonyOS 的 Navigation 组件:灵活的页面管理与动态导航

在移动应用开发中&#xff0c;页面的跳转和导航一直是核心功能之一。对于 HarmonyOS 开发者来说&#xff0c;Navigation 组件提供了一个强大的工具来实现灵活的页面管理和导航体验。今天&#xff0c;我们将深入探讨如何使用 HarmonyOS 中的 Navigation 组件来管理页面跳转、工具…

OpenSSH-9.9p1 OpenSSL-3.4.0 升级步骤详细

前言 收到漏洞扫描通知 OpenSSH 安全漏洞(CVE-2023-38408) OpenSSH 安全漏洞(CVE-2023-51385) OpenSSH 安全漏洞(CVE-2023-51384) OpenSSH 安全漏洞(CVE-2023-51767) OpenSSH 安全漏洞(CVE-2023-48795) OpenSSH&#xff08;OpenBSD SecureShell&#xff09;是加拿大OpenBSD计划…

Python毕业设计选题:基于Flask的医疗预约与诊断系统

开发语言&#xff1a;Python框架&#xff1a;flaskPython版本&#xff1a;python3.7.7数据库&#xff1a;mysql 5.7数据库工具&#xff1a;Navicat11开发软件&#xff1a;PyCharm 系统展示 系统首页 疾病信息 就诊信息 个人中心 管理员登录界面 管理员功能界面 用户界面 医生…

经济:趋势判断 课程学习笔记

文章目录 导言意愿支付和需求函数影响需求的因素市场均衡及应用均衡变动分析 导言 当代经济学研究的权威机构&#xff1a;美国经济学会&#xff08;AEA&#xff09;。 经济学研究的问题有哪些&#xff1a; 为什么有一些国家富裕&#xff0c;而另外一些国家贫穷&#xff1f;是…

Hive元数据表解析

cdh版本的hive元数据表可能和apache hive有一定区别&#xff0c;不过大同小异&#xff0c;在这里介绍 1.1.0-cdh5.12.0版本的hive元数据表。hive元数据存储在mysql的metastore库里。以_PRIVS结尾的权限信息相关表都需要在hive里使用grant授权才会产生&#xff0c;如果结合sentr…

sql删除冗余数据

工作或面试中经常能遇见一种场景题&#xff1a;删除冗余的数据&#xff0c;以下是举例介绍相应的解决办法。 举例&#xff1a; 表结构&#xff1a; 解法1&#xff1a;子查询 获取相同数据中id更小的数据项&#xff0c;再将id不属于其中的数据删除。-- 注意&#xff1a;mysql中…

数据链路层(四)---PPP协议的工作状态

1 PPP链路的初始化 通过前面几章的学习&#xff0c;我们学了了PPP协议帧的格式以及组成&#xff0c;那么对于使用PPP协议的链路是怎么初始化的呢&#xff1f; 当用户拨号上网接入到ISP后&#xff0c;就建立起了一条个人用户到ISP的物理链路。这时&#xff0c;用户向ISP发送一…

基于“微店 Park”模式下 2+1 链动模式商城小程序的创新发展与应用研究

摘要&#xff1a;本文以“微店 Park”从“开店工具”向“众创平台”的转型为背景&#xff0c;深入探讨 21 链动模式商城小程序在该平台情境下的应用潜力与创新发展路径。通过剖析“微店 Park”的运营模式&#xff0c;包括灵活承租、低成本入驻、多元流量引流等特点&#xff0c;…

4k4d 学习安装笔记

目录 这个博文讲解不错&#xff1a; 服务器上&#xff1a; https://github.com/zju3dv/4K4D?tabreadme-ov-file 安装&#xff1a; GitHub - zju3dv/EasyVolcap: [SIGGRAPH Asia 2023 (Technical Communications)] EasyVolcap: Accelerating Neural Volumetric Video Resear…

《船舶物资与市场》是什么级别的期刊?是正规期刊吗?能评职称吗?

问题解答 问&#xff1a;《船舶物资与市场》是不是核心期刊&#xff1f; 答&#xff1a;不是&#xff0c;是知网收录的正规学术期刊。 问&#xff1a;《船舶物资与市场》级别&#xff1f; 答&#xff1a;国家级。主管单位&#xff1a;中国船舶集团有限公司 主办单…

【QNX+Android虚拟化方案】127 - QNX侧 uart 读写程序分析

【QNX+Android虚拟化方案】127 - QNX侧 uart 读写程序分析 一、 QNX侧 uart 读写程序分析基于原生纯净代码,自学总结 纯技术分享,不会也不敢涉项目、不泄密、不传播代码文档!!! 本文禁止转载分享 !!! 汇总链接:《【QNX+Android虚拟化方案】00 - 系列文章链接汇总》 本…

蓝桥杯-扫雷

这题不难&#xff0c;就是麻烦一点&#xff0c;这里暴力求解了直接 题目链接&#xff1a; 扫雷 AC代码&#xff1a; import java.util.Scanner; // 1:无需package // 2: 类名必须Main, 不可修改public class Main {public static void main(String[] args) {Scanner scan ne…

2024年认证杯SPSSPRO杯数学建模B题(第一阶段)神经外科手术的定位与导航解题全过程文档及程序

2024年认证杯SPSSPRO杯数学建模 B题 神经外科手术的定位与导航 原题再现&#xff1a; 人的大脑结构非常复杂&#xff0c;内部交织密布着神经和血管&#xff0c;所以在大脑内做手术具有非常高的精细和复杂程度。例如神经外科的肿瘤切除手术或血肿清除手术&#xff0c;通常需要…