文件上传bs-upload

文件下载

注意中文前端需要encodeURIComponent加密

 handleDownPdf(item) {
      this.$bsAjax.doDown(item.value, null, true,item.name);
    },

vant img 上传

<template>
  <div>
    <el-button @click="handleExcel2Pdf">Excel转PDF</el-button>
    <bs-upload
      @change="
        (val, valT) => {
          value.icLogo = val;
          changeField.icLogo = val;
          changeField.changed = true;
          handleSetChangeField(changeField);
        }
      "
      :primary-change-state="value.primaryChangeState"
      :on-callback-root-data="handleCallBackRootData"
      :item="{
        accept: 'image/jpeg,image/jpg,image/png,image/gif',
        'limit-type': 'image/jpeg,image/jpg,image/png,image/gif',
        field: 'icLogo',
        attrs: { limit: 1, replace: true },
        meta: { dataType: 'string2file' },
      }"
      :is-vant="true"
      v-model="value.icLogo"
    />
  </div>
</template>
<style></style>
<script>
import {
  doExcel2PdfByPath,
  // doExcel2PdfByFile,
} from "@/actions/pdf/excel2pdf.js";
export default {
  name: "batools-main",
  componentsUsed: {
    name: "batools-main",
  },
  data() {
    return {
      value:{

      },
      datas: {
        mapper: {},
        form: {},
        table: [],
      },
      //公共必须参数 start
      // value: {},
      //公共参数 end
      //变更的数据存储
      changeField: {
        changed: false,
      },
      data: {},
      //特殊处理补充字段 start
      valueT: {
        auditStatus: {
          value: null,
          namel: null,
        },
      },
      showHide: {
        auditStatus: false,
      },
      dimData: {
        auditStatus: [],
      },
      //特殊处理补充字段 end
    };
  },
  routerUsed: {
    path: "/batools",
    name: "batools-main",
    meta: {
      keepAlive: true,
      name: "batools-main",
    },
    component: (r) =>
      require.ensure([], () => r(require("./index")), "bs-batools"),
  },
  methods: {
    handleSetChangeField() {},
    handleCallBackRootData(callback) {
      //开放原始入口配置文件，便于子组件调用根组件，进行直接修改数据
      callback(this);
    },
    handleExcel2Pdf() {
      let that = this;
      const params = {
        template: "gzsb",
      };
      doExcel2PdfByPath({}, params)
        .then((res) => {
          that.$msgBox.success(res);
        })
        .catch(() => {
          that.$msgBox.error("转换失败");
        });
    },
  },
  // beforeRouteEnter(to, from, next) {
  //   console.log(to);
  //   next(vm => {
  //     vm.$router.replace(from.path);
  //   });
  // }
};
</script>

element-ui upload 上传

<template>
  <section class="boostrap-main">
    <div class="page-wrapper batools-pdf">
      <div class="page-content">
        <!--end row-->
        <div class="row">
          <div class="col-xl-9 mx-auto">
            <div class="d-flex align-items-center">
              <div>
                <p class="mb-0">社保下载</p>
              </div>
              <div class="ms-auto">
                <a class="cursor-p" @click.prevent="handleDownTemplate">模板</a>
              </div>
            </div>
            <hr />
            <bs-upload
              class="float-center"
              :open-stream="true"
              :onHttpRequestStream="handleHttpRequestStream"
              @change="
                (val, valT) => {
                  value.icLogo = val;
                  changeField.icLogo = val;
                  changeField.changed = true;
                  handleSetChangeField(changeField);
                }
              "
              :primary-change-state="value.primaryChangeState"
              :on-callback-root-data="handleCallBackRootData"
              :item="{
                field: 'icLogo',
                attrs: {
                  accept: '.xlsx',
                  'data-field-show': true,
                  drag: true,
                  hideTitle: 'show',
                  label: '奖品图片',
                  limit: '1',
                  'limit-type':
                    'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',
                  listType: 'text',
                  maxSize: '4000',
                  multiple: false,
                  'verify-method': 'file',
                  'remote-hide': true,
                  clear: true,
                },
                meta: {
                  edit: true,
                  rowId: '1',
                  tabId: '1',
                  span: 24,
                  dataType: 'string2file',
                },
              }"
              v-model="value.icLogo"
            />
            <div class="card" v-if="datas.table.length > 0">
              <div class="card-body">
                <ul class="list-group">
                  <li
                    class="list-group-item d-flex justify-content-between align-items-center"
                    v-for="(item, i) in datas.table"
                    :key="`pdfd${i}`"
                  >
                    {{ item.name }}
                    <span
                      class="badge bg-primary rounded-pill cursor-p"
                      @click.prevent="handleDownPdf(item)"
                      >下载</span
                    >
                  </li>
                </ul>
              </div>
            </div>
          </div>
        </div>
        <!--end row-->
      </div>
    </div>

    <!-- <el-button @click="handleExcel2Pdf">Excel转PDF</el-button> -->

    <!-- {{datas.table}} -->
  </section>
</template>
<style lang="scss">
.batools-pdf {
}
</style>
<script>
import {
  doExcel2PdfByPath,
  doExcel2PdfByFile,
} from "@/actions/pdf/excel2pdf.js";
export default {
  name: "batools-main",
  componentsUsed: {
    name: "batools-main",
  },
  data() {
    return {
      value: {},
      datas: {
        mapper: {},
        form: {},
        table: [],
      },
      //公共必须参数 start
      // value: {},
      //公共参数 end
      //变更的数据存储
      changeField: {
        changed: false,
      },
      data: {},
      //特殊处理补充字段 start
      valueT: {
        auditStatus: {
          value: null,
          namel: null,
        },
      },
      showHide: {
        auditStatus: false,
      },
      dimData: {
        auditStatus: [],
      },
      //特殊处理补充字段 end
    };
  },
  routerUsed: {
    path: "/batools",
    name: "batools-main",
    meta: {
      keepAlive: true,
      name: "batools-main",
    },
    component: (r) =>
      require.ensure([], () => r(require("./index")), "bs-batools"),
  },
  methods: {
    //接收文件流信息
    handleHttpRequestStream(thatC) {
      let that = this;
      const params = {
        template: "gzsb",
      };
      thatC.loading = true;
      const formData = new FormData();
      formData.append("file", thatC.fileRaw);

      doExcel2PdfByFile(formData, params)
        .then((res) => {
          that.$msgBox.success("转换成功");
          thatC.loading = false;
          that.datas.table = res.data.data.files;
          thatC.clearFiles();
          // that.$forceUpdate();
        })
        .catch(() => {
          that.$msgBox.error("转换失败");
          thatC.clearFiles();
          thatC.loading = false;
        });
    },
    handleSetChangeField() {},
    handleCallBackRootData(callback) {
      //开放原始入口配置文件，便于子组件调用根组件，进行直接修改数据
      callback(this);
    },
    handleExcel2Pdf() {
      let that = this;
      const params = {
        template: "gzsb",
      };
      doExcel2PdfByPath({}, params)
        .then((res) => {
          that.$msgBox.success(res);
        })
        .catch(() => {
          that.$msgBox.error("转换失败");
        });
    },
    handleDownTemplate() {},
    handleDownPdf(item) {
      this.$bsAjax.doDown(item.value, null, true,item.name);
    },
  },
  // beforeRouteEnter(to, from, next) {
  //   console.log(to);
  //   next(vm => {
  //     vm.$router.replace(from.path);
  //   });
  // }
};
</script>