[Bug] 服务端数据库版本，上传图片报错

[jfjlhc]

📦 Environment

Docker

📌 Version

V1.44.0

💻 Operating System

Windows

🌐 Browser

Chrome, Edge, Firefox

🐛 Bug Description

部署好了之后，上传图片老报错，我的配置如下：

📷 Recurrence Steps

No response

🚦 Expected Behavior

No response

📝 Additional Information

No response

[lobehubbot]

👀 @jfjlhc

Thank you for raising an issue. We will investigate into the matter and get back to you as soon as possible.
Please make sure you have given us as much context as possible.
非常感谢您提交 issue。我们会尽快调查此事，并尽快回复您。 请确保您已经提供了尽可能多的背景信息。

[jfjlhc]

报错如下：
{
"error": {
"error": {
"type": "error",
"error": {
"type": "invalid_request_error",
"message": "messages.8.content.1.image.source.media_type: Input should be 'image/jpeg', 'image/png', 'image/gif' or 'image/webp'"
}
},
"status": 400,
"headers": {
"via": "1.1 google",
"date": "Wed, 08 Jan 2025 02:04:39 GMT",
"cf-ray": "8fe89e368b9f390d-KUL",
"server": "cloudflare",
"connection": "keep-alive",
"request-id": "req_01Ug3aoaC6aa5X5BJhfThx6U",
"content-type": "application/json",
"x-robots-tag": "none",
"content-length": "186",
"x-should-retry": "false",
"cf-cache-status": "DYNAMIC"
},
"request_id": "req_01Ug3aoaC6aa5X5BJhfThx6U"
},
"endpoint": "https://api.anthropic.com",
"provider": "anthropic"
}

[jfjlhc]

可我明明截图就是PNG格式。而且我试过另存为图片再发送

[lobehubbot]

Bot detected the issue body's language is not English, translate it automatically. 👯👭🏻🧑‍🤝‍🧑👫🧑🏿‍🤝‍🧑🏻👩🏾‍🤝‍👨🏿👬🏿

---

But I clearly see that the screenshot is in PNG format. And I tried saving it as a picture and then sending it

[dosubot]

@jfjlhc 你好！我是Dosu，一个可以帮助你解决问题、回答疑问并成为贡献者的机器人。感谢你的问题，请放心，我会在等待人类维护者的期间帮助你解决这个问题。

I found a similar unsolved discussion regarding issues with image uploads in the database mode: [Bug] 数据库模式只有上传图片有问题。 ^[1]. This might be related to the problem you're experiencing.

For your specific issue, ensure that your S3 storage configuration is correctly set up, as this is critical for image uploads. Key environment variables include S3_ACCESS_KEY_ID, S3_SECRET_ACCESS_KEY, S3_ENDPOINT, S3_BUCKET, and S3_PUBLIC_DOMAIN. These settings ensure that images are properly uploaded and accessible ^[2][3].

Additionally, verify that your Docker setup is correctly configured to support these environment variables, as any misconfiguration could impact the image upload functionality. If the problem persists, consider checking the error handling mechanisms in place for image uploads, which include notifications for network errors and file type checks ^[4].

To continue talking to Dosu, mention @dosu.

---

^{Help Dosu learn! Give it feedback: Great Response | Irrelevant Answer | Incorrect Sources | Too Verbose | Hallucination | Other}

[jfjlhc]

@jfjlhc 你好！我是Dosu，一个可以帮助你解决问题、回答疑问并成为贡献者的机器人。感谢你的问题，请放心，我会在等待人类维护者的期间帮助你解决这个问题。

I found a similar unsolved discussion regarding issues with image uploads in the database mode: [Bug] 数据库模式只有上传图片有问题。 [1]. This might be related to the problem you're experiencing.

For your specific issue, ensure that your S3 storage configuration is correctly set up, as this is critical for image uploads. Key environment variables include S3_ACCESS_KEY_ID, S3_SECRET_ACCESS_KEY, S3_ENDPOINT, S3_BUCKET, and S3_PUBLIC_DOMAIN. These settings ensure that images are properly uploaded and accessible [2][3].

Additionally, verify that your Docker setup is correctly configured to support these environment variables, as any misconfiguration could impact the image upload functionality. If the problem persists, consider checking the error handling mechanisms in place for image uploads, which include notifications for network errors and file type checks [4].

To continue talking to Dosu, mention @dosu.

Help Dosu learn! Give it feedback: Great Response | Irrelevant Answer | Incorrect Sources | Too Verbose | Hallucination | Other

没有得到解决，我的cors域配置也很合理：
[
{
"AllowedOrigins": [
""
],
"AllowedMethods": [
"GET",
"PUT",
"POST",
"DELETE",
"HEAD"
],
"AllowedHeaders": [
""
],
"MaxAgeSeconds": 3000
}
]

我还尝试使用了NGINX代理：

[arvinxx]

你传上去的图片看起来似乎没有正常显示，兜底到灰图了，请先检查下你的图片展示问题？

[lobehubbot]

Bot detected the issue body's language is not English, translate it automatically. 👯👭🏻🧑‍🤝‍🧑👫🧑🏿‍🤝‍🧑🏻👩🏾‍🤝‍👨🏿👬🏿

---

Your pictures don’t seem to be displayed properly. Please check your picture display issues first.

[jfjlhc]

你传上去的图片看起来似乎没有正常显示，兜底到灰图了，请先检查下你的图片展示问题？

我截图的时候未发送的时候是好好的，通样的正常截图在nextchat随便发送的

当发送就变成灰色了

[lobehubbot]

Bot detected the issue body's language is not English, translate it automatically. 👯👭🏻🧑‍🤝‍🧑👫🧑🏿‍🤝‍🧑🏻👩🏾‍🤝‍👨🏿👬🏿

---

It seems that the picture you uploaded is not displayed normally and is grayed out. Please check the display problem of your picture first?

When I took the screenshot, it was fine before sending it. Normal screenshots can be sent casually on nextchat.

When sent, it turns gray

[jfjlhc]

Bot detected the issue body's language is not English, translate it automatically. 👯👭🏻🧑‍🤝‍🧑👫🧑🏿‍🤝‍🧑🏻👩🏾‍🤝‍👨🏿👬🏿

It seems that the picture you uploaded is not displayed normally and is grayed out. Please check the display problem of your picture first?

When I took the screenshot, it was fine before sending it. Normal screenshots can be sent casually on nextchat. When sent, it turns gray

Route: [anthropic] ProviderBizError: Error: 400 {"type":"error","error":{"type":"invalid_request_error","message":"messages.0.content.1.image.source.media_type: Input should be 'image/jpeg', 'image/png', 'image/gif' or 'image/webp'"}}
at $.generate (.next/server/edge-chunks/311.js:4:1777)
at e5.makeStatusError (.next/server/edge-chunks/311.js:4:13829)
at e5.makeRequest (.next/server/edge-chunks/311.js:4:14769)
at async ee.chat (.next/server/edge-chunks/845.js:9:8903)
at async (.next/server/app/(backend)/webapi/chat/anthropic/route.js:1:7369)
at async el.do (.next/server/edge-chunks/756.js:5:10391)
at async el.handle (.next/server/edge-chunks/756.js:5:12486)
at async eT.handler (.next/server/edge-chunks/756.js:6:33520)
at async U (.next/server/edge-chunks/756.js:6:4253) {
status: 400,
headers: {
cf-cache-status: 'DYNAMIC',
cf-ray: '8fe9385e2885fa4b-KUL',
connection: 'keep-alive',
content-length: '186',
content-type: 'application/json',
date: 'Wed, 08 Jan 2025 03:49:53 GMT',
request-id: 'req_015VUT4CTCKZrq3eSxy9pyFc',
server: 'cloudflare',
via: '1.1 google',
x-robots-tag: 'none',
x-should-retry: 'false'
},
request_id: 'req_015VUT4CTCKZrq3eSxy9pyFc',
error: {
type: 'error',
error: {
type: 'invalid_request_error',
message: 'messages.0.content.1.image.source.media_type: Input should be 'image/jpeg', 'image/png', 'image/gif' or 'image/webp''
}
}
}

[ImcwjHere]

你传上去的图片看起来似乎没有正常显示，兜底到灰图了，请先检查下你的图片展示问题？

这个问题似乎是因为lobechat数据库版本的上传图片功能是直接在messages里传递s3存储里图片的直链url，而不是图片本身。楼主调用的claude模型不支持图片url，必须要上传图片文件本身，所以报错。希望官方可以解决

[lobehubbot]

Bot detected the issue body's language is not English, translate it automatically. 👯👭🏻🧑‍🤝‍🧑👫🧑🏿‍🤝‍🧑🏻👩🏾‍🤝‍👨🏿👬🏿

---

It seems that the picture you uploaded is not displayed normally and is grayed out. Please check the display problem of your picture first?

This problem seems to be because the upload image function of the lobechat database version directly passes the direct URL of the image in the S3 storage in messages, rather than the image itself. The claude model called by the poster does not support image URLs, and the image file itself must be uploaded, so an error is reported. I hope the official can solve it