Skip to content

C
cms-admin
提交 7b847a37 authored 作者: pengxiaohui's avatar pengxiaohui
浏览文件
操作

图片和文件上传增加预览下载删除功能

上级 2d851a0e
隐藏空白字符变更
内嵌 并排
正在显示 包含 192 行增加 和 52 行删除
src/pages/content-manage/components/DrawerForm.vue
浏览文件 @ 7b847a37
......@@ -32,7 +32,7 @@
</el-form-item>
</div>
<div class="right">
<el-form-item label="web端图片：" class="file-upload">
<el-form-item label="web端图片：" class="file-upload avatar-upload">
<el-upload
:disabled="isDetails"
class="avatar-uploader"
......@@ -42,13 +42,21 @@
<img v-if="form.web_img_uri" :src="form.web_img_uri" class="avatar">
<i v-else class="el-icon-plus avatar-uploader-icon"></i>
</el-upload>
<div class="avatar-preview" v-if="form.web_img_uri">
<i class="el-icon-zoom-in"></i>
<el-image :src="form.web_img_uri" :preview-src-list="[form.web_img_uri]" :z-index="9999"/>
<div class="avatar-upload-bar" v-if="form.web_img_uri">
<div class="avatar-preview">
<i class="el-icon-zoom-in"></i>
<el-image :src="form.web_img_uri" :preview-src-list="[form.web_img_uri]" :z-index="9999"/>
</div>
<div>
<i class="el-icon-download" @click="handleDownloadFile('web_img_uri')"></i>
</div>
<div v-if="!isDetails">
<i class="el-icon-circle-close" @click="handleClearFile('web_img_uri')"></i>
</div>
</div>
<p class="des">请上传文件，最多上传一张/份<br>支持：PNG、JPG</p>
</el-form-item>
<el-form-item label="移动端图片：" class="file-upload">
<el-form-item label="移动端图片：" class="file-upload avatar-upload">
<el-upload
:disabled="isDetails"
action="#"
......@@ -58,32 +66,63 @@
<img v-if="form.mobile_terminal_img_uri" :src="form.mobile_terminal_img_uri" class="avatar">
<i v-else class="el-icon-plus avatar-uploader-icon"></i>
</el-upload>
<div class="avatar-upload-bar" v-if="form.mobile_terminal_img_uri">
<div class="avatar-preview">
<i class="el-icon-zoom-in"></i>
<el-image :src="form.mobile_terminal_img_uri" :preview-src-list="[form.mobile_terminal_img_uri]" :z-index="9999"/>
</div>
<div>
<i class="el-icon-download" @click="handleDownloadFile('mobile_terminal_img_uri')"></i>
</div>
<div v-if="!isDetails">
<i class="el-icon-circle-close" @click="handleClearFile('mobile_terminal_img_uri')"></i>
</div>
</div>
<p class="des">请上传文件，最多上传一张/份<br>支持：PNG、JPG</p>
</el-form-item>
<el-form-item label="上传附件：" class="file-upload">
<el-upload
:disabled="isDetails"
action="#"
class="file-uploader"
ref="upload"
:show-file-list="false"
:before-upload="val => beforeUpload(val, 'enclosure_uri')">
<el-button slot="trigger" size="small" type="primary" :disabled="isDetails">上传文件</el-button>
</el-upload>
<p class="des"><i class="el-icon-circle-check" v-if="form.enclosure_uri"></i>请上传文件，最多上传一份<br>支持：word、excel、pdf</p>
<div style="padding-top:6px;height:36px;">
<el-upload
:disabled="isDetails"
action="#"
class="file-uploader"
ref="upload"
:show-file-list="false"
:before-upload="val => beforeUpload(val, 'enclosure_uri')">
<el-button slot="trigger" size="small" type="primary" :disabled="isDetails">上传文件</el-button>
</el-upload>
<p class="des">
<i class="el-icon-loading" v-if="form.enclosure_uri_loading"></i>
<i class="el-icon-circle-check" v-if="!form.enclosure_uri_loading && form.enclosure_uri"></i>
请上传文件，最多上传一份<br>支持：word、excel、pdf
</p>
</div>
<div class="upload-file-display" v-if="form.enclosure_uri_name">
{{form.enclosure_uri_name}}
<span class="upload-file-bar">
<i class="el-icon-download" @click="handleDownloadFile('enclosure_uri')"></i>
<i class="el-icon-circle-close" @click="handleClearFile('enclosure_uri')"></i>
</span>
</div>
</el-form-item>
<el-form-item label="上传视频：" class="file-upload">
<el-upload
:disabled="isDetails"
action="#"
class="file-uploader"
ref="upload"
:show-file-list="false"
:before-upload="val => beforeUpload(val, 'video_uri')">
<el-button slot="trigger" size="small" type="primary" :disabled="isDetails">上传视频</el-button>
</el-upload>
<i class="el-icon-loading"></i>
<p class="des"><i class="el-icon-circle-check" v-if="form.video_uri"></i>请上传文件，最多上传一份<br>支持：MP4</p>
<div style="padding-top:6px;height:36px;">
<el-upload :disabled="isDetails" action="#" class="file-uploader" ref="upload" :show-file-list="false" :before-upload="val => beforeUpload(val, 'video_uri')">
<el-button slot="trigger" size="small" type="primary" :disabled="isDetails">上传视频</el-button>
</el-upload>
<p class="des">
<i class="el-icon-loading" v-if="form.video_uri_loading"></i>
<i class="el-icon-circle-check" v-if="!form.video_uri_loading && form.video_uri"></i>
请上传文件，最多上传一份<br>支持：MP4
</p>
</div>
<div class="upload-file-display" v-if="form.video_uri_name">
{{form.video_uri_name}}
<span class="upload-file-bar">
<i class="el-icon-download" @click="handleDownloadFile('video_uri')"></i>
<i class="el-icon-circle-close" @click="handleClearFile('video_uri')"></i>
</span>
</div>
</el-form-item>
<el-form-item label="开始时间：" prop="start_time">
<el-date-picker v-model="form.start_time" type="datetime" placeholder="选择开始时间" size="small" clearable :disabled="isDetails"/>
......@@ -149,9 +188,15 @@ const defaultForm = {
remarks: '',
content: '',
web_img_uri: '',
web_img_uri_loading: '',
mobile_terminal_img_uri: '',
mobile_terminal_img_uri_loading: '',
enclosure_uri: '',
enclosure_uri_name: '',
enclosure_uri_loading: '',
video_uri: '',
video_uri_name: '',
video_uri_loading: '',
start_time: '',
hasEndDate: 0,
end_time: ''
......@@ -255,26 +300,55 @@ export default {
},
methods: {
beforeUpload(file, target) {
const type = ['enclosure_uri', 'video_uri'].includes(target) ? 'file' : 'image'
switch (target) {
case 'web_img_uri':
case 'mobile_terminal_img_uri':
console.log(file)
break
case 'enclosure_uri':
console.log(file)
break
case 'video_uri':
console.log(file)
break
console.log(file)
let errorMsg = ''
const fileNameArr = file.name.split('.')
const suffix = fileNameArr[fileNameArr.length - 1]
if (target === 'web_img_uri' || target === 'mobile_terminal_img_uri') {
if (['image/png', 'image/jpeg'].includes(file.type)) {
this.fetchUpload(file, 'image', target)
} else {
errorMsg = '上传图片格式错误，只允许png/jpg格式'
}
} else if (target === 'enclosure_uri') {
const typeList = ['doc', 'docx', 'pdf', 'xls', 'xlsx']
let isType = false
for (const i in typeList) {
if (typeList[i] === suffix) {
isType = true
break
}
}
if (isType) {
this.fetchUpload(file, 'file', target)
} else {
errorMsg = '上传附件格式错误，只允许word/excel/pdf格式'
}
} else {
if (suffix === 'mp4') {
this.fetchUpload(file, 'file', target)
} else {
errorMsg = '上传附件格式错误，只允许mp4格式'
}
}
this.fetchUpload(file, type, target)
if (errorMsg) this.$message.error(errorMsg)
return false
},
handleClose() {
this.$emit('drawFormClose')
this.form = Object.assign({}, defaultForm)
},
handleDownloadFile(target) {
console.log(this.form[target])
const url = this.form[target]
this.fileDownload(url, url)
},
handleClearFile(target) {
this.form[target] = ''
if (['enclosure_uri', 'video_uri'].includes(target)) {
this.form[target + '_name'] = ''
}
},
tinymceBlur() {
this.$refs['el-form-item-tinymce'].$emit('el.form.blur')
},
......@@ -300,6 +374,16 @@ export default {
toUnitTimestamp(time) {
return formatToDate(time).getTime() / 1000
},
fileDownload(fileUrl, fileName) {
const elink = document.createElement('a')// 创建一个a标签
elink.download = fileName;// 设置a标签的下载属性
elink.style.display = 'none';// 将a标签设置为隐藏
elink.href = fileUrl;// 把之前处理好的地址赋给a标签的href
document.body.appendChild(elink);// 将a标签添加到body中
elink.click();// 执行a标签的点击方法
// URL.revokeObjectURL(elink.href) // 下载完成释放URL 对象
document.body.removeChild(elink)// 移除a标签
},
fetchContentTypeList() {
if (this.form.project_id) {
getProjectContentTypeList(this.pageType, { project_id: this.form.project_id }).then((res) => {
......@@ -317,9 +401,14 @@ export default {
const formData = new window.FormData()
formData.append('file', file)
formData.append('type', type)
this.form[target + '_loading'] = '1'
fileUpload(formData).then(res => {
this.form[target + '_loading'] = ''
if (res.code === 0 && res.message === 'SUCCESS') {
this.form[target] = res.data[0].full_path
if (type === 'file') {
this.form[target + '_name'] = res.data[0].filename
}
}
})
}
......@@ -347,19 +436,22 @@ export default {
.el-form-item.file-upload .des{
display:inline-block;
color: #c9c9c9;
line-height:24px;
line-height:18px;
font-size:12px;
position:relative;
}
.el-form-item.file-upload .des>i{
position:absolute;
left:-40px;
top:14px;
color: #67c23a;
top:10px;
font-size:16px;
color:#409EFF;
}
.el-form-item.file-upload .des>i.el-icon-circle-check{
color: #67c23a;
}
.el-form-item.file-upload:not(.is-required){
margin-bottom:5px;
margin-bottom:15px;
}
.el-form-item.mb-15{
margin-bottom:15px;
......@@ -367,31 +459,45 @@ export default {
.file-upload .el-form-item__content{
position:relative;
}
.avatar-preview{
.avatar-upload-bar{
position:absolute;
left:91px;
left:1px;
top:91px;
width:30px;
width:120px;
height:30px;
cursor:zoom-in;
border-radius:0 0 4px 0;
overflow: hidden;
background:rgba(0,0,0,.3);
color:#fff;
display:none;
border-radius:0 0 6px 6px;
}
.avatar-preview>i{
position:absolute;
left:0;
top:0;
.avatar-upload .el-form-item__content:hover .avatar-upload-bar{
display:flex;
}
.avatar-upload-bar>div{
flex:1;
position:relative;
cursor:pointer;
}
.avatar-upload-bar>div>i{
font-size:20px;
width:100%;
height:100%;
text-align:center;
line-height:30px;
background:#c9c9c9;
}
.avatar-preview{
cursor:zoom-in;
}
.avatar-preview .el-image{
position:absolute;
left:0;
top:0;
width:100%;
height:100%;
opacity:0;
z-index:1;
}
.avatar-preview ::v-deep.el-image__preview{
cursor: zoom-in;
......@@ -428,4 +534,37 @@ export default {
height: 120px;
display: block;
}
.file-uploader{
height:36px;
font-size:0;
}
.file-uploader ::v-deep.el-upload{
font-size:0;
}
.upload-file-display{
padding-right:60px;
text-overflow: ellipsis;
transition: color .3s;
white-space: nowrap;
position:relative;
}
.upload-file-display:hover{
background:#f5f7fa;
color: #409eff
}
.upload-file-display:hover .upload-file-bar{
display:block;
}
.upload-file-bar{
display:none;
position:absolute;
right:10px;
top:0;
height:40px;
color:#999;
cursor:pointer;
}
.upload-file-bar>i:hover{
color:#666;
}
</style>
\ No newline at end of file
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论