vue实战--vue+elementUI实现多文件上传+预览（word PDF 图片 docx doc xlxs txt）_elementui pdf 上传后预览

<template>
  <div>
    <el-upload
      class="upload-demo"
      ref="upload"
      action="#"
      :on-change="handleChange"
      :auto-upload="false"
      :on-remove="handleRemove"
      :file-list="fileList"
      :before-remove="beforeRemove"
      multiple
      :limit="10"
      :on-exceed="handleExceed"
    >
      <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
      <el-button
        style="margin-left: 10px;"
        size="small"
        type="success"
        @click="submitUpload"
      >上传到服务器</el-button>
      <div slot="tip" class="el-upload__tip">只能上传jpg/png/pdf/docx/doc/xlsx/txt文件，且不超过50MB</div>
    </el-upload>
    <el-row :gutter="20">
      <el-col :span="6" v-for="(item, index) in fileList" :key="index">
        <el-card :body-style="{ padding: '0px' }" style="margin-top:10px;">
          <img :src="item.url" class="image" @click="handlePreview(item.url)">
          <div style="padding: 14px;">
            <span>{{ item.name }}</span>
            <div class="bottom clearfix">
              <el-button type="text" class="button" @click="handleDownload(item.url, item.name)">下载</el-button>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>
 
<script>
export default {
  data() {
    return {
      fileList: [],
    };
  },
  methods: {
    handleChange(file, fileList) {
      this.fileList = fileList;
    },
    handleRemove(file, fileList) {
      this.fileList = fileList;
    },
    beforeRemove(file, fileList) {
      return this.$confirm(`确定移除 ${file.name}？`);
    },
    handleExceed(files, fileList) {
      this.$message.warning(`最多只能上传10个文件！`);
    },
    submitUpload() {
      this.$refs.upload.submit();
    },
    handlePreview(url) {
      // 调用预览文件的方法
    },
    handleDownload(url, name) {
      // 调用下载文件的方法
    }
  }
};
</script>
 
<style>
.image {
  width: 100%;
  height: 200px;
  display: block;
}
 
.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}
 
.clearfix:after {
  clear: both;
}
</style>

这个代码实例提供了一个Vue组件，用于多文件上传和预览。它使用了Element UI库中的<el-upload>组件来处理文件上传，并通过fileList数组来管理上传的文件列表。用户可以选择文件，移除文件，限制上传数量，并可以通过点击预览或下载文件。预览和下载的功能需要结合后端API实现。