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

src/pages/content-manage/components/DrawerForm.vue

@@ -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