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

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.mfbz.cn/a/208027.html

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

相关文章

多线程(初阶五:wait和notify)

目录 一、概念 二、用法 &#xff08;1&#xff09;举个栗子&#xff1a; &#xff08;2&#xff09;wait和notify的使用 1、没有上锁的wait 2、当一个线程被wait&#xff0c;但没有其他线程notify来释放这个wait 3、两个线程&#xff0c;有一个线程wait&#xff0c;有一…

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

论文&#xff1a;Mask R-CNN 作者&#xff1a;Kaiming He Georgia Gkioxari Piotr Dollar Ross Girshick 链接&#xff1a;https://arxiv.org/abs/1703.06870 代码&#xff1a;https://github.com/facebookresearch/Detectron R-CNN系列其他文章&#xff1a; R-CNN算法解读SPP…

Leecode 【一】

环形链表: 给你一个链表的头节点 head &#xff0c;判断链表中是否有环。 如果链表中有某个节点&#xff0c;可以通过连续跟踪 next 指针再次到达&#xff0c;则链表中存在环。 为了表示给定链表中的环&#xff0c;评测系统内部使用整数 pos 来表示链表尾连接到链表中的位置&…

教你用AI做治愈系风景动态视频

这几天刚发布AI小红薯商单变现案例库&#xff0c;同学们私信表示案例库启发很大&#xff0c;很有价值&#xff0c;只是能不能再多来点手把手式的实操教程&#xff01; 这是个好需求&#xff0c;没问题~&#xff0c;今天就手把手地给大家分享一个近半年来&#xff0c;在各大平台…

优思学院:六西格玛项目中什么是顾客之声?

让客户的声音成就您的成功&#xff01; 顾客之声(Voice of customer-VOC)是六西格玛项目中的一个重要概念&#xff0c;指的是从顾客的角度和需求出发&#xff0c;通过收集和分析顾客的反馈和意见&#xff0c;以了解他们对产品或服务的期望、满意度和不满意之处。顾客之声的目的…

分享几个可以免费使用GPT工具

1. 国产可以使用GPT3.5和4.0的网站&#xff0c;每日有免费的使用额度&#xff0c;响应速度&#xff0c;注册时不用使用手机号&#xff0c;等个人信息&#xff0c;注重用户隐私&#xff0c;好评&#xff01; 一个好用的ChatGPT系统 &#xff0c;可以免费使用3.5 和 4.0https://…

springboot+java校园自助洗衣机预约系统的分析与设计ssm+jsp

洗衣服是每个人都必须做的事情&#xff0c;而洗衣机更成为了人们常见的电器&#xff0c;但是单个洗衣机价格不菲&#xff0c;如果每人都买&#xff0c;就会造成资源的冗余。所有就出现了公用设备&#xff0c;随着时代的发展&#xff0c;很多公用都开始向着无人看守的自助模式经…

ChatGLM2详细安装部署(chatglm2大模型安装步骤三)

ChatGLM2安装部署 1.服务器配置 服务器系统:Centos7.9 x64 显卡:RTX3090 (24G) 虚拟环境:Miniconda3 2.安装部署 2.1 ChatGLM2下载 输入命令:git clone https://github.moeyy.xyz/https://github.com/THUDM/ChatGLM2-6B.git 输入命令:cd ChatGLM2-6B 注:https://g…

【note: This is an issue with the package mentioned above, not pip.】

安装gym时出现问题&#xff0c;note: This is an issue with the package mentioned above, not pip. 报错原因&#xff1a; 缺失了某些依赖模块&#xff0c;所以安装报错。 Collecting package metadata (current_repodata.json): done Solving environment: failed with in…

2021年11月10日 Go生态洞察:Twelve Years of Go

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

关于电脑提示vcruntime140_1.dll无法继续执行代码的解决办法

vcruntime140_1.dll是Visual C运行时库的一个组成部分&#xff0c;它包含了大量用于支持C应用程序运行时的功能。这个文件通常在开发和使用C程序时被调用&#xff0c;特别是在使用Microsoft Visual Studio进行开发时。vcruntime140_1.dll文件丢失或损坏会导致C程序无法正常运行…

python 使用reportlab打造29页图文并茂pdf(全网reportlab最强pdf自动化生成代码)

python 使用reportlab打造29页图文并茂pdf(全网reportlab最强pdf自动化生成代码&#xff09; 这次项目所使用的代码如果同志们可以灵活使用&#xff0c;基本上可以解决百分之九十以上的pdf模板自动化生成。 最近博主&#xff0c;做了一个项目&#xff0c;使用reportlab制作pd…

JDK10新特性

目录 传送门一、局部变量类型推断1、概念1.1、简单局部变量推断1.2、自定义对象的推断 2、可以使用的场景3、不能使用的场景4、注意事项 二、垃圾回收器的优化1、前置知识1.1、10种垃圾回收器1.2、分代与分区1.3、10种垃圾回收器小总结 2、优化点 三、新增API1、集合新方法copy…

多线程(初阶六:单例模式)

一、单例模式的简单介绍 二、饿汉模式 三、懒汉模式 四、饿汉模式和懒汉模式的线程安全问题分析 一、单例模式的简单介绍 单例模式是一种设计模式&#xff0c;其中设计模式是软性的规定&#xff0c;与它关联的框架是硬性的规定&#xff0c;这些都是大佬已经设计好了的&…

【工作记录】spider-flow使用插件连接并操作mongodb数据库

前言 前面说过&#xff0c;spider-flow有着非常优秀的插件机制&#xff0c;可以通过插件实现功能的扩展。前面有小伙伴问到mongodb的集成使用&#xff0c;本文就来梳理下spider-flow中使用mongodb插件的过程&#xff0c;其实非常简单。 PS: spider-flow的作者已经实现了一些常…

线程池技术总结

1. 线程池解决了什么问题 线程池是集中管理线程的&#xff0c;以实现线程的重用&#xff0c;降低资源消耗&#xff0c;提高响应速度&#xff0c;提高线程的可管理性等。线程用于执行异步任务&#xff0c;单个的线程既是工作单元也是执行机制&#xff0c;从JDK1.5开始&#xff…

文心一言 VS 讯飞星火 VS chatgpt (147)-- 算法导论12.2 2题

二、用go语言&#xff0c;写出 TREE-MINIMUM 和 TREE-MAXIMUM 的递归版本。 灵捷3.5 。 文心一言&#xff1a; 以下是用 Go 语言编写的树的最大值和最小值的递归版本代码&#xff1a; package main import ( "fmt" ) type TreeNode struct { Val int Le…

哈希表 LeetCode 2661. 找出叠涂元素

2661. 找出叠涂元素 给你一个下标从 0 开始的整数数组 arr 和一个 m x n 的整数 矩阵 mat 。arr 和 mat 都包含范围 [1&#xff0c;m * n] 内的 所有 整数。 从下标 0 开始遍历 arr 中的每个下标 i &#xff0c;并将包含整数 arr[i] 的 mat 单元格涂色。 请你找出 arr 中在 …

LeetCode105.从前序和中序遍历序列构造二叉树

这道题看完题想了几分钟就想到大概的思路了&#xff0c;但是在写的时候有很多细节没注意出了很多问题&#xff0c;然后写了1个多小时&#xff0c;其实这道题挺简单的。 首先&#xff0c;最基本的知识&#xff0c;先序遍历是根左右&#xff0c;中序遍历是左根右&#xff0c;那么…

重磅!GPT-4 API,全面开放使用!

7月7日&#xff0c;OpenAI在官网宣布&#xff0c;GPT-4 API全面开放使用。现所有付费API用户都可直接访问8K上下文的GPT-4&#xff0c;无需任何等待。 预计到7月底之前&#xff0c;OpenAI会向全新的开发人员开放GPT-4 API使用权限。&#xff08;API详细使用说明地址&#xff1…
最新文章