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

11 篇文章 0 订阅

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>

效果如图
在这里插入图片描述

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

结城明日奈是我老婆

支持一下一直热爱程序的菜鸟吧

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值