<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;
    });
};
Logo
Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^

avatar Vue
cover

echarts堆叠柱状图

avatar Vue

Error in v-on handler: "TypeError: Cannot read properties of undefined (reading 'current')"

这是一个 Vue.js 错误，报错信息提示在 v-on 处理程序中出现了错误：“TypeError: Cannot read properties of undefined(读取 'current')”。这意味示在您的代码中，试图读取一个未定义的变量 'current'。您需要检查您的代码，确保 'current' 已正确定义并初始化。...

avatar Vue