vue文件上传+pdf缩略图及预览

最新推荐文章于 2024-09-20 10:02:18 发布

垂柳A个人笔记

最新推荐文章于 2024-09-20 10:02:18 发布

阅读量6.4k

点赞数 3

分类专栏： vue js+jq h5

本文链接：https://blog.csdn.net/SNC8F/article/details/103902771

版权

vue 同时被 3 个专栏收录

10 篇文章 0 订阅

订阅专栏

js+jq

10 篇文章 0 订阅

订阅专栏

1 篇文章 0 订阅

订阅专栏

   <el-upload
                class="upload-demo"
                drag
                action="doUpload"
                :limit="1"
                :auto-upload="true"
                ref="upload"
                accept="application/pdf"
                :before-upload="beforeUpload"
              >
                <i class="el-icon-upload"></i>
                <div class="el-upload__text">上传文件</div>
                <!-- <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div> -->
              </el-upload>

    <object
                  :data="fileData"
                  type="application/pdf"
                  width="100%"
                  height="100%"
                  internalinstanceid="5"
                ></object>

     <el-button
                  class="view"
                  round
                  size="small"
                  @click="viewFile()"
                >预览文件</el-button>

//上传文件之前的钩子
   beforeUpload(file) {
      console.log("文件", file);
      this.file = file;
      this.fileName = file.name;
      this.fileSize = file.size;
      let reader = new FileReader();
      reader.readAsDataURL(file);
      let that = this;
      reader.onload = function() {
        that.fileData = reader.result;
        // console.log("fileData", reader.result);
        console.log("fileData", that.fileData);
      };
      return false; // 返回false不会自动上传
    },


//预览文件
   viewFile() {
      console.log("viewFile");
      var win = window.open();
      win.document.write(
        '<body style="margin:0px;"><object data="' +
          this.fileData +
          '" type="application/pdf" width="100%" height="100%"><iframe src="' +
          this.fileData +
          '" scrolling="no" width="100%" height="100%" frameborder="0" ></iframe></object></body>'
      );
      // win.document.write(
      //   '<body style="margin:0px;"><iframe src="' +
      //     this.fileData +
      //     '" scrolling="no" width="100%" height="100%" frameborder="0" ></iframe></body>'
      // );
    },


//上传文件
    uploadContract() {
      let fileFormData = new FormData();
      fileFormData.append("file", this.file);
      fileFormData.append("doc_title", this.fileName);
      uploadContract(fileFormData).then(res => {
        if (res.code == 200) {
          console.log("uploadContract", res);
        } else {
          this.$message({
            message: res.msg,
            type: "warning"
          });
        }
      });
    },

//上传Formdata接口请求封装
export const HttpPostFormdata = (apiUrl, url, query) => {
  console.log("token", localStorage.getItem("token"));
  query = query || {};
  return instance
    .post(apiUrl + url + "?token=" + localStorage.getItem("token"), query, {
      headers: {
        "Content-Type": "multipart/form-data",
        token: localStorage.getItem("token")
      }
    })
    .then(res => {
      if (
        res.data.code == 1001 ||
        res.data.code == 1000 ||
        res.data.code == 1002
      ) {
        // eslint-disable-next-line no-console
        console.log("code1001");
        localStorage.token = "";
        localStorage.name = "";
        router.push({
          path: "/userLogin"
        });

        return res.data;
      } else {
        return res.data;
      }
    })
    .catch(() => {
      var dada = {
        msg: "系统错误!"
      };
      return dada;
    });
};