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

其他博主的部分代码：

Previewf(file) {
      console.log(file);
      // window.open(file.response)
      if (file) {
        const addTypeArray = file.name.split(".");
        const addType = addTypeArray[addTypeArray.length - 1];
        console.log(addType);
        if (addType === "pdf") {
          let routeData = this.$router.resolve({
            path: "/insurancePdf",
            query: { url: file.response, showBack: false },
          });
          window.open(routeData.href, "_blank");
        }
        //".rar, .zip, .doc, .docx, .xls, .txt, .pdf, .jpg,  .png, .jpeg,"
        else if (addType === "doc" || addType === "docx" || addType === "xls") {
          window.open(
            "http://view.officeapps.live.com/op/view.aspx?src=" + file.response
          );
        } else if (addType === "txt") {
          window.open(file.response);
        } else if (["png", "jpg", "jpeg"].includes(addType)) {
          window.open(file.response);
        } else if (addType === "rar" || addType === "zip") {
          this.$message({
            message: "该文件类型暂不支持预览",
            type: "warning",
          });
           return false;
        }
      }
    },

我的代码：

<el-form-item label="需求材料：" class="item">
          <div class="uploadBox">
            <el-upload
               class="upload-demo"
               action="#"
               multiple
              :before-upload="uploadFile"
              >
            <el-button type="primary" class="upload">上传材料</el-button>
             </el-upload>
            <div class="uploadList">
              <ul class="uploadTitle">
                <li>文件名称</li>
                <li>文件类型</li>
                <li>操作</li>
              </ul>
              <ul v-for="(item,index) in files" :key="item.id" class="files">
                <li :title="item.file_name">{{ item.file_name }}</li>
                <li class="fileType">{{ item.file_type }}</li>
                <li class="fileAction">
                  <span @click="delFile(item.id,index)">删除</span> | <span @click="showImg(item.file_url)">预览</span></li>
              </ul>
            </div>
          </div>
        </el-form-item>

 const showImg=(url)=>{
      const strArr=url.split('.');
      const addType=strArr[1]
      if (addType === "txt"  || addType === "word" ||addType === "doc" || addType === "docx" || addType === "xls") {
          window.open(defaultconfig.requestApi + url);
        } else if (["png", "jpg", "jpeg"].includes(addType)) {
          dialogImageUrl.value = url
          dialogImg.value = true
        } 
    }