快捷導(dǎo)航

element中的el-upload附件上傳與附件回顯

更新時(shí)間：2022年08月01日 11:05:42 作者：左手牽??右手

這篇文章主要介紹了element中的el-upload附件上傳與附件回顯方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教

1、上傳

在src里面新建一個(gè)文件夾

<template>
  <el-upload class="upload-demo"
             multiple
             :limit="limit"
             :accept="accept"
             :headers="headers"
             :file-list="fileList"
             :action="uploadImgUrl"
             :on-exceed="handleExceed"
             :on-remove="handleRemove"
             :on-success="handleSuccess"
             :before-upload="beforeUpload"
             :on-error="handleUploadError">
    <!-- :on-preview="handlePreview" -->
    <el-button size="small"
               type="primary">點(diǎn)擊上傳</el-button>
    <div slot="tip"
         class="el-upload__tip"
         style="color:#909399">
      支持上傳{{ accept === "*" ? "所有" : accept }}文件，且不超過20MB,附件名稱不能超過50字
    </div>
  </el-upload>
</template>

<script>
import { getToken } from '@/utils/auth'
export default {
  components: {},
  props: {
    value: {
      type: String,
      default: null
    },
    accept: {
      type: String,
      default: '*'
    },
    limit: {
      type: Number,
      default: 1
    }
  },
  data () {
    return {
      uploadImgUrl: process.env.VUE_APP_BASE_API + '/common/upload', // 上傳的圖片服務(wù)器地址
      headers: {
        Authorization: 'Bearer ' + getToken()
      },
      fileList: [],
      returnData: []
    }
  },
  watch: {},
  mounted () {
    this.value === null && this.value === '' ? (this.fileList = []) : this.getFileList()
  },
  methods: {
    getFileList () {
      if (this.value !== null && this.value !== '') {
        const accessory = JSON.parse(this.value)
        this.fileList = []
        accessory.map(val => {
          this.fileList.push({
            name: val.name,
            // 編輯修改
            // response: {
            //   fileName: val.url
            // },
            response: {
              data: {
                fileName: val.url
              }
            }         
          })
        })
      }
    },
    // 刪除上傳文件后
    handleRemove (file, fileList) {
      this.getReturnData(fileList)
    },
    // 上傳前------------文件大小和格式校驗(yàn)
    beforeUpload (file) {
      if (this.accept !== '*') {
        var fileType = file.name.substring(file.name.lastIndexOf('.') + 1)
        const accept = this.accept.split(',')
        if (accept.indexOf('.' + fileType) < 0) {
          this.$message.warning('請(qǐng)選擇正確的文件格式')
          return false
        }
      }
      const isLt50M = file.size / 1024 / 1024 < 20
      if (!isLt50M) {
        this.$message.warning('上傳附件大小不能超過 20MB!')
        return false
      }
      return true
    },
    // 附件上傳成功后的鉤子
    handleSuccess (response, file, fileList) {
      if (response.code === 200) {
        this.getReturnData(fileList)
      } else {
        this.$message.error(response.msg)
        this.fileList=[]
      }
    },
    handleUploadError () {
      this.$message({
        type: 'error',
        message: '上傳失敗'
      })
    },
    // 獲取附件信息后進(jìn)行返回處理
    getReturnData (fileList) {
      this.returnData = []
      console.log(fileList)
      fileList.map(val => {
        this.returnData.push({
          name: val.name,
          url: val.response.data.fileName
        })
      })
      this.$emit('input', JSON.stringify(this.returnData))
    },
    // 點(diǎn)擊上傳文件的鉤子
    handlePreview (file) {
      var a = document.createElement('a', '_bank')
      var event = new MouseEvent('click')
      a.download = file.name
      a.href = file.response.url
      a.dispatchEvent(event)
    },
    // 文件超出個(gè)數(shù)限制時(shí)的鉤子
    handleExceed (files, fileList) {
      this.$message.warning(`當(dāng)前限制只能上傳 ` + this.limit + ` 個(gè)文件`)
    },
    // 刪除文件之前的鉤子，參數(shù)為上傳的文件和文件列表，若返回 false 或者返回 Promise 且被 reject，則停止刪除。
    beforeRemove (file, fileList) {
      return this.$confirm(`確定移除 ${file.name}？`)
    }
  }
}
</script>

代碼中這個(gè)import { getToken } from ‘@/utils/auth’，其實(shí)是獲取的存在Cookies里面的token的值，大家可以根據(jù)自己項(xiàng)目情況進(jìn)行修改使用

在頁(yè)面中直接引入使用就可以了：

2、附件回顯

和上傳一樣同樣新建一個(gè)文件夾

<template>
  <div class="upload-detail">
    <div class="detail"
         style="line-height:20px"
         v-if="accessory === '[]' || accessory === null">無</div>
    <div v-else>
      <template v-for="(val,key) in upload.fileList">
        <el-link :key="key"
                 class="detail"
                 :underline="false"
                 @click="handlePreview(val)">{{val.name}}
          <span class="icon-emad- icon-emad-xiazai"> 下載</span>
        </el-link>
      </template>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      upload: {
        // 上傳的地址
        url: process.env.VUE_APP_BASE_API + "/common/upload",
        // 上傳的文件列表
        fileList: []
      }
    }
  },
  props: {
    accessory: {
      type: String,
      default: '[]'
    }
  },
  created () {
    this.getInfo(this.accessory)
  },
  methods: {
    getInfo (accessory) {
      this.upload.fileList = []
      if (accessory !== '[]' || accessory !== null) {
        let list = JSON.parse(accessory)
        list.map(val => {
          this.upload.fileList.push({
            name: val.name,
            url:process.env.VUE_APP_BASE_API + val.url
          })
        })
      }
    },
    // 點(diǎn)擊上傳----------------文件下載
    handlePreview (file) {
      var a = document.createElement('a');
      var event = new MouseEvent('click');
      a.download = file.name;
      a.href = file.url;
      a.dispatchEvent(event);
    }
  }
};
</script>

<style lang="scss"   scoped>
::v-deep .el-upload-list {
  height: auto;
  overflow: hidden;
}
.detail {
  line-height: 20px;
  display: block;
  .icon-emad- {
    color: rgba(98, 173, 255, 1);
  }
}
</style>

頁(yè)面中引入使用：