槑槑
V1
2021/06/25阅读:435主题:极简黑
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()
}

作者介绍
槑槑
V1