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> |
<template> |
||||
<div v-loading.fullscreen.lock="fullscreenLoading"> |
<div v-loading.fullscreen.lock="fullscreenLoading"> |
||||
<div class="upload"> |
<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> |
||||
</div> |
</div> |
||||
</template> |
</template> |
||||
|
|
||||
|
|
||||
<script> |
<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 { |
export default { |
||||
name: 'Upload', |
|
||||
|
name: "Upload", |
||||
mixins: [infoList], |
mixins: [infoList], |
||||
data() { |
data() { |
||||
return { |
return { |
||||
fullscreenLoading:false, |
|
||||
|
fullscreenLoading: false, |
||||
listApi: getFileList, |
listApi: getFileList, |
||||
path: path, |
path: path, |
||||
tableData: [] |
|
||||
} |
|
||||
|
tableData: [], |
||||
|
}; |
||||
}, |
}, |
||||
computed: { |
computed: { |
||||
...mapGetters('user', ['userInfo', 'token']) |
|
||||
|
...mapGetters("user", ["userInfo", "token"]), |
||||
}, |
}, |
||||
filters: { |
filters: { |
||||
formatDate: function(time) { |
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 { |
} else { |
||||
return '' |
|
||||
|
return ""; |
||||
} |
} |
||||
} |
|
||||
|
}, |
||||
}, |
}, |
||||
methods: { |
methods: { |
||||
async deleteFile(row) { |
async deleteFile(row) { |
||||
this.$confirm('此操作将永久文件, 是否继续?', '提示', { |
|
||||
confirmButtonText: '确定', |
|
||||
cancelButtonText: '取消', |
|
||||
type: 'warning' |
|
||||
|
this.$confirm("此操作将永久文件, 是否继续?", "提示", { |
||||
|
confirmButtonText: "确定", |
||||
|
cancelButtonText: "取消", |
||||
|
type: "warning", |
||||
}) |
}) |
||||
.then(async () => { |
.then(async () => { |
||||
const res = await deleteFile(row) |
|
||||
|
const res = await deleteFile(row); |
||||
if (res.code == 0) { |
if (res.code == 0) { |
||||
this.$message({ |
this.$message({ |
||||
type: 'success', |
|
||||
message: '删除成功!' |
|
||||
}) |
|
||||
this.getTableData() |
|
||||
|
type: "success", |
||||
|
message: "删除成功!", |
||||
|
}); |
||||
|
this.getTableData(); |
||||
} |
} |
||||
}) |
}) |
||||
.catch(() => { |
.catch(() => { |
||||
this.$message({ |
this.$message({ |
||||
type: 'info', |
|
||||
message: '已取消删除' |
|
||||
}) |
|
||||
}) |
|
||||
|
type: "info", |
||||
|
message: "已取消删除", |
||||
|
}); |
||||
|
}); |
||||
}, |
}, |
||||
checkFile(file) { |
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) { |
if (!isJPG && !isPng) { |
||||
this.$message.error('上传头像图片只能是 JPG或png 格式!') |
|
||||
this.fullscreenLoading = false |
|
||||
|
this.$message.error("上传头像图片只能是 JPG或png 格式!"); |
||||
|
this.fullscreenLoading = false; |
||||
} |
} |
||||
if (!isLt2M) { |
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) { |
uploadSuccess(res) { |
||||
this.$message({ |
|
||||
type: 'success', |
|
||||
message: '上传成功' |
|
||||
}) |
|
||||
|
this.fullscreenLoading = false; |
||||
if (res.code == 0) { |
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() { |
uploadError() { |
||||
this.$message({ |
this.$message({ |
||||
type: 'error', |
|
||||
message: '上传失败' |
|
||||
}) |
|
||||
this.fullscreenLoading = false |
|
||||
|
|
||||
|
type: "error", |
||||
|
message: "上传失败", |
||||
|
}); |
||||
|
this.fullscreenLoading = false; |
||||
}, |
}, |
||||
downloadFile(row) { |
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