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

news2024/11/18 19:52:21

iris部分

//main.go
package main

import (
	"fmt"
	"io"
	"net/http"
	"os"
)

//上传视频文件部分
func uploadHandler_video(w http.ResponseWriter, r *http.Request) {
	// 解析上传的文件
	err := r.ParseMultipartForm(10 << 20) // 设置最大文件大小为10MB
	if 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) // 设置最大文件大小为10MB
	if 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.coloradmin.cn/o/1276212.html

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

相关文章

Nacos 架构原理

基本架构及概念​ 服务 (Service)​ 服务是指一个或一组软件功能&#xff08;例如特定信息的检索或一组操作的执行&#xff09;&#xff0c;其目的是不同的客户端可以为不同的目的重用&#xff08;例如通过跨进程的网络调用&#xff09;。Nacos 支持主流的服务生态&#xff0c…

基于springboot + vue在线考试系统

qq&#xff08;2829419543&#xff09;获取源码 开发语言&#xff1a;Java Java开发工具&#xff1a;JDK1.8 后端框架&#xff1a;springboot 前端&#xff1a;采用vue技术开发 数据库&#xff1a;MySQL5.7和Navicat管理工具结合 服务器&#xff1a;Tomcat8.5 开发软件&#xf…

更改Jupyter Notebook 默认存储路径

import osprint(os.path.abspath(.)) 然后打开cmd,输入&#xff1a; jupyter notebook --generate-config 按照路径在本地文件夹中找到那个文件。 然后找到"c.NotebookApp.notebook_dir"这条语句&#xff1a;&#xff08;直接通过"crtlf"输入关键字找阿 …

2661. 找出叠涂元素 : 常规哈希表运用题

题目描述 这是 LeetCode 上的 「2661. 找出叠涂元素」 &#xff0c;难度为 「中等」。 Tag : 「模拟」、「哈希表」、「计数」 给你一个下标从 开始的整数数组 arr 和一个 的整数矩阵 mat。 arr 和 mat 都包含范围 &#xff0c; 内的所有整数。 从下标 开始遍历 arr 中的每…

经典神经网络——VGGNet模型论文详解及代码复现

论文地址&#xff1a;1409.1556.pdf。 (arxiv.org)&#xff1b;1409.1556.pdf (arxiv.org) 项目地址&#xff1a;Kaggle Code 一、背景 ImageNet Large Scale Visual Recognition Challenge 是李飞飞等人于2010年创办的图像识别挑战赛&#xff0c;自2010起连续举办8年&#xf…

Beta冲刺总结随笔

这个作业属于哪个课程软件工程A这个作业要求在哪里beta冲刺事后诸葛亮作业目标Beta冲刺总结随笔团队名称橘色肥猫团队置顶集合随笔链接Beta冲刺笔记-置顶-橘色肥猫-CSDN博客 文章目录 一、Beta冲刺完成情况二、改进计划完成情况2.1 需要改进的团队分工2.2 需要改进的工具流程 三…

【深度优先】LeetCode1932:合并多棵二叉搜索树

作者推荐 动态规划LeetCode2552&#xff1a;优化了6版的1324模式 题目 给你 n 个 二叉搜索树的根节点 &#xff0c;存储在数组 trees 中&#xff08;下标从 0 开始&#xff09;&#xff0c;对应 n 棵不同的二叉搜索树。trees 中的每棵二叉搜索树 最多有 3 个节点 &#xff0…

Linux 权限管理

1 Linux 安全模型 AAA认证资源分派&#xff1a; 当用户登录时&#xff0c;系统会自动分配令牌 token&#xff0c;包括用户标识和组成员等等信息 1.1 用户 Linux 中每个用户是通过 User ID&#xff08;UID&#xff09;来唯一标识的。 1.2 用户组 Linux 中可以将一个或者多个…

CentOS 部署 WBO 在线协作白板

1&#xff09;WBO 白板工具介绍 1.1&#xff09;WBO 白板简介 WBO 是一个自由和开源的在线协作白板。它允许多个用户同时在一个虚拟的大型白板上画图。该白板对所有线上用户实时更新&#xff0c;并且状态始终保持。它可以用于许多不同的目的&#xff0c;包括艺术、娱乐、设计和…

SQL Server 2016(创建数据表)

1、需求描述。 在名为“class”的数据库中创建表&#xff0c;表名称为“course”&#xff0c;其中要包含序号、课程、课程编号、学分、任课教师、上课地点、开始时间、结束时间、备注等列。 设置各个字段的数据类型。其中&#xff0c;"序号"列为标识列&#xff0c;从…

今日现货黄金最新建议

近期现货黄金价格再度逼近历史高位&#xff0c;很多本来在场外观望的投资者&#xff0c;都纷纷希望进场一试身手。然而大涨大跌的行情并不是很适合新手投资者参与&#xff0c;如果大家还没做好技术上的准备&#xff0c;可以多听听正规交易平台的专业人士的意见。 在正式入市之前…

TCP 重传、滑动窗口、流量控制、拥塞控制

1&#xff1a;重传机制 超时重传 快速重传 SACK 方法 Duplicate SACK 1&#xff1a;重传机制 超时重传&#xff1a;重传机制的其中一个方式&#xff0c;就是在发送数据时&#xff0c;设定一个定时器&#xff0c;当超过指定的时间后&#xff0c;没有收到对方的ACK确认应答报文…

(四)Tiki-taka算法(TTA)求解无人机三维路径规划研究(MATLAB)

一、无人机模型简介&#xff1a; 单个无人机三维路径规划问题及其建模_IT猿手的博客-CSDN博客 参考文献&#xff1a; [1]胡观凯,钟建华,李永正,黎万洪.基于IPSO-GA算法的无人机三维路径规划[J].现代电子技术,2023,46(07):115-120 二、Tiki-taka算法&#xff08;TTA&#xf…

3D开发引擎HOOPS在建筑工程行业中的应用与影响

Tech Soft 3D在工程图形方面的历史可以追溯到90年代初&#xff0c;从一开始&#xff0c;建筑和施工行业就存在于我们的DNA中。最初&#xff0c;Tech Soft 3D因现在的HOOPS Visualize技术被收购&#xff0c;并于1996年从Autodesk公司分离出来&#xff0c;作为Autodesk公司以建筑…

Drift plus penalty 漂移加惩罚Part2——性能分析

文章目录 正文Performance analysisAverage penalty analysis 平均惩罚分析Average queue size analysis 平均队列大小分析Probability 1 convergenceApplication to queues with finite capacityTreatment of queueing systemsConvex functions of time averages Delay tradeo…

AI产业前瞻报告:探讨GPTs背后的产业逻辑:拉开AIGC应用生态的帷幕

今天分享的是AI系列深度研究报告&#xff1a;《AI产业前瞻报告&#xff1a;探讨GPTs背后的产业逻辑&#xff1a;拉开AIGC应用生态的帷幕》。 &#xff08;报告出品方&#xff1a;光大证券&#xff09; 报告共计&#xff1a;13页 1、GPTs 拉开 AIGC 应用生态的帷幕 1.1、 Ope…

怎么让百度快速收录,百度SEO收录工具

百度收录对于一个网站的重要性不言而喻。拥有良好的百度收录意味着网站能够更好地被搜索引擎收录&#xff0c;为用户提供更精准的搜索结果。而怎样实现百度快速收录成为了许多网站管理员关注的焦点。 百度收录的重要性 百度是国内最大的搜索引擎之一&#xff0c;拥有数以亿计的…

成倍提高生产力工具Notion

成倍提高生产力工具Notion Notion已经成为了很多内容创作者的唯一生产力工具&#xff0c;甚至很多企业已经把Notion当作他们的唯一的工作平台&#xff0c;学习这款软件不仅能提高你的工作效率甚至在职场上也会成为一个吃香的技能&#xff0c;在美国有人制作销售Notion模板&…

Flink的部署模式和运行模式

集群角色 Flink提交作业和执行任务&#xff0c;需要几个关键组件&#xff1a; 客户端&#xff1a;代码由客户端获取并作转换&#xff0c;之后提交给Jobmanager Jobmanager就是Flink集群的管事人&#xff0c;对作业进行中央调度管理&#xff1b;当从客户端获取到转换过的作业后…

redis主从复制模式和哨兵机制

目录 第一章、主从复制模式1.1&#xff09;Redis 主从复制模式介绍1.2&#xff09;Redis 主从复制实现、 第二章、哨兵机制2.1&#xff09;容灾处理之哨兵2.2&#xff09;Sentinel 配置 第一章、主从复制模式 1.1&#xff09;Redis 主从复制模式介绍 ①单点故障&#xff1a;数…