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、腾讯桌面整…

C# IList 与List区别二叉树的层序遍历

IList 接口&#xff1a; IList 是一个接口&#xff0c;定义了一种有序集合的通用 API。继承自 ICollection 接口和IEnumerable<T>&#xff0c;是所有泛型列表的基接&#xff0c;口它提供了对列表中元素的基本操作&#xff0c;如添加、删除、索引访问等。IList 不是一个具…

图论|684.冗余连接 685. 冗余连接 II

684.冗余连接 题目&#xff1a;树可以看成是一个连通且 无环 的 无向 图。 给定往一棵 n 个节点 (节点值 1&#xff5e;n) 的树中添加一条边后的图。添加的边的两个顶点包含在 1 到 n 中间&#xff0c;且这条附加的边不属于树中已存在的边。图的信息记录于长度为 n 的二维数组 …

c# 文件流处理 常用功能记录

流类 函数举例字符流StreamReader文本方式读取和写入文件内容的流构造StreamReaderstring filePath "C:\\path\\to\\file.txt"; StreamReader reader new StreamReader(filePath);逐行读取WriteLinestring line; while ((line reader.ReadLine()) ! null) { …

LeetCode827. Making A Large Island

文章目录 一、题目二、题解 一、题目 You are given an n x n binary matrix grid. You are allowed to change at most one 0 to be 1. Return the size of the largest island in grid after applying this operation. An island is a 4-directionally connected group of…

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 张手写数字图像 - 下载非常简单 - 图像尺…

Vue2学习笔记(计算属性)

通过一个案例&#xff0c;循序渐进的了解计算属性&#xff0c;这个案例通过不同的写法了解VUE的计算属性。 一、使用插值语法做一个示例 <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><meta name"viewp…

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;接…