图片上传
Artalk 提供图片上传功能,支持限制图片大小、上传频率等,你还能结合 upgit 将图片上传到图床。
你可以在控制中心找到「设置」界面修改此配置。
配置文件
完整的 img-upload
配置如下:
yaml
# 图片上传
img_upload:
enabled: true # 总开关
path: "./data/artalk-img/" # 图片存放路径
max_size: 5 # 图片大小限制 (单位:MB)
public_path: null # 指定图片链接基础路径 (默认为 "/static/images/")
# 使用 upgit 将图片上传到 GitHub 或图床
upgit:
enabled: false # 启用 upgit
exec: "./upgit -c <upgit配置文件路径> -t /artalk-img"
del_local: true # 上传后删除本地的图片
# 图片上传
img_upload:
enabled: true # 总开关
path: "./data/artalk-img/" # 图片存放路径
max_size: 5 # 图片大小限制 (单位:MB)
public_path: null # 指定图片链接基础路径 (默认为 "/static/images/")
# 使用 upgit 将图片上传到 GitHub 或图床
upgit:
enabled: false # 启用 upgit
exec: "./upgit -c <upgit配置文件路径> -t /artalk-img"
del_local: true # 上传后删除本地的图片
使用 Upgit 上传到图床
Upgit 支持将图片上传到 Github、Gitee、腾讯云 COS、七牛云、又拍云、SM.MS 等图床或代码仓库。
首先,根据 README.md 的说明,下载 Upgit 并完成你需要上传的目标图床的配置。
然后在 Artalk 的 img_upload.upgit
字段填入 Upgit 启动参数 (建议使用程序绝对路径),例如:
yaml
upgit:
enabled: true # 启用 upgit
exec: "/root/upgit -c <upgit配置文件路径> -t /artalk-img"
del_local: true # 上传后删除本地的图片
upgit:
enabled: true # 启用 upgit
exec: "/root/upgit -c <upgit配置文件路径> -t /artalk-img"
del_local: true # 上传后删除本地的图片
上传频率限制
频率限制跟随 captcha
验证码配置,当超出限制将弹出验证码。
可参考:“后端 · 验证码”
path
img_upload.path
为上传的图片文件「本地存放目录」路径,该目录会被 Artalk 映射到可访问的:
http://<后端地址>/static/images/
http://<后端地址>/static/images/
public_path
img.public_path
为空的默认值为:/static/images/
当该项为「相对路径」时,例如:/static/images/
前端上传图片得到的 HTML 标签将为:
html
<img src="http://<后端地址>/static/images/1.png">
<img src="http://<后端地址>/static/images/1.png">
注:这里的 <后端地址>
是前端 conf.server
配置。
当该项为「完整 URL 路径」时,例如:https://cdn.github.com/img/
时,图片标签将为:
html
<img src="https://cdn.github.com/img/1.png">
<img src="https://cdn.github.com/img/1.png">
提示:这个配置可以结合负载均衡等场景使用。
在前端自定义上传 API
前端提供了配置项 imgUploader
,你可以自定义前端图片上传时请求的 API,例如:
js
Artalk.init({
imgUploader: async (file) => {
const form = new FormData()
form.set('file', file)
const imgUrl = await fetch("https://api.example.org/upload", {
method: 'POST',
body: form
})
return imgUrl
}
})
Artalk.init({
imgUploader: async (file) => {
const form = new FormData()
form.set('file', file)
const imgUrl = await fetch("https://api.example.org/upload", {
method: 'POST',
body: form
})
return imgUrl
}
})
参考:前端配置文档