多文件上传效果

liudong

2024-08-24 406e004330031bbebe731e03ba6dd1ca9f75fcd2

 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();
  };

  // 发送