vue上传文件到go服务器demo

出现的问题：
1、:before-upload="beforeUpload"是对文件上传做做前置条件限制，但是当auto-upload设置为false时，发现before-upload事件没效果。
最后使用on-change事件来代替before-upload，注意保留on-change事件中原来的钩子

前端：

<template>
  <el-upload
      class="upload-demo"
      ref="upload"
      action="#"
      :accept="accept"
      :on-preview="handlePreview"
      :on-remove="handleRemove"
      :file-list="fileList"
      :on-change="beforeUpload"
      :auto-upload="false">
    <el-button style="" slot="trigger" size="small" type="primary">选取文件</el-button>
    <el-button style="margin-left: 10px;" :disabled="fileList.length<1" size="small" type="success"
               @click="submitUpload">上传到服务器
    </el-button>
    <!-- 上传提示   :before-upload="beforeUpload"-->
    <div class="el-upload__tip" slot="tip" v-if="showTip">
      请上传
      <template v-if="fileSize"> 大小不超过 <b style="color: #f56c6c">{{ fileSize }}MB</b></template>
      <template v-if="fileType"> 格式为 <b style="color: #f56c6c">{{ fileType.join("/") }}</b></template>
      的文件
    </div>
  </el-upload>
</template>

<script>

import axios from "axios";
import storageService from "@/service/storageService";

export default {
  name: "Image",
  props: {
    // 值
    value: [String, Object, Array],
    // 大小限制(MB)
    fileSize: {
      type: Number,
      default: 2,
    },
    // 文件类型, 例如['png', 'jpg', 'jpeg']数组
    fileType: {
      type: Array,
      // default: () => [".jpg", ".jpeg", ".png", ".doc", ".xls", ".xlsx", ".ppt", ".txt", ".pdf"],
      default: () => [".pdf"],
    },
  },
  data() {
    return {
      fileList: [],//上传的文件列表
      accept: '',//可上传的文件类型
    }
  },
  created() {
    // 从数据中拼接fileType可以接收的类型
    this.fileType.forEach(el => {
      this.accept += el
      this.accept += ','
    })
    this.fileType.slice(0, this.fileList.length - 2)
  },
  methods: {
    // 上传文件之前的钩子：判断上传文件格式、大小等，若返回false则停止上传
    beforeUpload(file,fileList) {
      //文件状态改变时的钩子，文件变化时给fileList赋值，fileList通过这种方式获取值；
      this.fileList=fileList;
      // 校检文件类型
      if (this.fileType) {
        let fileExtension = "";//file的后缀名
        //file name test.pdf
        if (file.name.lastIndexOf(".") > -1) {
          fileExtension = file.name.slice(file.name.lastIndexOf("."));//获取file后缀名
        }
        //循环遍历fileType数组，传入的文件后缀名是否在数组中
        const isTypeOk = this.fileType.some((type) => {
          // if (file.type.indexOf(type) > -1) return true;
          if (fileExtension && fileExtension.indexOf(type) > -1) return true;
          return false;
        });
        if (!isTypeOk) {
          this.$message.error(`文件格式不正确, 请上传${this.fileType.join("/")}格式文件!`);
          return false;
        }
      }
      // 校检文件大小
      if (this.fileSize) {
        const isLt = file.size / 1024 / 1024 < this.fileSize;
        if (!isLt) {
          this.$message.error(`上传文件大小不能超过 ${this.fileSize} MB!`);
          return false;
        }
      }
      return true;
    },
    //文件状态改变时的钩子，添加文件、上传成功和上传失败时都会被调用；和handleChange函数绑定，文件变化时给fileList赋值，fileList通过这种方式获取值；
    handleChange(file, fileList) {
      this.fileList = fileList;
    },
    submitUpload() { //上传到服务器
      const param = new FormData();//发送的数据应为FormDate格式，因此新建一个FormDate格式的param变量存放上传的文件列表；
      this.fileList.forEach(//不能直接将fileList数组赋给param变量，应该对fileList进行forEach遍历，通过val.raw来取得文件内容赋给param变量
          val=> {
            //把多个文件放到同一个请求里，这样只会请求一次接口。否则一个文件就会请求一次
            param.append("file", val.raw);
          }
      );
      const config = {
        headers: {
          "Content-Type": "multipart/form-data",
          'Authorization': `Bearer ${storageService.get(storageService.USER_TOKEN)}`
        }
      }
      axios.post("http://localhost:8080/api/file/upload", param, config)
          .then(res => {
            console.log(res)
            // 这里的res需根据后台返回情况判断
            if (res.data.code === 200) {
              //将文件列表置为空
              this.fileList=[];
              //上传成功处理
              this.$message({
                message: "文件上传成功！",
                duration: 1000
              });
            }
          },).catch(err => {
        console.log(err)
        this.$message.error('文件上传失败！');
      });

    },
    handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    handlePreview(file) {
      console.log(file);
    }
  }
}
</script
<style scoped>
</style>

后端：

package controller

import (
	"bmsgo/response"
	"bmsgo/utils"
	"github.com/gin-gonic/gin"
	"path/filepath"
	"strconv"
	"time"
)

//上传文件到服务器
func Upload(ctx *gin.Context) {

	form, err := ctx.MultipartForm()
	if err != nil {
		return
	}
	if len(form.File) < 0 {
		return
	}
	if form, err := ctx.MultipartForm(); err == nil {
		//1.获取文件
		files := form.File["file"]
		//2.循环全部的文件
		for _, file := range files {
			// 3.根据时间鹾生成文件名
			fileNameInt := time.Now().Unix()
			fileNameStr := strconv.FormatInt(fileNameInt, 10)
			//4.新的文件名(如果是同时上传多张图片的时候就会同名，因此这里使用时间鹾加文件名方式)
			fileName := fileNameStr + file.Filename
			//5.保存上传文件
			filePath := filepath.Join(utils.Mkdir("upload"), "/", fileName)
			err := ctx.SaveUploadedFile(file, filePath)
			if err != nil {
				return
			}
		}
		response.Success(ctx, gin.H{"file": "upload success!"}, "文件上传成功！")
		return
	} else {
		response.Fail(ctx, gin.H{"file": "upload failed"}, "文件上传失败！")
		return
	}
}