多文件上传效果

liudong

2024-08-24 406e004330031bbebe731e03ba6dd1ca9f75fcd2

多文件上传效果

 src/views/sessionManager/components/updataFile.vue

New file
@@ -0,0 +1,196 @@
<template>
  <a-popover
    :popup-visible="visible"
    title=""
    trigger="click"
    position="tl">
    <a-button
      :disabled="onFileSelectedLoading"
      type="text"
      style="border-radius: 24px"
      @click="visible = !visible"
    >
      <icon-attachment
        size="28"
        style="color: #0960bd"
      />
    </a-button>
    <template #title>
      <div style="display: flex; justify-content: space-between">
        <div>上传文件</div>
        <div>
          <icon-upload />
        </div>
      </div>
    </template>
    <template #content>
      <a-upload
        draggable
        action="/"
        style="width: 100%"
        :auto-upload="false"
        ref="uploadRef"
        @change="onChange"
        multiple
      />
      <div style="width: 100%;margin-top: 10px;display: flex; justify-content: space-between;">
        <div>
          <span>解析方法: </span>
          <a-radio-group v-model="parser_id">
            <a-radio
              v-for="item in parser_ids"
              :key="item.value"
              :value="item.value"
              style="margin-right: 10px"
            >{{item.name}}</a-radio>
          </a-radio-group>
        </div>
        <a-button
          :loading="onFileSelectedLoading"
          @click="upDataFile"
          type="primary"
          size="mini"
          style="border-radius: 24px;"
        >
          <span style="font-size: 12px;">
            上传
          </span>
        </a-button>
      </div>
    </template>
  </a-popover>
</template>

<script lang="ts" setup>
import { onMounted, onBeforeMount, reactive, ref, computed, watch } from "vue";
import axios from "axios";
import { Message } from "@arco-design/web-vue";
import { uploadWithoutKb } from "@/api/session";

const visible = ref(false);
const loading = ref(false);
const chatDis = ref(false);
const directory = ref(false);
const filesBtn = ref(null);
const onFileSelectedLoading = ref(false);
const parser_id = ref("");
const parser_ids = ref([]);
const uploaditemList = ref([]);
const activeSessionId = ref('');
let kbtenantInfo = reactive({
  asr_id: 'paraformer-realtime-8k-v1',
  embd_id: 'BAAI/bge-large-zh-v1.5',
  img2txt_id: 'qwen-vl-max',
  llm_id: 'qwen-plus',
  name: 'wanghaos Kingdom',
  parser_ids:
    'naive:General,qa:Q&A,resume:Resume,manual:Manual,table:Table,paper:Paper,book:Book,laws:Laws,presentation:Presentation,picture:Picture,one:One',
  rerank_id: 'BAAI/bge-reranker-v2-m3',
  role: 'owner',
  tenant_id: '948fc6fa41ab11ef8fb80242ac120004',
  parser_idObj: {},
});
const uploadList = ref([]);
const parser = reactive({
  naive: {
    "chunk_token_num": 676,
    "layout_recognize": true,
    "raptor": {
      "use_raptor": true,
      "prompt": "请总结以下段落。 小心数字，不要编造。 段落如下：\n      {cluster_content}\n以上就是你需要总结的内容。",
      "max_token": 600,
      "threshold": 0.32,
      "max_cluster": 233,
      "random_seed": 1500
    }
  }, // 用户名

});
const props = defineProps(["sessionId"]);
const emit = defineEmits(["selectFileCallback"]);
const uploadRef = ref();
const files = ref([]);
const acceptNameList = computed(() => {
  return ".word, .pdf, .ppt, .excel, .txt, .zip, .rar, .7z, .doc, .docx, .xls, .xlsx, .pptx, .ppt, .pdf, .mp4, .avi, .mp3,.wav, .wma, .wmv, .rm,";
});

const init = () => {
  parser_ids.value = kbtenantInfo.parser_ids.split(",").map((item) => {
    const [value1, value2] = item.split(":");
    return {
      name: value2,
      value: value1
    };
  });
}

const onChange = (fileList) => {
  files.value = fileList;
};


const upDataFile = () => {
  console.log(files.value, "files");
  console.log(parser_ids.value, "解析方法");
  if(files.value.length == 0){
    Message.warning('请选择文件');
    return;
  }
  uploaditemList.value = files.value.map((item)=>{
    return {
      name: item.name,
      size: (item.file.size/1024).toFixed(2) + 'K',
    }
  })
  onFileSelectedLoading.value = true;
  const formData = new FormData();
  for (let i = 0; i < files.value.length; i++) {
    formData.append('file', files.value[i].file);
    formData.append('conversation_id', activeSessionId.value);
    formData.append('parser_id', parser_id.value);
    formData.append('parser_config', '');
  }
  uploadWithoutKb(formData).then((res) => {
    if (res.code == 200) {
      visible.value = false;
      onFileSelectedLoading.value = false;
      // uploaditemList.value = [];
      emit('selectFileCallback', uploaditemList.value);
      Message.success('上传成功');
    } else {
      Message.error('上传失败');
    }
  });



};


onBeforeMount(() => {
  init();



});
onMounted(() => {
});

watch(
  ()=>props.sessionId,
  (value, oldValue)=>{
     activeSessionId.value = value;
  }
)


</script>

<style scoped lang="less">
.aUpload {
  width: 100%;
  max-height: 500px;
  overflow: hidden;
  overflow-y: auto;
}
</style>

 src/views/sessionManager/index.vue

@@ -1,5 +1,5 @@
<template>
  <div class="container">
  <div class="container" ref="container">
    <!--    <AddSession-->
    <!--      :modalObj="modalObj"-->
    <!--      @addSession="addSession"-->
@@ -234,26 +234,7 @@
                }"
              />
              <div style="width: 100%;display: flex;justify-content: space-between">
                <a-button
                  :disabled="onFileSelectedLoading"
                  @click="selectFile"
                  type="text"
                  style="border-radius: 24px"
                >
                  <icon-attachment
                    size="28"
                    style="color: #0960bd"
                  />
                  <input
                    ref="fileInput"
                    type="file"
                    style="display: none"
                    @change="onFileSelected"
                  />
                </a-button>
                  <span
                    style="cursor: pointer;margin-left: 20px;">
                </span>
                <updataFile :sessionId="activeSessionId" @selectFileCallback="selectFileCallback"></updataFile>
                <a-button
                  :disabled="chatDis"
                  @click="sentClick"
@@ -264,52 +245,7 @@
                  <icon-send size="32" style="color: #0960bd" />
                </a-button>
              </div>
<!--              <div class="btn-send">-->
<!--                <a-button-->
<!--                  :disabled="chatDis"-->
<!--                  @click="sentClick"-->
<!--                  type="text"-->
<!--                  style="border-radius: 24px"-->
<!--                  :loading="loading"-->
<!--                >-->
<!--                  <icon-send size="32" style="color: #0960bd" />-->
<!--                </a-button>-->
<!--              </div>-->
            </div>
            <!--            <div style="margin-top: 0px">-->
            <!--              <a-upload-->
            <!--                ref="uploadRef"-->
            <!--                :file-list="uploadList"-->
            <!--                :limit="1"-->
            <!--                multiple-->
            <!--                :custom-request="customRequest"-->
            <!--                style="font-size: 24px;margin-bottom: 10px;position: relative;width: 200px">-->
            <!--                <template #upload-button>-->
            <!--                  <icon-attachment style="color: #0960bd;position: absolute;top:-50px;left: 20px;z-index: 10000"/>-->
            <!--                </template>-->
            <!--              </a-upload>-->
            <!--            </div>-->
<!--            <span-->
<!--              style="-->
<!--                position: absolute;-->
<!--                top: 94px;-->
<!--                left: 20px;-->
<!--                z-index: 999;-->
<!--                cursor: pointer;-->
<!--              "-->
<!--            >-->
<!--              <icon-attachment-->
<!--                size="28"-->
<!--                @click="selectFile"-->
<!--                style="color: #0960bd"-->
<!--              />-->
<!--              <input-->
<!--                ref="fileInput"-->
<!--                type="file"-->
<!--                style="display: none"-->
<!--                @change="onFileSelected"-->
<!--              />-->
<!--            </span>-->
            <div class="uploadFileList">
              <div
                class="files"
@@ -319,7 +255,7 @@
              >
                <a-comment
                  :author="item.name"
                  :content="(item.size/1024).toFixed(2) + 'K'"
                  :content="item.size"
                  style="
                    background: var(--color-bg-2);
                    padding: 10px;
@@ -414,11 +350,6 @@
  </div>
</template>
<script setup lang="ts">
  import {
    IconClose,
    IconSearch,
    IconTiktokColor,
  } from '@arco-design/web-vue/es/icon';
  import { useAppStore, useUserStore } from '@/store';
  import {
    computed,
@@ -439,7 +370,7 @@
  import agentSession from '@/views/sessionManager/components/agentSession.vue';
  import historySession from '@/views/sessionManager/components/historySession.vue';
  import smartAi from '@/views/sessionManager/components/smartAi.vue';
  import setName from '@/views/sessionManager/components/setName.vue';
  import updataFile from '@/views/sessionManager/components/updataFile.vue';
  import EventBus from '@/utils/EventBus';
  import {
    addSessionApi,
@@ -494,6 +425,7 @@
  const files = ref([]);
  const file = ref('');
  const fileInput = ref(null);
  const container = ref(null);
  const chatDataMeg = reactive({});
  const visible = ref(false);
  let toStop = false;
@@ -603,39 +535,11 @@
    // formRef.value.resetFields();
  };

  const selectFile = () => {
    fileInput.value.click();
  const selectFileCallback = (data) => {
    uploaditemList.value = data;
  };

  let onFileSelectedLoading = ref(false);
  const onFileSelected = (event) => {
    const file = event.target.files[0];
    uploaditemList.value = [
      {
        name: file.name,
        size: file.size,
      },
    ];
    if (file) {
      onFileSelectedLoading.value = true;
      const formData = new FormData();
      formData.append('file', file);
      formData.append('conversation_id', activeSessionId.value);
      uploadWithoutKb(formData).then((res) => {
        // console.log(res);
        if (res.code == 200) {
          console.log(res);
          console.log(uploaditemList.value);
          onFileSelectedLoading.value = false;
          fileInput.value.value = '';
          uploaditemList.value = [];
          Message.success('上传成功');
        } else {
          Message.error('上传失败');
        }
      });
    }
  };

  const deleteFile = (item) => {
    console.log(uploaditemList.value);
@@ -647,31 +551,7 @@
    await toClipboard(text); //参数为要复制的文本
  };

  const onChange = (fileList) => {
    // files.value = fileList;
  };

  // 上传文件
  const customRequest = async (option) => {
    const { onProgress, onError, onSuccess, fileItem, name } = option;
    fileItem.status = 'ready';
    if (fileItem.file) {
      const formData = new FormData();
      formData.append('file', fileItem.file);
      formData.append('conversation_id', activeSessionId.value);
      uploadWithoutKb(formData).then((res) => {
        // console.log(res);
        if (res.code == 200) {
          console.log(res);
          console.log(uploadList.value);
          fileItem.status = 'done';
          // uploadList.value = [];
        } else {
          fileItem.status = 'error';
        }
      });
    }
  };

  const DialogList = async () => {
    const { code, data } = await getDialogListApi();
@@ -738,26 +618,6 @@
  const handleShiftEnter = (event) => {
    event.preventDefault();
    inputMsg.value += '\n';
  };
  const dialogChange = (val) => {
    // 判断当前是智能体或agent
    // console.log(val, 'val');
    dialogId.value = val;
    dialogs.value.forEach((item) => {
      if (item.id === val) {
        Object.assign(dialogObj, item);
      }
    });
    console.log(dialogObj.type, 'dialogObj');
    if (dialogObj.type == 1) {
      agentType.value = '1';
      querySessionList();
    } else {
      agentType.value = '2';
      queryAgentSessionList();
    }

    // querySessionList();
  };

  // 发送