Skip to content

G
gin-vue-admin

HeliosJ / gin-vue-admin
与 Fork 源项目一致

Fork自 FLIPPED-AURORA / gin-vue-admin

通知 4
Star 0
Fork 0
G
gin-vue-admin

前往新版Gitcode，体验更适合开发者的 AI 搜索 >>

提交 0d7a291b 编写于 作者: G Granty1
浏览文件
操作

Fixed callback bug in front end file upload & move some constants to config.yaml

上级 d761b91d
隐藏空白更改
内联 并排
Showing with 143 addition and 123 deletion
server/api/v1/exa_file_upload_download.go
浏览文件 @ 0d7a291b
......@@ -27,7 +27,7 @@ func UploadFile(c *gin.Context) {
response.FailWithMessage(fmt.Sprintf("上传文件失败，%v", err), c)
} else {
//文件上传后拿到文件路径
err, filePath, key := utils.Upload(header, USER_HEADER_BUCKET, USER_HEADER_IMG_PATH)
err, filePath, key := utils.Upload(header)
if err != nil {
response.FailWithMessage(fmt.Sprintf("接收返回值失败，%v", err), c)
} else {
......@@ -45,7 +45,6 @@ func UploadFile(c *gin.Context) {
response.FailWithMessage(fmt.Sprintf("修改数据库链接失败，%v", err), c)
} else {
response.OkDetailed(resp.ExaFileResponse{File: file}, "上传成功", c)
}
}
}
......@@ -65,7 +64,7 @@ func DeleteFile(c *gin.Context) {
if err != nil {
response.FailWithMessage(fmt.Sprintf("删除失败，%v", err), c)
} else {
err = utils.DeleteFile(USER_HEADER_BUCKET, f.Key)
err = utils.DeleteFile(f.Key)
if err != nil {
response.FailWithMessage(fmt.Sprintf("删除失败，%v", err), c)
......
server/api/v1/sys_user.go
浏览文件 @ 0d7a291b
......@@ -18,11 +18,6 @@ import (
"time"
)
const (
USER_HEADER_IMG_PATH string = "http://qmplusimg.henrongyi.top"
USER_HEADER_BUCKET string = "qm-plus-img"
)
// @Tags Base
// @Summary 用户注册账号
// @Produce application/json
......@@ -172,7 +167,7 @@ func UploadHeaderImg(c *gin.Context) {
response.FailWithMessage(fmt.Sprintf("上传文件失败，%v", err), c)
} else {
//文件上传后拿到文件路径
err, filePath, _ := utils.Upload(header, USER_HEADER_BUCKET, USER_HEADER_IMG_PATH)
err, filePath, _ := utils.Upload(header)
if err != nil {
response.FailWithMessage(fmt.Sprintf("接收返回值失败，%v", err), c)
} else {
......
server/config.yaml
浏览文件 @ 0d7a291b
......@@ -18,16 +18,19 @@ mysql:
max-idle-conns: 10
max-open-conns: 10
log-mode: true
#sqlite 配置
sqlite:
path: db.db
log-mode: true
config: 'loc=Asia/Shanghai'
# oss configuration
qiniu:
access-key: '25j8dYBZ2wuiy0yhwShytjZDTX662b8xiFguwxzZ'
secret-key: 'pgdbqEsf7ooZh7W3xokP833h3dZ_VecFXPDeG5JY'
bucket: 'qm-plus-img'
img-path: 'http://qmplusimg.henrongyi.top'
# redis configuration
redis:
addr: '127.0.0.1:6379'
......
server/config/config.go
浏览文件 @ 0d7a291b
......@@ -46,6 +46,8 @@ type Redis struct {
type Qiniu struct {
AccessKey string `mapstructure:"access-key" json:"accessKey" yaml:"access-key"`
SecretKey string `mapstructure:"secret-key" json:"secretKey" yaml:"secret-key"`
Bucket string `mapstructure:"bucket" json:"bucket" yaml:"bucket"`
ImgPath string `mapstructure:"img-path" json:"imgPath" yaml:"img-path"`
}
type Captcha struct {
......
server/utils/upload.go
浏览文件 @ 0d7a291b
......@@ -14,9 +14,9 @@ var accessKey string = global.GVA_CONFIG.Qiniu.AccessKey // 你在七牛云的ac
var secretKey string = global.GVA_CONFIG.Qiniu.SecretKey // 你在七牛云的secretKey 这里是我个人测试号的key 仅供测试使用 恳请大家不要乱传东西
// 接收两个参数 一个文件流 一个 bucket 你的七牛云标准空间的名字
func Upload(file *multipart.FileHeader, bucket string, urlPath string) (err error, path string, key string) {
func Upload(file *multipart.FileHeader) (err error, path string, key string) {
putPolicy := storage.PutPolicy{
Scope: bucket,
Scope: global.GVA_CONFIG.Qiniu.Bucket,
}
mac := qbox.NewMac(accessKey, secretKey)
upToken := putPolicy.UploadToken(mac)
......@@ -43,14 +43,13 @@ func Upload(file *multipart.FileHeader, bucket string, urlPath string) (err erro
fileKey := fmt.Sprintf("%d%s", time.Now().Unix(), file.Filename) // 文件名格式 自己可以改 建议保证唯一性
err = formUploader.Put(context.Background(), &ret, upToken, fileKey, f, dataLen, &putExtra)
if err != nil {
fmt.Println(err)
//qmlog.QMLog.Info(err)
global.GVA_LOG.Error("upload file fail:", err)
return err, "", ""
}
return err, urlPath + "/" + ret.Key, ret.Key
return err, global.GVA_CONFIG.Qiniu.ImgPath + "/" + ret.Key, ret.Key
}
func DeleteFile(bucket string, key string) error {
func DeleteFile(key string) error {
mac := qbox.NewMac(accessKey, secretKey)
cfg := storage.Config{
......@@ -61,7 +60,7 @@ func DeleteFile(bucket string, key string) error {
// 如果没有特殊需求，默认不需要指定
//cfg.Zone=&storage.ZoneHuabei
bucketManager := storage.NewBucketManager(mac, &cfg)
err := bucketManager.Delete(bucket, key)
err := bucketManager.Delete(global.GVA_CONFIG.Qiniu.Bucket, key)
if err != nil {
fmt.Println(err)
return err
......
web/src/view/example/upload/upload.vue
浏览文件 @ 0d7a291b
<template>
<div v-loading.fullscreen.lock="fullscreenLoading">
<div class="upload">
<el-upload
:action="`${path}/fileUploadAndDownload/upload`"
:before-upload="checkFile"
:headers="{'x-token':token}"
:on-error="uploadError"
:on-success="uploadSuccess"
:show-file-list="false"
>
<el-button size="small" type="primary">点击上传</el-button>
<div class="el-upload__tip" slot="tip">只能上传jpg/png文件，且不超过500kb</div>
</el-upload>
<el-table :data="tableData" border stripe>
<el-table-column label="预览" width="100">
<template slot-scope="scope">
<img :alt="scope.row.alt" :src="scope.row.url" height="80" width="80" />
</template>
</el-table-column>
<el-table-column label="日期" prop="UpdatedAt" width="180">
<template slot-scope="scope">
<div>{{scope.row.UpdatedAt|formatDate}}</div>
</template>
</el-table-column>
<el-table-column label="文件名" prop="name" width="180"></el-table-column>
<el-table-column label="链接" prop="url"></el-table-column>
<el-table-column label="标签" prop="tag" width="100">
<template slot-scope="scope">
<el-tag
:type="scope.row.tag === 'jpg' ? 'primary' : 'success'"
disable-transitions
>{{scope.row.tag}}</el-tag>
</template>
</el-table-column>
<el-table-column label="操作" width="100">
<template slot-scope="scope">
<el-button @click="downloadFile(scope.row)" size="small" type="text">下载</el-button>
<el-button @click="deleteFile(scope.row)" size="small" type="text">删除</el-button>
</template>
</el-table-column>
</el-table>
<el-pagination
:current-page="page"
:page-size="pageSize"
:page-sizes="[10, 30, 50, 100]"
:style="{float:'right',padding:'20px'}"
:total="total"
@current-change="handleCurrentChange"
@size-change="handleSizeChange"
layout="total, sizes, prev, pager, next, jumper"
></el-pagination>
<el-upload
:action="`${path}/fileUploadAndDownload/upload`"
:before-upload="checkFile"
:headers="{ 'x-token': token }"
:on-error="uploadError"
:on-success="uploadSuccess"
:show-file-list="false"
>
<el-button size="small" type="primary">点击上传</el-button>
<div class="el-upload__tip" slot="tip">
只能上传jpg/png文件，且不超过500kb
</div>
</el-upload>
<el-table :data="tableData" border stripe>
<el-table-column label="预览" width="100">
<template slot-scope="scope">
<img
:alt="scope.row.alt"
:src="scope.row.url"
height="80"
width="80"
/>
</template>
</el-table-column>
<el-table-column label="日期" prop="UpdatedAt" width="180">
<template slot-scope="scope">
<div>{{ scope.row.UpdatedAt | formatDate }}</div>
</template>
</el-table-column>
<el-table-column
label="文件名"
prop="name"
width="180"
></el-table-column>
<el-table-column label="链接" prop="url"></el-table-column>
<el-table-column label="标签" prop="tag" width="100">
<template slot-scope="scope">
<el-tag
:type="scope.row.tag === 'jpg' ? 'primary' : 'success'"
disable-transitions
>{{ scope.row.tag }}</el-tag
>
</template>
</el-table-column>
<el-table-column label="操作" width="100">
<template slot-scope="scope">
<el-button @click="downloadFile(scope.row)" size="small" type="text"
>下载</el-button
>
<el-button @click="deleteFile(scope.row)" size="small" type="text"
>删除</el-button
>
</template>
</el-table-column>
</el-table>
<el-pagination
:current-page="page"
:page-size="pageSize"
:page-sizes="[10, 30, 50, 100]"
:style="{ float: 'right', padding: '20px' }"
:total="total"
@current-change="handleCurrentChange"
@size-change="handleSizeChange"
layout="total, sizes, prev, pager, next, jumper"
></el-pagination>
</div>
</div>
</template>
<script>
const path = process.env.VUE_APP_BASE_API
import { mapGetters } from 'vuex'
import infoList from '@/components/mixins/infoList'
import { getFileList, deleteFile } from '@/api/fileUploadAndDownload'
import { downloadImage } from '@/utils/downloadImg'
import { formatTimeToStr } from '@/utils/data'
const path = process.env.VUE_APP_BASE_API;
import { mapGetters } from "vuex";
import infoList from "@/components/mixins/infoList";
import { getFileList, deleteFile } from "@/api/fileUploadAndDownload";
import { downloadImage } from "@/utils/downloadImg";
import { formatTimeToStr } from "@/utils/data";
export default {
name: 'Upload',
name: "Upload",
mixins: [infoList],
data() {
return {
fullscreenLoading:false,
fullscreenLoading: false,
listApi: getFileList,
path: path,
tableData: []
}
tableData: [],
};
},
computed: {
...mapGetters('user', ['userInfo', 'token'])
...mapGetters("user", ["userInfo", "token"]),
},
filters: {
formatDate: function(time) {
if (time != null && time != '') {
var date = new Date(time)
return formatTimeToStr(date, 'yyyy-MM-dd hh:mm:ss')
if (time != null && time != "") {
var date = new Date(time);
return formatTimeToStr(date, "yyyy-MM-dd hh:mm:ss");
} else {
return ''
return "";
}
}
},
},
methods: {
async deleteFile(row) {
this.$confirm('此操作将永久文件, 是否继续?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
this.$confirm("此操作将永久文件, 是否继续?", "提示", {
confirmButtonText: "确定",
cancelButtonText: "取消",
type: "warning",
})
.then(async () => {
const res = await deleteFile(row)
const res = await deleteFile(row);
if (res.code == 0) {
this.$message({
type: 'success',
message: '删除成功!'
})
this.getTableData()
type: "success",
message: "删除成功!",
});
this.getTableData();
}
})
.catch(() => {
this.$message({
type: 'info',
message: '已取消删除'
})
})
type: "info",
message: "已取消删除",
});
});
},
checkFile(file) {
this.fullscreenLoading = true
const isJPG = file.type === 'image/jpeg'
const isPng = file.type === 'image/png'
const isLt2M = file.size / 1024 / 1024 < 2
this.fullscreenLoading = true;
const isJPG = file.type === "image/jpeg";
const isPng = file.type === "image/png";
const isLt2M = file.size / 1024 / 1024 < 2;
if (!isJPG && !isPng) {
this.$message.error('上传头像图片只能是 JPG或png 格式!')
this.fullscreenLoading = false
this.$message.error("上传头像图片只能是 JPG或png 格式!");
this.fullscreenLoading = false;
}
if (!isLt2M) {
this.$message.error('上传头像图片大小不能超过 2MB!')
this.fullscreenLoading = false
this.$message.error("上传头像图片大小不能超过 2MB!");
this.fullscreenLoading = false;
}
return (isPng || isJPG) && isLt2M
return (isPng || isJPG) && isLt2M;
},
uploadSuccess(res) {
this.$message({
type: 'success',
message: '上传成功'
})
this.fullscreenLoading = false;
if (res.code == 0) {
this.getTableData()
this.$message({
type: "success",
message: "上传成功",
});
if (res.code == 0) {
this.getTableData();
}
} else {
this.$message({
type: "warning",
message: res.msg,
});
}
this.fullscreenLoading = false
},
uploadError() {
this.$message({
type: 'error',
message: '上传失败'
})
this.fullscreenLoading = false
type: "error",
message: "上传失败",
});
this.fullscreenLoading = false;
},
downloadFile(row) {
downloadImage(row.url, row.name)
}
downloadImage(row.url, row.name);
},
},
created() {
this.getTableData();
},
created(){
this.getTableData()
}
}
</script>
\ No newline at end of file
};
</script>
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或