elementui+vue管理后台-文件上传下载与预览

工具类

//utils/downloadFile
class DownloadFile { 
    /**
     * 
     * @param {*} file 文件流
     * @returns 
     */ 
    getObjectURL(file) {
        let url = null;
        if (window.createObjectURL !== undefined) {
            // basic
            url = window.createObjectURL(file);
        } else if (window.webkitURL !== undefined) {
            // webkit or chrome
            try {
                url = window.URL.createObjectURL(file);
            } catch (error) {
                console.log(error);
            }
        } else if (window.URL !== undefined) {
            // mozilla(firefox)
            try {
                url = window.URL.createObjectURL(file);
            } catch (error) {
                console.log(error);
            }
        }
        return url;
    } 
    /**
     * 文件点击下载
     * @param {*} blob 文件流
     * @param {*} fileName 文件名
     */
    downloadFile(blob, fileName) {
        let eleLink = document.createElement("a");
        eleLink.download = fileName;
        eleLink.style.display = "none";
        // 字符内容转变成blob地址
        eleLink.href = this.getObjectURL(blob);
        // 自动触发点击
        document.body.appendChild(eleLink);
        eleLink.click();
        // 然后移除
        document.body.removeChild(eleLink);
    }
    
      /**
     * 获取文件名后缀
     * @param {*} filename 文件名
     * @returns 
     */
       getFileFix(filename) {
        let fix = filename.substring(filename.lastIndexOf(".") + 1).toLocaleLowerCase();
        return fix;
    }

    /**
     * 是否可预览
     * @param {*} filename 文件名
     * @returns true可，false不可
     */
    isPreview(filename){
        let fix = this.getFileFix(filename)
        switch (fix) {
            case "jpg":
            case "jpge":
            case "png":
            case "pdf":
            case "mp4":
            case "txt":{
                return true
            } 
            default: {
                return false
            }
        } 
    }
    
    /**
     * 预览文件
     * @param {*} blob 文件流
     */
    preview(blob){
        return this.getObjectURL(blob);
    }

    /**
     * 是服务器流 false 本地流true
     * @param {*} blob 文件流
     */
    static isLocalFile(blob){
        return blob.raw ? true : false
    }

}

export default DownloadFile

html

  <el-form-item label="协议附件" prop="gisfileUrl">
              <div class="upload-wrap">
                <el-upload
                  class="upload-demo"
                  ref="gisFile"
                  action="#"
                  multiple
                  :file-list="fileList"
                  :on-remove="handleRemove"
                  :on-change="handleChangeFile"
                  :auto-upload="false"
                  :show-file-list="true"
                >
                  <el-button size="small" type="primary" width="80px">
                    上传
                  </el-button>
                </el-upload>
                <div class="upload-other-btn">
                  <el-button
                    size="small"
                    type="success"
                    width="80px"
                    @click="downloadFileClick"
                  >
                    下载
                  </el-button>

                  <el-button
                    size="small"
                    type="warning"
                    width="80px"
                    @click="pOpen = true"
                  >
                    预览
                  </el-button>
                </div>
              </div>
            </el-form-item>

<!-- 文件预览iframe -->
        <el-dialog
          title="预览窗口"
          :visible.sync="iOpen"
          width="80%"
          height="600px"
          append-to-body
          :close-on-click-modal="false"
        >
          <div class="boxl-center-pdf">
            <iframe
              id="printIframe"
              :src="fileSrc"
              frameborder="0"
              style="width: 100%; height: 500px"
            />
          </div>
        </el-dialog>

js-data数据

  // 文件列表
      fileList: [],
      // 预览对话框控制
      pOpen: false,
      // 预览iframe控制
      iOpen: false,
      // iframe展示src
      fileSrc: null, 
      // 输入导入文件列表
      fileList2: [],

js-methods逻辑代码

    // 文件发生改变
    handleChangeFile(file, fileList) {
      this.fileList = fileList;
    },
    // 删除文件
    handleRemove(file, fileList) {
      this.fileList = fileList;
      if (!file.id) {
        console.log("当前文件没有fileId");
        return;
      }
      console.log(file);
      if (this.form.demolitionId != null) {
        deleteFile({
          fileId: file.id,
        }).then((res) => {
          console.log(this.form.agreementAnnexFolderId);
          let tempStr = this.form.agreementAnnexFolderId;
          tempStr = tempStr.split(",");

          // 相同则认为已删除，剔除掉
          let newStr = tempStr.filter((item, index) => {
            return item != file.id ? true : false;
          });
          this.form.agreementAnnexFolderId = newStr.toString();
        });
      }
    },
    // 下载点击
    downloadFileClick() {
      // 循环文件列表
      this.fileList.forEach(async (item) => {
        // 是本地文件
        if (DownloadFile.isLocalFile(item)) {
          this.getDownLoadFile(item.raw, null, item);
        } else {
          // 获取服务器文件
          const res = await requestDownLoadFile({
            fileId: item.id,
          });
          this.getDownLoadFile(res.data, res["headers"]["content-type"], item);
        }
      });
    },
    // 获取后台文件并下载/预览
    async getDownLoadFile(blobFile, type, row) {
      let downloadBolb = null;

      downloadBolb = new Blob([blobFile], {
        type: type,
      });

      let d = new DownloadFile();
      if (!this.iOpen) {
        // 下载文件
        d.downloadFile(downloadBolb, row.name);
      } else {
        // 预览文件
        this.fileSrc = d.preview(downloadBolb);
      }

      return downloadBolb;
    },
    // 上传文件
    async uploadFiles(oldFileList) {
      // 没有文件不上传
      if (oldFileList.length === 0) return;

      let dataFlight = new FormData();
      oldFileList.forEach((item) => {
        if (item.raw) {
          dataFlight.append("files", item.raw);
        }
      });

            return downloadBolb
        },
        // 上传文件
        async uploadFiles(oldFileList) {
            // 没有文件不上传
            if (oldFileList.length === 0) return;

      let loadingInstance = Loading.service({
        fullscreen: true,
        text: "正在提交...",
      });

      const res = await axios.all([uploadFile(dataFlight)]);

      this.$nextTick(() => {
        // 以服务的方式调用的 Loading 需要异步关闭
        loadingInstance.close();
      });

      if (this.form.demolitionId != null) {
        //修改赋值
        // 新上传的id
        let tempArr = res[0].data.fileIds.toString();
        tempArr = tempArr.split(",");
        // 拼接旧的id
        tempArr.push(...this.form.agreementAnnexFolderId.split(","));
        // 重新上传
        console.log(tempArr.toString());
        this.form.agreementAnnexFolderId = tempArr.toString();
      } else {
        this.form.agreementAnnexFolderId = res[0].data.fileIds;
      }

      this.$refs["gisFile"].clearFiles();
    },

    // 预览文件
    async preview(row) {
      let d = new DownloadFile();
      // 初始化
      this.fileSrc = "";
      // 判断文件是否可预览
      if (d.isPreview(row.name)) {
        this.iOpen = true;
        // 是本地文件
        if (DownloadFile.isLocalFile(row)) {
          this.getDownLoadFile(row.raw, row.raw.type, row);
        } else {
          // 获取服务器文件
          const res = await requestDownLoadFile({
            fileId: row.id,
          });
          this.getDownLoadFile(res.data, res["headers"]["content-type"], row);
        }
      } else {
        this.$modal.msgError(`当前文件不可预览`);
      }
    },

 // 获取上传列表
    getUploadFileList() {
      return this.fileList.filter((item) => {
        if (DownloadFile.isLocalFile(item)) {
          return true;
        }
        return false;
      });
    },
    /** 提交按钮 需要对文件处理*/
    submitForm() {
      this.$refs["form"].validate(async (valid) => {
        if (valid) {
          console.log(this.form);
          if (this.form.demolitionId != null) {
            // 上传文件
            await this.uploadFiles(this.getUploadFileList());
            await updateDemolition(this.form).then((response) => {
              this.$modal.msgSuccess("修改成功");
              this.open = false;
              this.getList();
            });
          } else {
            // 上传文件
            await this.uploadFiles(this.getUploadFileList());
            await addDemolition(this.form).then((response) => {
              this.$modal.msgSuccess("新增成功");
              this.open = false;
              this.getList();
            });
          }
        }
      });
    },

最后

以上就是温柔山水为你收集整理的elementui+vue管理后台-文件上传下载与预览的全部内容，希望文章能够帮你解决elementui+vue管理后台-文件上传下载与预览所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。