当前位置：首页 > news >正文

element-ui附件上传及在线查看详细总结，后续赋源码

news 来源：原创 2025/4/27 12:07:12

一、附件上传

1、在element-ui上面复制相应代码

a、accept="image/*,.pdf,.docx,.xlsx,.doc,.xls" 是规定上传文件的类型，若是不限制，可以直接将accept=‘all'即可；

b、:action="action" 这个属性就是你的上传附件的地址；

一般情况下，上传一个文件，后端会给两个接口，第一个接口就是写在action里面的，这个接口的作用是返回一个id或则一个其他的唯一属性；接着第二个接口就是上传附件的接口，这个返回的唯一属性会被当做第二个接口的参数提交，此时就已经完成了附件的上传。

二、在线查看

1、首先先安装依赖包

用的是vue-office，地址：vue-office简介 | vue-office (501351981.github.io)

#docx文档预览组件
npm install @vue-office/docx vue-demi
#excel文档预览组件
npm install @vue-office/excel vue-demi
#pdf文档预览组件
npm install @vue-office/pdf vue-demi
//如果是vue2.6版本或以下还需要额外安装 @vue/composition-api
npm install @vue/composition-api

2、在vue文件中引入vue-office

3、开始判断文件的类型

接着我们要想实时的看到自己的附件，那么肯定一点就是得区分我们得附件类型

判断文件的类型我这里有两个方法推荐：

第一种：就是运用计算属性和includes来设置一个变量，再根据变量使用v-if控制显示

第二种：js的endsWith() 该方法用于测试字符串是否以指定的后缀结束，将获取到的文件名放入该方法中，判断后缀类型，不过这里的判断返回的是布尔值，然后再配合v-if使用以控制显示。

4、添加点击事件

这里设计的在线预览是点击附件后直接在下方显示

找到上传附件时的钩子，根据业务需求，判断是上传之前可以看还是上传之后可以看，有两种情况

第一种：在上传附件之前就想查看

这种情况我先放一下，因为这里我先讲得是直接上传附件，在上传之前查看，一般用在手动上传的时候，我后续再更，但是放心，我都会更新记录下来的~~

第二种：在上传附件成功之后再查看

给附件绑定一个点击事件:on-preview="handlePreview"，绑定这个事件之后，可以获取到参数里面的file，即一个对象，将这个对象赋值给一个新的对象this.currentFile = file，而这个currentFile在判断类型时不可缺少的；之后，取currentFile里面raw赋值给vue-office标签里的src属性就可以了

第三种：同时拥有，哈哈哈哈这种就把前两种都写上就行了

目前这一块我是以组件的形式在使用，毕竟用的比较多，这样更方便些，以上是我自己的总结，主要是给自己看的，因为我有健忘，一段时间不用就会忘记，大家要是有疑问可以随时私信我，我看到了就会回复，毕竟学习也是相互的，加油。

以下是源码----------------------------------

<template>
  <div>
    <!-- <el-dialog title="上传附件" :visible.sync="dialogFormVisible" width="50%" append-to-body="true"> -->
    <el-upload
      ref="upload"
      class="upload-demo"
      :action="action"
      :before-remove="beforeRemove"
      multiple
      :on-preview="handlePreview"
      :file-list="fileList"
      :on-success="handleSuccess"
      :before-upload="beforeUpload"
      accept="image/*,.pdf,.docx,.xlsx,.doc,.xls"
      :on-remove="handleRemove"
      :limit="6"
      :on-exceed="handleExceed">
      <el-button size="small" type="primary">选取附件</el-button>
    </el-upload>

    <!-- 查看 -->
    <div v-if="currentFile">
      <div v-if="currentFileType === 'excel'" class="officeShow">
        <vue-office-excel :src="fileSrc" style="height: 40vh;width: 100%;" />
      </div>
      <div v-else-if="currentFileType === 'pdf'" class="officeShow">
        <vue-office-pdf :src="fileSrc" style="height: auto;width: 100%;" />
      </div>
      <div v-else-if="currentFileType === 'word'" class="officeShow">
        <vue-office-docx :src="fileSrc" style="height: 40vh;width: 100%;overflow: scroll;" />
      </div>
      <div v-else class="officeShow">
        <img :src="fileSrc" style="height: auto;width: 100%;">
      </div>
    </div>



    <!-- <div slot="footer" class="dialog-footer">
        <el-button @click="cancellation">取 消</el-button>
        <el-button type="primary" @click="save">保 存</el-button>
        <el-button type="primary" @click="upClick">上传</el-button>
      </div> -->
    <!-- </el-dialog> -->
  </div>
</template>

<script>
// 引入VueOfficePdf组件
import VueOfficePdf from '@vue-office/pdf'
// docx
import VueOfficeDocx from '@vue-office/docx'
import '@vue-office/docx/lib/index.css'
// 引入VueOfficeExcel组件
import VueOfficeExcel from '@vue-office/excel'
// 引入相关样式
import '@vue-office/excel/lib/index.css'

export default {
  components: {
    VueOfficeExcel,
    VueOfficePdf,
    VueOfficeDocx
  },
  props: {
    projectId: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      dialogFormVisible: false,
      action: process.env.VUE_APP_BASE_API + '/file/upload',
      fileList: [],
      currentFile: null,
      files: []
    }
  },
  computed: {
    currentFileType() {
      let type = ''
      if (this.currentFile.name) {
        const arr = this.currentFile.name && this.currentFile.name.split('.')
        type = arr[arr.length - 1]
      }
      switch (true) {
        case ['xls', 'xlsx'].includes(type):
          return 'excel'
        case ['doc', 'docx'].includes(type):
          return 'word'
        case ['pdf'].includes(type):
          return 'pdf'
        default:
          return 'img'
      }
    },
    fileSrc() {
      if (this.currentFileType === 'img') {
        const windowURL = window.URL || window.webkitURL
        const src = windowURL.createObjectURL(this.currentFile.raw)
        return src
      } else {
        return this.currentFile.raw
      }
    }
  },
  methods: {
    show() {
      this.dialogFormVisible = true
    },
    cancellation() {
      this.dialogFormVisible = false
      this.fileList = []
    },
    // 暂存
    // save() {
    //   this.dialogFormVisible = false
    //   this.$notify({
    //     title: '成功',
    //     message: '已保存',
    //     type: 'success',
    //     duration: 1000
    //   })
    // },
    handleRemove(file, fileList) {
      this.fileList = fileList
      // 判断溢出的文件是否当前预览中的文件
      if (fileList.findIndex(item => item.uid === this.currentFile.uid) === -1) {
        this.currentFile = null
      }
    },
    handlePreview(file) {
      // console.log(file)
      this.currentFile = file
    },
    handleExceed(files, fileList) {
      this.$message.warning(`当前限制选择 6 个文件，本次选择了 ${files.length}个文件，共选择了 ${files.length + fileList.length}个文件`)
    },
    beforeRemove(file, fileList) {
      return this.$confirm(`确定移除 ${file.name} ？`)
    },
    handleSuccess(response, file, fileList) {
      console.log(response, file, fileList)
      this.files.push(response)
    },
    beforeUpload(file) {
      const isLt20M = file.size / 1024 / 1024 < 20
      if (!isLt20M) {
        this.$message.error('上传文件大小不能超过 20MB!')
      }
      return isLt20M
    }
  }
}
</script>

<style lang="scss" scoped></style>

.....后续马上更，我有其他事情需要去处理一下