vue3+element-plus实现图片上传和下载，包含权限认证

单张图片上传

<template>
  <el-upload
    class="avatar-uploader"
    action="http://127.0.0.1:8080/upload"
    :show-file-list="false"
    :on-success="handleAvatarSuccess"
    :before-upload="beforeAvatarUpload"
    :headers="{ Authorization: 'qq:976961880' }"
  >
    <img v-if="imageUrl" :src="imageUrl" class="avatar" />
    <i v-else class="el-icon-plus avatar-uploader-icon"></i>
  </el-upload>
</template>

<script>
export default {
  data() {
    return {
      imageUrl: "",
    };
  },
  methods: {
    handleAvatarSuccess(res, file) {
      this.imageUrl = URL.createObjectURL(file.raw);
    },
    beforeAvatarUpload(file) {
      //   const isJPG = file.type === "image/jpeg";
      const isLt2M = file.size / 1024 / 1024 < 2;

      //   if (!isJPG) {
      //     this.$message.error("上传头像图片只能是 JPG 格式!");
      //   }
      if (!isLt2M) {
        this.$message.error("上传头像图片大小不能超过 2MB!");
      }
      //   return isJPG && isLt2M;
      return isLt2M;
    },
  },
};
</script>

<style>
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>

多图上传

<template>
  <el-upload
    action="http://127.0.0.1:8080/upload"
    list-type="picture-card"
    :on-preview="handlePictureCardPreview"
    :on-remove="handleRemove"
    :headers="{ Authorization: 'qq:976961880' }"
  >
    <i class="el-icon-plus"></i>
  </el-upload>
  <el-dialog v-model="dialogVisible">
    <img width="100%" :src="dialogImageUrl" alt="" />
  </el-dialog>
</template>

<script>
export default {
  data() {
    return {
      dialogImageUrl: "",
      dialogVisible: false,
    };
  },
  methods: {
    handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
  },
};
</script>

<style>
</style>

上传脚本

package main

import (
 "io/ioutil"
 "net/http"
 "os"

 "github.com/gin-contrib/cors"

 "github.com/gin-gonic/gin"
)

const SERVER = "http://127.0.0.1:8080"

//TODO Test资源文件下载
func DownloadFileService(c *gin.Context) {
 fileName := c.Param("name")
 //打开文件
 _, errByOpenFile := os.Open("./upload/" + fileName)
 //非空处理
 if errByOpenFile != nil {
  /*c.JSON(http.StatusOK, gin.H{
   "success": false,
   "message": "失败",
   "error":   "资源不存在",
  })*/
  c.JSON(http.StatusBadRequest, gin.H{"msg": errByOpenFile.Error(), "code": 1})
  return
 }
 c.Header("Content-Type", "application/octet-stream")
 c.Header("Content-Disposition", "attachment; filename="+fileName)
 c.Header("Content-Transfer-Encoding", "binary")
 c.File("./upload/" + fileName)
}
func main() {
 router := gin.Default()
 defaultConfig := cors.DefaultConfig()
 defaultConfig.AllowAllOrigins = true
 defaultConfig.AllowMethods = []string{"GET", "POST", "PUT", "PATCH", "DELETE", "HEAD", "OPTIONS"}
 defaultConfig.AllowHeaders = []string{"Origin", "Content-Length", "Content-Type", "Authorization"}
 defaultConfig.ExposeHeaders = []string{"Content-Length"}
 router.Use(cors.New(defaultConfig))

 //公共图片目录
 router.Static("/upload", "./upload")
 router.GET("/yuemaedu", func(c *gin.Context) {
  c.JSON(http.StatusOK, gin.H{"msg": "success", "code": 0})
 })
 // 根据流显示图片
 router.GET("/img/:name", func(c *gin.Context) {
  imageName := c.Param("name")
  file, _ := ioutil.ReadFile("./upload/" + imageName)
  c.Writer.WriteString(string(file))
 })
 //下载图片
 router.GET("/downloadFiles/:name", DownloadFileService)

 router.Use(func(c *gin.Context) {
  if c.GetHeader("Authorization") != "qq:976961880" {
   c.AbortWithStatusJSON(http.StatusBadRequest, gin.H{"msg": "auth failed", "code": 1})
   return
  }
  c.Next()
 })

 // 上传单张图片
 router.POST("/upload", func(c *gin.Context) {
  //获取文件头
  file, err := c.FormFile("file")
  if err != nil {
   c.JSON(http.StatusBadRequest, gin.H{"msg": err.Error(), "code": 1})
   return
  }
  if _, err := os.Stat("./upload"); err != nil {
   if os.IsNotExist(err) {
    os.Mkdir("./upload", 0777)
   }
  }
  fileName := file.Filename
  if err := c.SaveUploadedFile(file, "./upload/"+fileName); err != nil {
   c.JSON(http.StatusBadRequest, gin.H{"msg": err.Error(), "code": 1})
   return
  }
  c.JSON(http.StatusOK, gin.H{"msg": "success", "data": SERVER + "/upload/" + fileName, "code": 0})
 })
 // 上传多张图片
 router.POST("/uploads", func(c *gin.Context) {
  form, _ := c.MultipartForm()
  files := form.File["file[]"]
  if _, err := os.Stat("./upload"); err != nil {
   if os.IsNotExist(err) {
    os.Mkdir("./upload", 0777)
   }
  }
  imgList := []string{}
  for _, file := range files {
   fileName := file.Filename
   if err := c.SaveUploadedFile(file, "./upload/"+fileName); err != nil {
    c.JSON(http.StatusBadRequest, gin.H{"msg": err.Error(), "code": 1})
    return
   } else {
    imgList = append(imgList, SERVER+"/upload/"+fileName)
   }
  }
  c.JSON(http.StatusOK, gin.H{"msg": "success", "data": imgList, "code": 0})
 })
 router.Run()
}

- END -