|
|
|
@ -10,12 +10,19 @@ |
|
|
|
:show-file-list="false" |
|
|
|
> |
|
|
|
<el-button size="small" type="primary">点击上传</el-button> |
|
|
|
<div class="el-upload__tip" slot="tip">只能上传jpg/png文件，且不超过500kb</div> |
|
|
|
<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" /> |
|
|
|
<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"> |
|
|
|
@ -23,20 +30,29 @@ |
|
|
|
<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="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> |
|
|
|
>{{ 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> |
|
|
|
<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> |
|
|
|
@ -55,99 +71,105 @@ |
|
|
|
</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, |
|
|
|
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.fullscreenLoading = false; |
|
|
|
if (res.code == 0) { |
|
|
|
this.$message({ |
|
|
|
type: 'success', |
|
|
|
message: '上传成功' |
|
|
|
}) |
|
|
|
type: "success", |
|
|
|
message: "上传成功", |
|
|
|
}); |
|
|
|
if (res.code == 0) { |
|
|
|
this.getTableData() |
|
|
|
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() |
|
|
|
} |
|
|
|
} |
|
|
|
this.getTableData(); |
|
|
|
}, |
|
|
|
}; |
|
|
|
</script> |
Granty1
5 years ago