iris+vue上传到本地存储【go/iris】

iris部分

//main.go
package mainimport ("fmt""io""net/http""os"
)//上传视频文件部分
func uploadHandler_video(w http.ResponseWriter, r *http.Request) {// 解析上传的文件err := r.ParseMultipartForm(10 << 20) // 设置最大文件大小为10MBif err != nil {fmt.Println("Error parsing the form")return}file, handler, err := r.FormFile("file")if err != nil {fmt.Println("Error retrieving the file")return}defer file.Close()// 创建一个新文件f, err := os.OpenFile("./assets/video/"+handler.Filename, os.O_WRONLY|os.O_CREATE, 0666)//这个路径可以修改,但是这个路径是要存在与你本地的if err != nil {fmt.Println("Error creating the file")return}defer f.Close()// 将上传的文件内容拷贝到新文件中io.Copy(f, file)fmt.Fprintf(w, "File uploaded successfully")
}//上传一个图片文件
func uploadHandler_images(w http.ResponseWriter, r *http.Request) {// 解析上传的文件err := r.ParseMultipartForm(10 << 20) // 设置最大文件大小为10MBif err != nil {fmt.Println("Error parsing the form")return}file, handler, err := r.FormFile("file")if err != nil {fmt.Println("Error retrieving the file")return}defer file.Close()// 创建一个新文件f, err := os.OpenFile("./assets/images/"+handler.Filename, os.O_WRONLY|os.O_CREATE, 0666)//这个路径可以修改,但是这个路径是要存在与你本地的if err != nil {fmt.Println("Error creating the file")return}defer f.Close()// 将上传的文件内容拷贝到新文件中io.Copy(f, file)fmt.Fprintf(w, "File uploaded successfully")
}func main() {http.HandleFunc("/upload-video", uploadHandler_video)//这些可修改http.HandleFunc("/upload-image",uploadHandler_images)//这些可修改http.ListenAndServe(":8091", nil) //这些可修改
}

vue部分

<script setup>
//点击上传获取视频文件
const changeUploadBtn = async() => {const fileHandle = await window.showOpenFilePicker({excludeAcceptAllOption: false,types: [{description: '视频文件',accept: {'video/*': ['.mp4', '.avi', '.mov']},},],});const file = await fileHandle[0].getFile();console.log(file)const formData = new FormData();formData.append('file', file);await fetch('http://localhost:8091/upload-video', {//按照自身的url判定method: 'POST',body: formData});}//点击上传获取图片文件
const uploadFMImageBtn = async() => {const fileHandle = await window.showOpenFilePicker({excludeAcceptAllOption: false,types: [{description: '图片文件',accept: {'image/*': ['.png', '.gif', '.jpeg', '.jpg', '.webp']},},],});const file = await fileHandle[0].getFile();console.log(file)const formData = new FormData();formData.append('file', file);await fetch('http://localhost:8091/upload-image', { //按照自身的url判定method: 'POST',body: formData});
}
</script><template><div><button @click="changeUploadBtn">上传视频</button><button @click="uploadFMImageBtn ">上传图片</button></div>
</template><style scoped>
/*这块内容请随意*/
</style>

效果如图
在这里插入图片描述

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

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

相关文章

高并发下缓存失效问题-缓存穿透、缓存击穿、缓存雪崩、Redis分布式锁简单实现、Redisson实现分布式锁

文章目录 缓存基本使用范式暴露的几个问题缓存失效问题---缓存穿透缓存失效问题---缓存击穿一、单机锁正确的锁粒度不正确的锁粒度无法保证查询数据库次数是唯一 二、分布式锁getCatalogJsonData()分布式锁演进---基本原理分布式锁(加锁)演进一&#xff1a;删锁失败导致死锁分布…

牛客小白月赛82(A~C)

目录 A.谜题&#xff1a;质数 输入描述 输出描述 输入 输出 解析 B.Kevin逛超市 2 (简单版本) 输入描述 输出描述 输入 输出 思路 C.被遗忘的书籍 题目描述 输入描述 输出描述 输入 输出 输入 输出 思路 比赛链接 牛客小白月赛82_ACM/NOI/CSP/CCPC/ICPC算…

C++基础 -28- 友元

友元用于访问类中的所有数据成员 类中的私有成员&#xff0c;类外不可访问 定义友元的格式&#xff08;友元函数必须要在类内&#xff0c;声明&#xff09; friend void show(person &b); 使用友元访问类的所有成员 #include "iostream"using namespace std…

Istio可观测性

Istio可观测性 image-20231129072302901 前言 Istio 为网格内所有的服务通信生成详细的遥测数据。这种遥测技术提供了服务行为的可观测性&#xff0c;使运维人员能够排查故障、维护和优化应用程序&#xff0c;而不会给开发人员带来其他额外的负担。通过 Istio&#xff0c;运维…

好用的桌面管理软件推荐

随着电脑的普及&#xff0c;桌面管理软件已经成为我们日常生活和工作中不可或缺的一部分。一个好的桌面管理软件可以帮助我们更高效地组织和管理电脑上的文件和应用程序&#xff0c;提高我们的工作效率。下面&#xff0c;我将为大家推荐几款好用的桌面管理软件。 1、腾讯桌面整…

Nacos 注册中心下载到搭建详细步骤【微服务】

文章目录 一、下载与安装二、Nacos 服务注册1. 引入依赖2. 修改配置文件3. 开启 Nacos 注解4. 启动项目 三、Nacos 服务集群1. 模拟多实例部署2. 配置集群属性3. 服务权重配置 四、Nacos 环境隔离五、Nacos 注册中心原理1. Nacos 与 Eureka 比较2. 配置非临时实例 一、下载与安…

LeNet对MNIST 数据集中的图像进行分类--keras实现

我们将训练一个卷积神经网络来对 MNIST 数据库中的图像进行分类&#xff0c;可以与前面所提到的CNN实现对比CNN对 MNIST 数据库中的图像进行分类-CSDN博客 加载 MNIST 数据库 MNIST 是机器学习领域最著名的数据集之一。 它有 70,000 张手写数字图像 - 下载非常简单 - 图像尺…

MMdetection3.0 问题:DETR验证集上AP值全为0.0000

MMdetection3.0 问题&#xff1a;DETR验证集上AP值全为0.0000 条件&#xff1a; 1、选择的是NWPU-VHR-10数据集&#xff0c;其中训练集455张&#xff0c;验证、测试相同均为195张。 2、在Faster-rcnn、YOLOv3模型上均能训练成功&#xff0c;但是在DETR训练时&#xff0c;出现验…

《地理信息系统原理》笔记/期末复习资料(7. 空间分析)

目录 7. 空间分析 7.1 空间分析的内容与步骤 7.2 数据检索及表格分析 7.2.1 属性统计分析 7.2.2 布尔逻辑查询 7.2.3 空间数据库查询语言 7.2.4 重分类&#xff0c;边界消除与合并 7.3 叠置分析 7.3.1 栅格系统的叠加分析 7.3.2 矢量系统的叠加分析&#xff08;拓扑叠…

视频后期特效处理软件 Motion 5 mac中文版

Motion mac是一款运动图形和视频合成软件&#xff0c;适用于Mac OS平台。 Motion mac软件特点 - 精美的效果&#xff1a;Motion提供了多种高质量的运动图形和视频效果&#xff0c;例如3D效果、烟雾效果、粒子效果等&#xff0c;方便用户制作出丰富多彩的视频和动画。 - 高效的工…

设计模式-结构型模式之桥接设计模式

文章目录 三、桥接模式 三、桥接模式 桥接模式&#xff08;Bridge&#xff09;是用于把抽象化与实现化解耦&#xff0c;使得二者可以独立变化。它通过提供抽象化和实现化之间的桥接结构&#xff0c;来实现二者的解耦。 这种模式涉及到一个作为桥接的接口&#xff0c;使得实体类…

Windows本地搭建Emby媒体库服务器并实现远程访问「内网穿透」

文章目录 1.前言2. Emby网站搭建2.1. Emby下载和安装2.2 Emby网页测试 3. 本地网页发布3.1 注册并安装cpolar内网穿透3.2 Cpolar云端设置3.3 Cpolar内网穿透本地设置 4.公网访问测试5.结语 1.前言 在现代五花八门的网络应用场景中&#xff0c;观看视频绝对是主力应用场景之一&…

jQuery选择器、操作DOM、事件处理机制、动画、ADJX操作知识点梳理

jQuery 核心理念就是写的更少&#xff0c;做的更多实现的代码更加简洁有效的提高开发效率 jQuery跟JavaScript的用法是不一样的 跟jQuery相继诞生的JavaScript库还有很多&#xff0c;不包括node.js 关于代码$("li").get(0)&#xff0c;获取DOM对象 jQuery对象声…

前缀和 LeetCode1094 拼车

1094. 拼车 车上最初有 capacity 个空座位。车 只能 向一个方向行驶&#xff08;也就是说&#xff0c;不允许掉头或改变方向&#xff09; 给定整数 capacity 和一个数组 trips , trip[i] [numPassengersi, fromi, toi] 表示第 i 次旅行有 numPassengersi 乘客&#xff0c;接…

Tomcat 漏洞修复

1、去掉请求响应中Server信息 修复方法&#xff1a; 在Tomcat的配置文件的Connector中增加 server" " &#xff0c;server 的值可以改成你任意想返回的值。

Elasticsearch:什么是自然语言处理(NLP)?

自然语言处理定义 自然语言处理 (natural language processing - NLP) 是人工智能 (AI) 的一种形式&#xff0c;专注于计算机和人们使用人类语言进行交互的方式。 NLP 技术帮助计算机使用我们的自然交流模式&#xff08;语音和书面文本&#xff09;来分析、理解和响应我们。 自…

一进三出宿舍限电模块的改造升级

一进三出宿舍限电模块改造升级石家庄光大远通电气有限公司智能模块功能特点&#xff1a; 电能控制功能&#xff1a;可实施剩余电量管理&#xff0c;电量用完时将自动断电&#xff1b; 剩余电量可视报警提示功能&#xff1a;剩余电量可视&#xff0c;并当电量剩余5度时&#xff…

C#和MySQL技巧分享:日期的模糊查询

文章目录 前言一、EF Core 模糊查询二、MySql 日期模糊查询分析和优化2.1 测试环境准备2.1.1 创建数据库2.1.2 查看测试数据 2.2 查询日期的运行效率对比2.3 运行效率优化 三、EF Core 模糊查询优化3.1 字符串转日期3.2 使用日期格式查询 四、优化建议总结 前言 在处理数据库查…

go开发之个人微信号机器人开发

简要描述&#xff1a; 下载消息中的文件 请求URL&#xff1a; http://域名地址/getMsgFile 请求方式&#xff1a; POST 请求头Headers&#xff1a; Content-Type&#xff1a;application/jsonAuthorization&#xff1a;login接口返回 参数&#xff1a; 参数名必选类型…