el-upload多个文件，动态增加+预览word 、excel、ppt、pdf、png、jpg文件

 el-upload多个文件，动态增加

 

<template>
  <span>
    <el-row v-for="(v, i) in RecordOperation.upload" :key="i">
      <el-col :span="6">
        <el-form-item>
          <el-input
            v-model.trim="v.fileName"
            style="width: 130px"
            placeholder="请输入证书名称"
            v-on:input="InputSearch($event, i)"
          ></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item>
          <el-upload
            ref="upload"
            :limit="1"
            list-type="picture"
            :headers="RecordOperation.upload[i].headers"
            :action="url"
            :data="RecordOperation.upload[i].data"
            :disabled="RecordOperation.upload[i].isUploading"
            :on-change="handleFileChange.bind(null, { index: i, data: v })"
            :on-progress="handleFileUploadProgress"
            :on-success="handleFileSuccess"
            :on-preview="handelPreview"
          >
            <el-col :span="14">
              <!-- <img v-if="RecordOperation.upload[i].fileUrl" :src="RecordOperation.upload[i].fileUrl"/>  -->
              <el-button @click="submitFileForm(i)" icon="el-icon-upload2"
                >上传附件</el-button
              >
            </el-col>
            <el-col :span="12">
              <img
                class="el-upload-list__item-thumbnail"
                :src="RecordOperation.upload[i].fileUrl"
                alt=""
                @click.stop="dialogFormVisible = false"
              />
              <div style="justify-content: center; align-items: center"></div>
              <div style="width: 400px" @click.stop="dialogFormVisible = false">
                {{
                  RecordOperation.upload[i].fileUrl.split("/")[
                    RecordOperation.upload[i].fileUrl.split("/").length - 1
                  ]
                }}
                <i
                  el-icon--right
                  class="el-icon-zoom-in"
                  v-show="RecordOperation.upload[i].fileUrl"
                  @click="
                    handlePictureCardPreview(RecordOperation.upload[i].fileUrl)
                  "
                ></i>
              </div>
              <span class="el-upload-list__item-actions">
                <span
                  class="el-upload-list__item-preview"
                  @click.stop="dialogFormVisible = false"
                  @click="
                    handlePictureCardPreview(RecordOperation.upload[i].fileUrl)
                  "
                >
                </span>
                <span
                  v-if="!disabled"
                  class="el-upload-list__item-delete"
                  @click="handleRemove(i, file)"
                >
                  <i class="el-icon-delete"></i>
                </span>
              </span>
            </el-col>
          </el-upload>
          <el-dialog :visible.sync="dialogVisible" :width="fileWidth">
            <img v-if="showImg" width="100%" :src="dialogImageUrl" alt="" />
            <iframe
              v-if="showPdf"
              @click.stop="dialogFormVisible = false"
              :src="dialogImageUrl"
              style="width: 100%; height: 80vh"
            ></iframe>
            <div v-if="showDoc == true">
                  <iframe
                    frameborder="0"
                    :src="
                      'https://view.officeapps.live.com/op/view.aspx?src=' +
                      dialogImageUrl
                    "
                    width="100%"
                    height="800px"
                  >
                  </iframe>
                </div>
          </el-dialog>
        </el-form-item>
      </el-col>

      <el-col :span="2" class="right">
        <el-button
          style=""
          @click="delDynamicPic(i, RecordOperation.upload)"
          @click.stop="dialogFormVisible = false"
          icon="el-icon-delete"
        ></el-button>
      </el-col>
      <el-col :span="2" class="right">
        <el-button
          icon="el-icon-plus"
          style="color: black"
          @click="addDynamicPic(i, RecordOperation.upload)"
          @click.stop="dialogFormVisible = false"
        ></el-button>
      </el-col>
    </el-row>
  </span>
</template>
<script>
import Input from "./Input.vue";
import { deleteFile, getFilePage } from "@/api/infra/file";
import { getToken } from "@/utils/auth";
import download from "downloadjs";
export default {
  components: { Input },
  created() {},
  data() {
    return {
      dialogImageUrl: "",
      dialogVisible: false,
      disabled: false,
      open: false,
      url: process.env.VUE_APP_BASE_API + "/admin-api/infra/file/upload", // 请求地址
      RecordOperation: {
        upload: [
          {
            open: false, // 是否显示弹出层
            title: "", // 弹出层标题
            isUploading: false, // 是否禁用上传
            url: process.env.VUE_APP_BASE_API + "/admin-api/infra/file/upload", // 请求地址
            headers: { Authorization: "Bearer " + getToken() }, // 设置上传的请求头部
            data: {}, // 上传的额外数据，用于文件名,
            fileUrl: "",
            fileName: "",
          },
        ],
      },
      responseUrl: "",
      showImg: false,
      showPdf: false,
      showDoc: false,
      fileWidth: "min-width = 300px",
      upFilename: "",
      Imgdata: [],
    };
  },
  methods: {
    getImgData(data) {
      let _arr = [];
      data.certificateFileList.map((item, index) => {
        _arr.push(
          Object.assign({}, item, {
            data: { path: "" },
            headers: { Authorization: "Bearer " + getToken() },
          })
        );
      });
      console.log(data);
      this.Imgdata = data;
      this.RecordOperation.upload = _arr;
      console.log(this.RecordOperation.upload);
    },
    handleRemove(i, file, fileList) {
      console.log(i);
      console.log(fileList);
      console.log("file", file);
      // 1.获取将要删除图片的临时路径
      const filePath = file.response.data.tmp_path;
      // 2.从pics数组中，找到图片对应的索引值
      // const i = this.formData.pics.findIndex(x => x.pic === filePath)
      // 3.调用splice方法，移除图片信息
      this.formData.splice(i, 1);
    },
    handlePictureCardPreview(file) {
      console.log(file);
      this.dialogImageUrl = file;
      let type = file;
      if (
        type.indexOf("doc") != -1 ||
        type.indexOf("docx") != -1 ||
        type.indexOf("xls") != -1 ||
        type.indexOf("xlsx") != -1 ||
        type.indexOf("ppt") != -1
      ) {
        this.dialogVisible = true;
        this.fileWidth = "80%";
        this.showDoc = true;
      } else if (type.indexOf("pdf") != -1) {
        this.dialogVisible = true;
        this.fileWidth = "80%";
        this.showPdf = true;
        this.showDoc = false;
        // this.showImg = false;
      } else if (
        type.indexOf("jpg") != -1 ||
        type.indexOf("png") != -1 ||
        type.indexOf("jpeg") != -1
      ) {
        this.dialogVisible = true;
        this.showImg = true;
        this.showPdf = false;
        this.showDoc = false;
      } else {
        this.$message("当前文件暂不支持预览");
        this.download(file);
      }
    },
    download(file) {
      download(file.split(",")[0]);
    },
    handelPreview() {
      // this.PreviewPath = this.RecordOperation.upload[0].data.path;
    },
    /** 新增按钮操作 */
    handleAdd() {
      console.log("this.RecordOperation", this.RecordOperation.upload);
      this.open = true;
      this.RecordOperation.upload.title = "上传文件";
    },
    /** 处理上传的文件发生变化 */
    handleFileChange(obj, file, fileList) {
      console.log(obj, file, fileList);

      // this.upFilename=this.RecordOperation.upload[obj.index].data.path
      this.RecordOperation.upload[obj.index].data.path = file.name;
      this.RecordOperation.upload[obj.index].fileUrl = this.responseUrl;
      console.log(this.RecordOperation.upload[obj.index].fileUrl);
    },
    /** 处理文件上传中 */
    handleFileUploadProgress(event, file, fileList) {
      this.RecordOperation.upload.isUploading = true; // 禁止修改
    },
    /** 发起文件上传 */
    submitFileForm(i, file) {
      console.log(file);
      console.log("上传成功", this.$refs.upload[i]);
      this.$refs.upload[i].submit();
    },
    /** 文件上传成功处理 */
    handleFileSuccess(response, file, fileList) {
      console.log(response, file, fileList);
      this.responseUrl = response.data;
      // 清理
      this.RecordOperation.upload[0].isUploading = false;
      // this.$refs.upload[0].clearFiles();
      // 提示成功，并刷新
      this.$modal.msgSuccess("上传成功");
      console.log(this.RecordOperation.upload);
      this.Imgdata = this.RecordOperation.upload;
      console.log(this.Imgdata);
      this.$emit("getuploadData", this.RecordOperation.upload);
    },
    InputSearch(e, i) {
      this.$emit("getuploadData", this.RecordOperation.upload);
    },
    /** 删除按钮操作 */
    handleDelete(row) {
      const id = row.id;
      this.$modal
        .confirm('是否确认删除文件编号为"' + id + '"的数据项?')
        .then(function () {
          return deleteFile(id);
        })
        .then(() => {
          this.getList();
          this.$modal.msgSuccess("删除成功");
        })
        .catch(() => {});
    },
    // 移除动态建设图片
    delDynamicPic(i, list) {
      console.log(list);
      this.$confirm("确认删除该条记录？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        list.splice(i, 1);
        console.log(list);
        this.$emit("delDynamicPic", list);
      });
    },
    addDynamicPic(i, list) {
      console.log(i);
      console.log(list);
      list.push({
        open: false, // 是否显示弹出层
        title: "", // 弹出层标题
        isUploading: false, // 是否禁用上传
        // url: process.env.VUE_APP_BASE_API + "/admin-api/infra/file/upload", // 请求地址
        headers: { Authorization: "Bearer " + getToken() }, // 设置上传的请求头部
        data: {
          path: "",
        }, // 上传的额外数据，用于文件名
        fileUrl: "",
      });
      console.log(list);
    },
  },
};
</script>
<style>
.el-upload-list {
  width: 50px;
}
.btn btn-primary {
  display: inline-block;
}
.el-upload-list__item-status-label {
  right: -250px;
}

.el-upload-list__item-name {
  display: inline-block;
  padding-left: 18px;
}
.el-upload-list__item .el-icon-close {
  right: -250px;
}
</style>