el-upload實(shí)現(xiàn)可替換、刪除、預(yù)覽的圖片上傳

• 組件使用：

<template>
  <div>
    <UploadImage sendUrl='' :limit="1" :size="size" :gifSize="gifSize" v-model="images"></UploadImage> 
  </div>
</template>
<script>
  import Vue from 'vue'
  import UploadImage from './UploadImage.vue'
  export default {
      components: {
        UploadImage
      },
      data(){
        retun {
          images:'',
          size: 400 * 1024,
          ifSize: 1 * 1024 * 1024,
          // images:[]
        }
      }
  }
</script>

• UploadImage.vue 組件：

<template>
  <div class="uploadFileMain" :style="{'--height':`${height}px`,'--width':`${width}px`}">
    <div v-for="(item,index) in fileList" :key="index" class="upload-list" :class="[limit==1?'upload-lis1':'']">
      <div v-if="switchIndex==index && showProgress" v-loading="true" class="loadingView" element-loading-background="rgba(0, 0, 0, 0.8)" />
      <img :id="`${idName}_image_${index}`" class="el-upload-listImg" :src="item.url"  alt="">
      <span class="el-actions">
        <span
          class="el-upload-icon"
          @click="handlePictureCardPreview(index,item.url)"
        >
          <i class="el-icon-zoom-in" />
        </span>
        <span
          class="el-upload-icon"
          @click="switchFn(index)"
        >
          <i class="el-icon-sort" style="transform: rotate(90deg);" />
        </span>
        <span
          class="el-upload-icon"
          @click="delRemove(index)"
        >
          <i class="el-icon-delete" />
        </span>
      </span>
    </div>
    <el-upload
      v-show="!limit || fileList.length<limit"
      :ref="`${idName}_upload`"
      :show-file-list="false"
      :multiple="multiple"
      :limit="limit?limit+1:limit"
      :action="sendUrl"
      list-type="picture-card"
      :headers="{Authorization: $utils.getToken()}"
      :accept="acceptArray.length>0?acceptArray.map(n=>this.acceptType[n]).join(',') :'*'"
      :file-list="fileList"
      :before-upload="beforeUpload"
      :on-progress="progressFn"
      :on-success="uploadSuccess"
    >
      <div v-if="switchIndex==-1 && showProgress" v-loading="true" :style="{'height':`${height}px`,'width':`${width}px`}" class="loadingView" element-loading-background="rgba(0, 0, 0, 0.8)" />
      <div v-else  class="uploadClick" :id="`${idName}_uploadClick`" slot="trigger" @click="changeIndex(-1)">
        <i class="el-icon-plus"  />
      </div>
    </el-upload>
  </div>
</template>
<script>
import Vue from 'vue'
  export default {
    props: {
      sendUrl: {
        type: String,
        default: ''
      },
      value: {
        type: [Array, String],
        default: ''
      },
      width: {
        type: [Number, String],
        default: 80
      },
      height: {
        type: [Number, String],
        default: 80
      },
      multiple: {
        type: Boolean,
        default: true
      },
      limit: {
        type: Number,
        default: null
        // default: 4
      },
      // 大小限制：10 * 1024 * 1024 = 10MB
      size: {
        type: Number,
        default: -1
      },
      //   限制類型，按照acceptType數(shù)組里面來
      acceptArray: {
        type: Array,
        default: () => {
          return ['png', 'jpg', 'jpeg', 'gif']
        }
      },
      gifSize: {
        type: Number,
        default: -1
      }
    },
    data() {
      return {
        acceptType: {
          'doc': 'application/msword',
          'docx': 'application/vnd.openxmlformats-officedocument.wordprocessingml.document',
          'pptx': 'application/vnd.openxmlformats-officedocument.presentationml.presentation',
          'xls': 'application/vnd.ms-excel',
          'xlsx': 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',
          'pdf': 'application/pdf',
          'csv': '.csv',
          'txt': 'text/plain',
          'image': 'image/*',
          'png': 'image/png',
          'gif': 'image/gif',
          'jpg': 'image/jpg',
          'jpeg': 'image/jpeg'
        },
        idName: `${Math.random().toString(36).slice(-8)}_${new Date().getTime()}`,
        switchIndex: -1,
        fileList: [],
        dataArray: {
          1: [],
          2: []
        },
        showProgress: false
      }
    },
    watch: {
      value: {
        handler(value) {
          if (Array.isArray(value)) {
            this.fileList = value.filter(n => n != '').map(n => {
              return {
                url: n
              }
            })
          } else {
            this.fileList = value.split(',').filter(n => n != '').map(n => {
              return {
                url: n
              }
            })
          }
        },
        deep: true,
        immediate: true
      },
      fileList: {
        handler(value) {
          if (value.length > 0) {
            this.toFileImg(value)
          }
        },
        deep: true,
        immediate: true
      },
      dataArray: {
        handler(value) {
          // 1 和 2 相等表示這次上傳成功的數(shù)量相同，會添加到數(shù)組里面
          if (value[1].length != 0 && value[2].length != 0 && value[1].length == value[2].length) {
            value[2].forEach(e => {
              // 有更換就變化
              if (this.switchIndex != -1) {
                this.fileList.splice(this.switchIndex, 1, {
                  status: 'success',
                  url: e.data
                })
              } else {
                // 沒有更好追加
                this.fileList.push({
                  status: 'success',
                  url: e.data
                })
              }
            })
            setTimeout(() => {
              this.showProgress = false
              this.switchIndex = -1
            }, 300)
            this.dataArray = {
              1: [],
              2: []
            }
          }
        },
        deep: true
      }
    },
    methods: {
      async lookImageViewer(url, list) {
        let listImg = list
        const thisIndex = list.indexOf(url)
        const firstArray = list.slice(thisIndex, list.length)
        const twoArray = list.slice(0, thisIndex)
        listImg = [...firstArray, ...twoArray]
        // this.$viewerApi({ images: listImg })//v-viewer組件
        const id = 'MyElImageViewer_' + new Date().getTime() + '_' + parseInt(Math.random() * 1000)
        // 引用組件（找到Elementui中image-viewer的位置）
        const ElImageViewer = (await import('element-ui/packages/image/src/image-viewer')).default
        const MyElImageViewer = Vue.component('MyElImageViewer', ElImageViewer)
        const MyElImageViewerNew = new MyElImageViewer({
          propsData: {
            urlList: listImg,
            onClose: () => {
              // 刪除組件
              compDOm.$destroy()
              document.body.removeChild(document.getElementById(id))
            }
          }
        })
        const DOM = document.createElement('div')
        DOM.setAttribute('id', id)
        DOM.setAttribute('class', 'imageSwipeViewer_Show')
        document.body.appendChild(DOM)
        // 掛載組件
        const compDOm = MyElImageViewerNew.$mount(DOM.appendChild(document.createElement('template')))
        compDOm.$nextTick(() => {
          const showDom = document.getElementById(id)
          showDom.querySelector('.el-icon-circle-close').style = 'font-size:38px;color:#fff'
        })
      },
      filterSize(size) {
        const pow1024 = (num) => {
          return Math.pow(1024, num)
        }
        if (!size) return ''
        if (size < pow1024(1)) return size + ' B'
        if (size < pow1024(2)) return (size / pow1024(1)).toFixed(0) + ' KB'
        if (size < pow1024(3)) return (size / pow1024(2)).toFixed(0) + ' MB'
        if (size < pow1024(4)) return (size / pow1024(3)).toFixed(0) + ' GB'
        return (size / pow1024(4)).toFixed(2) + ' TB'
      },
      // 上傳之前放到1
      beforeUpload(e) {
        const fileSize = e.size
        if (this.gifSize > 0) {
          if (e.type.indexOf('gif') != -1 && fileSize > this.gifSize) {
            this.$message.error(`gif最大上傳${this.filterSize(this.gifSize)}`)
            return false
          }
        } else {
          if (this.size > 0 && fileSize > this.size) {
            this.$message.error(`最大上傳${this.filterSize(this.size)}`)
            return false
          }
        }
        this.dataArray[1].push({
          status: 'uploading',
          ...e
        })
        return true
      },
      // 通過 slot="trigger" ，區(qū)分模擬點(diǎn)擊，表示這次時(shí)人為點(diǎn)擊的
      changeIndex(index) {
        if (index == -1) {
          this.switchIndex = -1
        }
      },
      progressFn(e) {
        this.showProgress = true
      },
      // 更換圖片，模擬點(diǎn)擊
      switchFn(index) {
        document.getElementById(`${this.idName}_uploadClick`).click(this.switchIndex)
        setTimeout(() => {
          this.switchIndex = index
        }, 0)
      },
      // 查看圖片
      handlePictureCardPreview(index, url) {
        this.lookImageViewer(url, [url])
      },
      // 成功后放到2
      uploadSuccess(e) {
        this.dataArray[2].push({
          ...e
        })
      },
      // 傳遞圖片
      toFileImg(value) {
        if (Array.isArray(this.value)) {
          this.$emit('input', value.map(n => n.url))
        } else {
          this.$emit('input', value.map(n => n.url).join(','))
        }
      },
      delRemove(index) {
        this.fileList.splice(index, 1)
        if (this.fileList.length == 0) {
          this.toFileImg(this.fileList)
        }
      }
    }
  }
</script>
<style lang="scss" scoped>
  ::v-deep .el-upload--picture-card{
    width: var(--width);
    display:flex;
    justify-content:center;
    align-items:center;
    height: var(--height);
  }
  .uploadClick{
    width: var(--width);
    display:flex;
    justify-content:center;
    align-items:center;
    height: var(--height);
  }
  ::v-deep .el-upload-list--picture-card .el-upload-list__item{
    width: var(--width);
    display:flex;
    align-items:center;
    height: var(--height);
    transition: none !important;
  }
  ::v-deep .el-upload-list__item .el-icon-check{
    position: absolute;
    margin-top: 0px;
    top: 10px;
    right: 14px;
  }
  ::v-deep .el-loading-spinner{
    width: 100%;
    height: 100%;
    top: 0;
    margin-top: 0;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  ::v-deep .el-upload-list,::v-deep .el-upload-list--picture-card{
    //display: none;
  }
  .uploadFileMain{
    display: flex;
    flex-wrap: wrap;
    .upload-list{
      flex-shrink:0;
      width: var(--width);
      border:1px solid #0000005d;
      box-sizing: border-box;
      height: var(--height);
      margin-right: 20px;
      margin-bottom: 10px;
      &.upload-lis1{
        margin-bottom: 0px;
      }
      overflow: hidden;
      border-radius: 8px;
      position: relative;
      .el-actions{
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        background-color: rgba(0,0,0,0.5);
        align-items: center;
        justify-content: center;
        display: none;
        .el-upload-icon{
          margin: 5px;
          i{
            color: #ffffff;
            cursor: pointer;
          }
        }
      }
      &:hover{
        .el-actions{
          display: flex;
        }
      }
    }
    .el-upload-listImg{
      width: 100%;
      height: 100%;
      object-fit: contain;
    }
  }
  .loadingView{
    width: 100%;
    height: 100%;
  }
</style>

往返緩存(BFCache)

BFCache是一種瀏覽器優(yōu)化，可實(shí)現(xiàn)即時(shí)前進(jìn)和后退載入頁面。它改善了用戶的瀏覽體驗(yàn)，尤其是那些網(wǎng)絡(luò)或設(shè)備速度較慢的用戶。*我們可以通過這個(gè)方法判斷當(dāng)前頁面是不是返回的頁面*

在APP站內(nèi)嵌套h5頁面,判斷進(jìn)入撥號頁返回情況:

• 我們需要通過visibilitychange

• 通過在點(diǎn)擊時(shí)修改一個(gè)狀態(tài)值,回來時(shí)和上面的方法進(jìn)行判斷

  const isClick=false // 是否點(diǎn)擊了離開頁面按鈕
  const isShowPop=false // 是否顯示彈窗
  document.addEventListener('visibilitychange', () => {
      if (document.visibilityState == "visible") {
        if (isClick) {
          isShowPop = true
        }
        isClick = false
      } else {}
  })
  

如果是在瀏覽器里面,判斷進(jìn)入撥號頁(三方客服鏈接)返回情況:

• 在瀏覽器里面如果是離開了頁面還是可以通過visibilitychange判斷,但是跳轉(zhuǎn)的是三方客服鏈接,那我我們回到頁面,頁面是會重新刷新的,我們需要知道是否返回了,就需要通過performance.getEntriesByType('navigation')[0].type

• 同時(shí)通過在點(diǎn)擊時(shí)修改一個(gè)狀態(tài)值,回來時(shí)和上面的方法進(jìn)行判斷

  const isClick=false // 是否點(diǎn)擊了離開頁面按鈕
  const isShowPop=false // 是否顯示彈窗
  const pageshowFn=(event)=> {
    const navigationType = performance.getEntriesByType('navigation')[0].type
    const {persisted = null} = event
    if (persisted || navigationType == 'back_forward') {
      isShowPop = true
      isClick = false
  }
  }
  window.removeEventListener('pageshow', pageshowFn)
  window.addEventListener('pageshow', pageshowFn)
  // 頁面初次進(jìn)入需要調(diào)用
  pageshowFn({})
  
  

往返緩存(BFCache)具體詳解文章來源地址http://www.zghlxwxcb.cn/news/detail-822690.html

到了這里，關(guān)于el-upload實(shí)現(xiàn)可替換、刪除、預(yù)覽的圖片上傳。js 往返緩存（可判斷當(dāng)前頁面是不是返回的頁面）的文章就介紹完了。如果您還想了解更多內(nèi)容，請?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！