<template>
    <div class="from-clues">
      <!-- 表单部分 -->
      <div class="from-clues-header">
        <el-form :model="ruleForm" label-width="80px">
          <el-row>
            <el-col :span="5">
              <el-form-item label="电子签名">
                <el-input></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="19" class="btnColRight">
              <el-form-item>
                <el-button type="primary" native-type="submit">查询</el-button>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>

      <di>
        <el-upload
          class="upload-demo"
          :action="requestUrl"
          :on-success="handleSuccess"
          :on-error="handleError"
          :before-upload="beforeUpload"
          :file-list="fileList"
          :limit="limitCount"
          :on-exceed="handleExceed"
          list-type="picture"
          drag
        >
          <i class="el-icon-upload"></i>
          <div class="el-upload__text">将图片拖到此处，或<em>点击上传</em></div>
          <div class="el-upload__tip" slot="tip">只能上传jpg/png文件，且不超过2MB</div>
        </el-upload>

      </di>
      <!-- 表格 -->
    </div>
  </template>
    <script>
    import { upload } from "@/api/file.js";
    import { uploadUrl } from '@/api/dzqm'

    export default {
      name: "dzqm",
      components: {},
      mounted () {
      },
      data () {
        return {
          dialogImageUrl: '',
          dialogVisible: false,
          disabled: false,

          yourHeaders: { /* 你的请求头信息 */ },
          fileList: [], // 已上传文件列表
          limitCount: 3, // 限制上传文件的个数


          requestUrl: uploadUrl(),

        }
      },
      methods: {
        handleSuccess(response, file, fileList) {
          // 文件上传成功后的回调
          console.log('上传成功:', response);
          this.fileList = fileList; // 更新已上传文件列表
        },
        handleError(error, file, fileList) {
          // 文件上传失败后的回调
          console.error('上传失败:', error);
        },
        beforeUpload(file) {
          // 上传文件之前的钩子，返回false则停止上传
          const isJPGorPNG = file.type === 'image/jpeg' || file.type === 'image/png';
          const isLt2M = file.size / 1024 / 1024 < 2;
          if (!isJPGorPNG) {
            this.$message.error('上传图片只能是 JPG/PNG 格式!');
            return false;
          }
          if (!isLt2M) {
            this.$message.error('上传图片大小不能超过 2MB!');
            return false;
          }
          return true;
        },
        handleExceed(files, fileList) {
          // 文件超出个数限制时的回调
          this.$message.warning(`当前限制选择 ${this.limitCount} 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
        },

      },
    };
    </script>
    <style scoped lang="scss">
    @import "~@/styles/public.scss";
  </style>