Granty1
5 years ago
6 changed files with 143 additions and 123 deletions
-
5server/api/v1/exa_file_upload_download.go
-
7server/api/v1/sys_user.go
-
5server/config.yaml
-
2server/config/config.go
-
13server/utils/upload.go
-
234web/src/view/example/upload/upload.vue
@ -1,153 +1,175 @@ |
|||
<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> |
|||
}; |
|||
</script> |
|||
Write
Preview
Loading…
Cancel
Save
Reference in new issue