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.hqwc.cn/news/238682.html

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

相关文章

zookeeper心跳检测 (实操课程)

本系列是zookeeper相关的实操课程&#xff0c;课程测试环环相扣&#xff0c;请按照顺序阅读来学习和测试zookeeper。 阅读本文之前&#xff0c;请先阅读----​​​​​​zookeeper 单机伪集群搭建简单记录&#xff08;实操课程系列&#xff09;zookeeper 客户端常用命令简单记录…

matlab 汽车单车模型固定点跟踪算法

1、内容简介 略 29-可以交流、咨询、答疑 2、内容说明 单车模型固定点跟踪算法 单车模型&#xff0c;固定点跟踪算法&#xff0c;动画演示&#xff0c; 汽车单车模型、转弯动画、固定点跟踪算法、pid控制 3、仿真分析 略 A[0,5;0,0];B[0;1]; Q10*eye(2);R1; Klqr(A…

基于SpringBoot校园周边美食探索及分享平台的设计与实现

摘要&#xff1a; 美食一直是与人们日常生活息息相关的产业。传统的电话订餐或者到店消费已经不能适应市场发展的需求。随着网络的迅速崛起&#xff0c;互联网日益成为提供信息的最佳俱渠道和逐步走向传统的流通领域&#xff0c;传统的美食业进而也面临着巨大的挑战&#xff0c…

全面预算管理平台让企业管理智慧升级

智能制造背景下&#xff0c;企业财务发展与业务、运营、服务等环节紧紧相扣&#xff0c;并逐渐体现出智慧化的特性。区别于传统的商业智能BI&#xff0c;智慧管理平台作为企业数字化转型的核心&#xff0c;通过信息系统的集成&#xff0c;能够对企业各个业务模块进行整合&#…

记录华为云服务器(Linux 可视化 宝塔面板)-- 防火墙篇

文章目录 前言安装防火墙防火墙设置防火墙操作1.设置开机启动防火墙2.查看防火墙开放哪些端口3.重载防火墙配置&#xff08;修改配置后重新启动才生效&#xff09;4.查看防火墙状态5.开启防火墙6.关闭防火墙 若遇到无法开启查询已开放的端口查询端口是否开放&#xff08;80&…

springboot+vue志愿者在线报名服务管理系统java毕业设计源码+数据库

vuespringboot志愿服务管理系统 本项目是springbootvueElementuimysql源码 开发工具&#xff0c;idea和eclipse都可以,MySQL 源码下载地址 https://download.csdn.net/download/yibo2022/88401958?spm1003.2166.3001.6637.3https://download.csdn.net/download/yibo2022/884…

IntelliJ IDEA创建springboot项目时不能选择java8的问题解决方案

最近博主也有创建springboot项目&#xff0c;发现了IntelliJ IDEA在通过Spring Initilizer初始化项目的时候已经没有java8版本的选项了。 基于这个问题&#xff0c;有了这篇文章的分享&#xff0c;希望能够帮助大家克服这个困难。 如图&#xff0c;现在创建springboot项目的时…

目标检测——Faster R-CNN算法解读

论文&#xff1a;Faster R-CNN: Towards Real-Time Object Detection with Region Proposal Networks 作者&#xff1a;Shaoqing Ren, Kaiming He, Ross Girshick, and Jian Sun 链接&#xff1a;https://arxiv.org/abs/1506.01497 代码&#xff1a;https://github.com/rbgirsh…

算法通关村第一关—白银挑战—链表高频面试算法题—查找两个链表的第一个公共子节点

文章目录 查找两个链表的第一个公共子节点&#xff08;1&#xff09;暴力求解法&#xff08;2&#xff09;使用哈希Hash⭐&#xff08;3&#xff09;使用集合⭐ - 与Hash类似&#xff08;4&#xff09;使用栈⭐&#xff08;5&#xff09;仍有更多方法&#xff0c;作者尚未理解&…

API成批分配漏洞介绍与解决方案

一、API成批分配漏洞介绍 批量分配&#xff1a;在API的业务对象或数据结构中&#xff0c;通常存在多个属性&#xff0c;攻击者通过篡改属性值的方式&#xff0c;达到攻击目的。比如通过设置user.is_admin和user.is_manager的值提升用户权限等级&#xff1b;假设某API的默认接口…

OpenHarmony 设备启动Logo和启动视频替换指南

前言 OpenHarmony源码版本&#xff1a;4.0release 开发板&#xff1a;DAYU / rk3568 一、Logo替换 替换其中的logo.bmp 和 logo_kernel.bmp文件 注意事项&#xff1a; 1、图片的分辨率需要和设备匹配 2、如果是非首次编译&#xff08;存在缓存&#xff09;需要将out目录删…

删除文件夹或文件时提示文件不存在

文件或者文件夹在电脑中存在&#xff0c;但删除时提示无法删除或提示文件不存在&#xff0c;如下图 解决方案&#xff1a; 新建一个文档 文件内容del /f /a /q \\?\%1 rd /s /q \\?\%1&#xff0c;如下图 保存后修改文件后缀为.bat 把要删除的文件或文件夹移动到创建的文…