|
@@ -54,10 +54,10 @@
|
|
|
</div> -->
|
|
|
<div class="input-container">
|
|
|
<!-- 文件上传预览区 -->
|
|
|
- <div class="upload-preview" v-if="uploadFiles.length > 0">
|
|
|
+ <div class="upload-preview" v-if="uploadFiles.length > 0 || documents.length > 0">
|
|
|
<div
|
|
|
v-for="(file, index) in uploadFiles"
|
|
|
- :key="index"
|
|
|
+ :key="'img-'+index"
|
|
|
class="preview-item"
|
|
|
>
|
|
|
<div class="preview-content">
|
|
@@ -74,6 +74,20 @@
|
|
|
</div>
|
|
|
<i class="el-icon-close remove-file" @click="removeFile(index)"></i>
|
|
|
</div>
|
|
|
+
|
|
|
+ <div
|
|
|
+ v-for="(doc, index) in documents"
|
|
|
+ :key="'doc-'+index"
|
|
|
+ class="preview-item document-item"
|
|
|
+ >
|
|
|
+ <div class="preview-content">
|
|
|
+ <div class="file-info">
|
|
|
+ <i class="el-icon-document"></i>
|
|
|
+ <span>{{ doc.name }}</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <i class="el-icon-close remove-file" @click="removeDocument(index)"></i>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
|
|
|
<!-- 输入区域 -->
|
|
@@ -93,7 +107,7 @@
|
|
|
ref="fileInput"
|
|
|
multiple
|
|
|
@change="handleFileUpload"
|
|
|
- accept="image/*,.pdf,.doc,.docx,.txt,.mp4"
|
|
|
+ accept="image/*,.pdf,.doc,.docx,.txt"
|
|
|
style="display: none"
|
|
|
/>
|
|
|
<button class="tool-btn" @click="$refs.fileInput.click()">
|
|
@@ -167,6 +181,7 @@ export default {
|
|
|
currentChat_id: "",
|
|
|
phone: "",
|
|
|
uploadFiles: [], // 存储上传的文件
|
|
|
+ documents: [], // 新增:专门存储文档类型文件的数组
|
|
|
};
|
|
|
},
|
|
|
mounted() {
|
|
@@ -217,38 +232,13 @@ export default {
|
|
|
async handleFileUpload(event) {
|
|
|
const files = Array.from(event.target.files);
|
|
|
|
|
|
- // 检查当前已上传的图片数量
|
|
|
- const currentImageCount = this.uploadFiles.filter((file) =>
|
|
|
- file.type.startsWith("image/")
|
|
|
- ).length;
|
|
|
-
|
|
|
- // 计算还能上传多少张图片
|
|
|
- const remainingSlots = 5 - currentImageCount;
|
|
|
-
|
|
|
- if (remainingSlots <= 0) {
|
|
|
- this.$message.warning("最多只能上传5张图片");
|
|
|
- event.target.value = "";
|
|
|
- return;
|
|
|
- }
|
|
|
-
|
|
|
- // 只处理允许的数量的文件
|
|
|
- const filesToProcess = files.slice(0, remainingSlots);
|
|
|
-
|
|
|
- if (files.length > remainingSlots) {
|
|
|
- this.$message.warning(
|
|
|
- `已达到上传上限,只能再上传${remainingSlots}张图片`
|
|
|
- );
|
|
|
- }
|
|
|
-
|
|
|
- for (const file of filesToProcess) {
|
|
|
+ for (const file of files) {
|
|
|
try {
|
|
|
- // 创建 FormData 对象
|
|
|
const formData = new FormData();
|
|
|
formData.append("file", file);
|
|
|
|
|
|
- // 发送上传请求
|
|
|
const response = await axios.post(
|
|
|
- `${process.env.VUE_APP_BASE_API}/upload/file`,
|
|
|
+ `${"http://192.168.66.187:8082"}/upload/file`,//process.env.VUE_APP_BASE_API
|
|
|
formData,
|
|
|
{
|
|
|
headers: {
|
|
@@ -257,28 +247,36 @@ export default {
|
|
|
}
|
|
|
);
|
|
|
|
|
|
- // 获取接口返回的文件URL
|
|
|
const fileUrl = response.data.data.fileUrl;
|
|
|
- // 将文件信息添加到 uploadFiles 数组
|
|
|
- this.uploadFiles.push({
|
|
|
+ const fileInfo = {
|
|
|
name: file.name,
|
|
|
type: file.type,
|
|
|
preview: fileUrl,
|
|
|
url: fileUrl,
|
|
|
- });
|
|
|
+ };
|
|
|
+
|
|
|
+ // 根据文件类型分别存储
|
|
|
+ if (file.type.startsWith('image/')) {
|
|
|
+ this.uploadFiles.push(fileInfo);
|
|
|
+ } else {
|
|
|
+ // 文档类型:pdf, doc, docx, txt 等
|
|
|
+ this.documents.push(fileInfo);
|
|
|
+ }
|
|
|
} catch (error) {
|
|
|
console.error("文件上传失败:", error);
|
|
|
this.$message.error(`文件 ${file.name} 上传失败`);
|
|
|
}
|
|
|
}
|
|
|
|
|
|
- // 清空input以允许重复上传相同文件
|
|
|
event.target.value = "";
|
|
|
},
|
|
|
|
|
|
removeFile(index) {
|
|
|
this.uploadFiles.splice(index, 1);
|
|
|
},
|
|
|
+ removeDocument(index) {
|
|
|
+ this.documents.splice(index, 1);
|
|
|
+ },
|
|
|
/* */
|
|
|
checkAIData() {
|
|
|
const aiData = localStorage.getItem("AIData");
|
|
@@ -378,7 +376,7 @@ export default {
|
|
|
console.log("WebSocket 连接已建立:", event);
|
|
|
};
|
|
|
this.websocket.onmessage = (event) => {
|
|
|
- // 解析收到的消息
|
|
|
+ // 解����收到的消息
|
|
|
const result = JSON.parse(event.data);
|
|
|
|
|
|
// 检查消息是否完结
|
|
@@ -412,14 +410,17 @@ export default {
|
|
|
}
|
|
|
}
|
|
|
const chatId = this.getUuid();
|
|
|
- const wsUrl = `${"http://192.168.66.187:8082"}/chatbot/multimodal`; //process.env.VUE_APP_BASE_AI_API
|
|
|
+ const wsUrl = `${"http://192.168.66.187:8082"}/api/chat/chatgpt`; //process.env.VUE_APP_BASE_AI_API/chatbot/multimodal
|
|
|
let message = this.userInput.trim();
|
|
|
|
|
|
const imageUrls = this.uploadFiles
|
|
|
.filter((file) => file.type.startsWith("image/"))
|
|
|
.map((file) => file.url);
|
|
|
|
|
|
- if (message || imageUrls.length > 0) {
|
|
|
+ // 获取文档 URL
|
|
|
+ const documentUrls = this.documents.map(doc => doc.url);
|
|
|
+
|
|
|
+ if (message || imageUrls.length > 0 || documentUrls.length > 0) {
|
|
|
message = message.replace(/(\r\n|\r|\n)/g, " \n");
|
|
|
|
|
|
this.messages.push({
|
|
@@ -432,6 +433,7 @@ export default {
|
|
|
|
|
|
this.userInput = "";
|
|
|
this.uploadFiles = [];
|
|
|
+ this.documents = [];
|
|
|
|
|
|
const botMessage = {
|
|
|
user: "bot",
|
|
@@ -460,6 +462,7 @@ export default {
|
|
|
session_id: this.session_id || "",
|
|
|
source: "pc",
|
|
|
image_urls: imageUrls,
|
|
|
+ documents: documentUrls, // 添加文档 URLs
|
|
|
//history_limit: 10
|
|
|
},
|
|
|
});
|
|
@@ -485,9 +488,9 @@ export default {
|
|
|
// 如果有音频,播放音频
|
|
|
if (
|
|
|
response.data.data.audio_info &&
|
|
|
- response.data.data.audio_info.audio_base64
|
|
|
+ response.data.data.audio_info.audio
|
|
|
) {
|
|
|
- this.playAudio(response.data.data.audio_info.audio_base64);
|
|
|
+ this.playAudio(response.data.data.audio_info.audio);
|
|
|
}
|
|
|
this.handleResponse(response.data, botMessage);
|
|
|
} catch (error) {
|
|
@@ -635,7 +638,7 @@ export default {
|
|
|
linkify: true,
|
|
|
});
|
|
|
|
|
|
- // 自定义链接渲染规则
|
|
|
+ // 自定义链接渲染规���
|
|
|
md.renderer.rules.link_open = (tokens, idx, options, env, self) => {
|
|
|
const token = tokens[idx];
|
|
|
const hrefIndex = token.attrIndex("href");
|
|
@@ -976,7 +979,7 @@ export default {
|
|
|
.message-text {
|
|
|
margin: 0;
|
|
|
white-space: normal; /* 确保文本会换行 */
|
|
|
- word-wrap: break-word; /* 长单词或 URL 会被断开以适应容器宽度 */
|
|
|
+ word-wrap: break-word; /* 长单词或 URL 会被断开���适应容器宽度 */
|
|
|
overflow: auto;
|
|
|
font-size: 14px;
|
|
|
}
|
|
@@ -1034,7 +1037,7 @@ textarea {
|
|
|
.input-container textarea {
|
|
|
width: 100%; /* 输入框占据所有可用空间 */
|
|
|
padding: 10px;
|
|
|
- margin-right: 10px; /* 与按钮的间隔 */
|
|
|
+ margin-right: 10px; /* 与按钮的间�� */
|
|
|
box-sizing: border-box;
|
|
|
}
|
|
|
|
|
@@ -1162,4 +1165,28 @@ textarea {
|
|
|
.tool-btn:hover {
|
|
|
color: #3cbade;
|
|
|
}
|
|
|
+
|
|
|
+.document-item {
|
|
|
+ width: 120px; /* 文档预览项可以设置得更宽一些 */
|
|
|
+ height: 60px;
|
|
|
+ background-color: #f5f5f5;
|
|
|
+}
|
|
|
+
|
|
|
+.document-item .file-info {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ gap: 5px;
|
|
|
+}
|
|
|
+
|
|
|
+.document-item .file-info i {
|
|
|
+ font-size: 20px;
|
|
|
+ color: #666;
|
|
|
+}
|
|
|
+
|
|
|
+.document-item .file-info span {
|
|
|
+ font-size: 12px;
|
|
|
+ overflow: hidden;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ white-space: nowrap;
|
|
|
+}
|
|
|
</style>
|