当前位置: 首页 > article >正文

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.kler.cn/a/158069.html

相关文章:

  • 【Python】实现一个简单的区块链系统
  • go-carbon v2.2.14 发布,轻量级、语义化、对开发者友好的 Golang 时间处理库
  • ❀My学习Linux命令小记录(12)❀
  • 策略梯度简明教程
  • 飞行汽车开发原理(上)
  • 做题笔记:SQL Sever 方式做牛客SQL的题目--VQ29
  • 打开游戏提示缺少(或找不到)XINPUT1_3.DLL怎么解决
  • 【C语言】深入理解指针(1)
  • Backend - Django JsonResponse HttpResponse
  • 使用 Amazon S3 托管静态网站
  • MSS和MTU的关系
  • 研究发现GPT-4具有出乎意料的文字理解能力;GPT-4 Turbo与GPT-4编辑代码的比较结果
  • FastDFS部署
  • 销售工作中如何满足客户的需求?
  • 【unity3D】Transform组件(如何访问和获取Transform组件)
  • SELinux refpolicy详解(7)
  • Shopee买家通系统全自动模拟真人下单更真实
  • 外包干了2个月,技术倒退2年。。。。。
  • 如何理解点到点传输,如果加速点到点传输速度
  • docker搭建node环境开发服务器