vue3 input 上传文件

1.axios封装

http.postFormData = function(vm, url, params) {
  return new Promise((resolve) => {
    axios.post(url, params, {
      headers: {
        'Content-Type': 'multipart/form-data',
        'Authorization': store.state.token
      },
      timeout: config.httpTimeOut
    })
      .then(res => {
        custResponseFun(vm, res, resolve);
      })
      .catch(err => {
        custErrFun(vm, err);
      });
  });
};

2.template模板

form style="display: none">
                <input type="file" name="fileInput" id="fileInput" ref="fileRef" @change="getAddFile"
                    accept=".csv, application/vnd.ms-excel, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet" />
            </form>

3.JS代码

const { proxy } = getCurrentInstance();
const fileRef = ref(null);
/*上传文档*/
const importData = () => {
    fileRef.value.click();
}
/**上传文件 */
const getAddFile = (e) => {
    let file = fileRef.value.files[0];
    console.log(file);
    let fm= new FormData();
    fm.append("file", file);
    proxy.$H
    .postFormData(proxy, proxy.$A.prediction.importTemplate, fm)
    .then(res => {
        console.log(res);
    })

}

4.效果
在这里插入图片描述

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

微服务概念

微服务 微服务是什么 In short, the microservice architectural style [1] is an approach to developing a single application as a suite of small services, each running in its own process and communicating with lightweight mechanisms, often an HTTP resource A…

【EI会议征稿】第四届环境资源与能源工程国际学术会议(ICEREE 2024)

第四届环境资源与能源工程国际学术会议&#xff08;ICEREE 2024&#xff09; 2024 4th International Conference on Environment Resources and Energy Engineering ICEREE&#xff08;2020-2023&#xff09;大会先后在珠海&#xff0c;昆明&#xff0c;长沙成功召开。会议主…

【中间件篇-Redis缓存数据库06】Redis主从复制/哨兵 高并发高可用

Redis高并发高可用 复制 在分布式系统中为了解决单点问题&#xff0c;通常会把数据复制多个副本部署到其他机器&#xff0c;满足故障恢复和负载均衡等需求。Redis也是如此&#xff0c;它为我们提供了复制功能&#xff0c;实现了相同数据的多个Redis 副本。复制功能是高可用Re…

操作指南 | 如何将$DOT转移至Moonbeam

Moonbeam直观的DApp界面由波卡原生互操作性支持&#xff0c;用户可以通过几个简单的步骤使用其他平行链的资产或中继链的$DOT。 &#x1f9ed; 首先导向至http://moonbeam.network&#xff0c;点击“Launch App&#xff08;启动应用程序&#xff09;”和“Connect Wallet&…

Postman:如何对WebService接口进行测试

前言 由于工作所需,需要使用Postman测试工具&#xff0c;对基于ws规范的WebService接口进行测试。在经过多种尝试后&#xff0c;终于找到了正确的测试方法&#xff0c;下面我便详细记录测试步骤&#xff0c;以便以后再次测试时可以拿来主义。 第一步&#xff1a;确保WebServi…

Excel函数-将A1中的字符串剔除B1中的字符串

比如A2中是类型单位&#xff0c;B2中是单位&#xff0c;在C2中体现A2-B2的结果&#xff0c;即大米 公式&#xff1a;SUBSTITUTE(A2,B2,“”) SUBSTITUTE函数功能&#xff1a;将字符串中的部分字符用新字符替换&#xff0c;替换序号忽略说明进行全部替换 结构&#xff1a;SUB…

zotero跨Windows设备数据同步(利用OneDrive、百度云同步空间等云服务)

zotero跨Windows设备数据同步&#xff08;利用OneDrive、百度云同步空间等云服务&#xff09; 特别注意 不能在多个设备同步使用zotero&#xff0c;否则会导致同步出现异常。 基本原理 同步zotero的数据&#xff0c;即同步全部的文献和笔记、高亮标记信息。而这两类数据分别…

C# 使用AForge调用摄像头

C# 使用AForge调用摄像头 安装AForge使用AForge控件示例代码 AForge官网 安装AForge Visual Studio 2022>项目>管理NuGet程序包&#xff0c;搜索AForge并依次安装作者为AForge.NET的多个关联组件。 使用AForge控件 安装AForge组件完成后&#xff0c;工具箱会新增AF…

【PE】PE文件结构(一)

概述&#xff1a;PE文件结构基础认识之DOS头和PE头&#xff08;以 rpcrt4.dll 为例分析&#xff09; 0x01 前言 PE(Portable Executable)&#xff0c;即可移植的执行体。 Linux平台&#xff1a;ELF&#xff08;Executable and Linking Format&#xff09;文件结构。 Windows平…

摩天轮-第15届蓝桥第二次STEMA测评Scratch真题精选

[导读]&#xff1a;超平老师的《Scratch蓝桥杯真题解析100讲》已经全部完成&#xff0c;后续会不定期解读蓝桥杯真题&#xff0c;这是Scratch蓝桥杯真题解析第156讲。 第15届蓝桥第2次STEMA测评已于2023年10月29日落下帷幕&#xff0c;编程题一共有6题&#xff0c;分别如下&am…

Day10—SQL那些事(特殊场景的查询)

文章目录 1、只想查一个字段却不得不左连接好多张表2、左连接的时候只想取最后一条数据 1、只想查一个字段却不得不左连接好多张表 只想查一个字段却不得不左连接好多张表&#xff0c;而且因为左连接的表太多还导致查出来的数据重复 原先的sql SELECTsph.po_num,chh.visa_ex…

SSM德庆县乡村教育图书管理系统-计算机毕设 附源码 24668

SSM德庆县乡村教育图书管理系统 摘 要 大数据时代下&#xff0c;数据呈爆炸式地增长。为了迎合信息化时代的潮流和信息化安全的要求&#xff0c;利用互联网服务于其他行业&#xff0c;促进生产&#xff0c;已经是成为一种势不可挡的趋势。在德庆县乡村教育图书管理的要求下&…

centos7通过pip3在线下载python3第三方依赖包

更新pip pip3 install --upgrade pip安装requests ​ pip3 install requests -i https://pypi.doubanio.com/simple ​ 安装路径&#xff1a; /usr/local/lib/python3.6/site-packages 安装paho-mqtt ​ pip3 install paho-mqtt -i https://pypi.doubanio.com/simple ​ 安装…

哈希竞猜游戏开发源码部署方案

随着互联网技术的发展&#xff0c;越来越多的人开始关注网络安全问题&#xff0c;而哈希算法作为一种重要的加密技术&#xff0c;在网络安全领域得到了广泛应用。其中&#xff0c;哈希竞猜游戏作为一种新型的网络安全挑战赛&#xff0c;也受到了越来越多人的关注。本文将介绍哈…

LED显示屏老化知识

LED显示屏老化是指长时间使用后&#xff0c;LED显示屏性能逐渐下降和衰减的过程。虽然LED显示屏具有较长的寿命和良好的稳定性&#xff0c;但长期使用和环境因素会导致一定程度的老化现象。 LED显示屏为什么会老化 1. 亮度衰减&#xff1a;LED显示屏使用时间越长&#xff0c;LE…

高防CDN节点部署:流量攻击抵御的专业解决方案

随着网络攻击日益复杂和频繁&#xff0c;对于网站安全的需求也变得愈发迫切。高防CDN&#xff08;Content Delivery Network&#xff09;作为一种专业的网络安全解决方案&#xff0c;通过节点部署在全球范围内&#xff0c;能够有效抵御各种流量攻击&#xff0c;为网站提供可靠的…

2011年12月13日 Go生态洞察:从零到Go,在谷歌首页上的24小时飞跃

&#x1f337;&#x1f341; 博主猫头虎&#xff08;&#x1f405;&#x1f43e;&#xff09;带您 Go to New World✨&#x1f341; &#x1f984; 博客首页——&#x1f405;&#x1f43e;猫头虎的博客&#x1f390; &#x1f433; 《面试题大全专栏》 &#x1f995; 文章图文…

【EI会议征稿】第三届区块链、信息技术与智慧金融国际学术会议 (ICBIS2024)

第三届区块链、信息技术与智慧金融国际学术会议 (ICBIS2024) The 3rd International Academic Conference on Blockchain, Information Technology and Smart Finance 第三届区块链、信息技术与智慧金融国际学术会议 (ICBIS2024) 将于2024年2月23-25日在马来西亚举行。本次会…

成都瀚网科技有限公司抖音带货的正规

成都瀚网科技有限公司&#xff0c;一家在科技领域有着深厚积累的公司&#xff0c;近年来也开始涉足电子商务领域&#xff0c;特别是在抖音等短视频平台上进行带货活动。在这个充满机遇与挑战的时代&#xff0c;该公司以其独特的商业模式和运营策略&#xff0c;正在赢得消费者的…