base64字符串太长，图像加载缓慢(React，Node，MongoDB)

Question

在用户注册之前，他们必须上传个人资料图片。图片采用base64格式，字符串太长。此图像不存储在MongoDB中，只是作为用户配置文件中的字符串。然后我使用<img>标记来显示它。它加载缓慢。是因为字符串太长吗？

此外，后端没有代码。我只是在客户端处理图像上传，这个 base64 字符串存储在用户的对象中，然后我可以在<img>标签中显示它。

最好的做法是，如果我在服务器上处理图像上传并将图像本身存储在数据库中？我必须为此使用 Multer 吗？

看这里

注册的一部分：

user = new User({
name,
email,
password,
date,
age,
bio,
gender,
location,
file: req.path.file,
previewUrl,
image: req.path.file,
});

用户架构的一部分：

image: {
type: String,
},
file: {
type: String,
},
previewUrl: {
type: String,
},

客户端(反应(：

<input
id="image"
type="file"
accept=".jpg, .png, .jpeg"
onChange={this.pickedHandler}
value={''}
name="image"
/>
componentDidUpdate() {
if (!this.state.file) {
return;
}
const fileReader = new FileReader();
fileReader.onload = () => {
this.setState({ previewUrl: fileReader.result });
};
fileReader.readAsDataURL(this.state.file);
}
pickedHandler = (event) => {
if (event.target.files && event.target.files.length === 1) {
const pickedFile = event.target.files[0];
this.setState({ file: pickedFile });
}
};

Answer 1

这是一个多层次的问题。但首先：

• 为什么不将配置文件图像存储在数据库中？如果用户在其他计算机上访问该网站，他们将没有个人资料图片，需要再次更新。除非你有一个特定的业务规则来说明为什么会这样，否则我会说把它保存在dB上。

React 保存长字符串或大数据集没有任何问题，所以从这个角度来看，我不明白为什么这会是一个问题。

如果你有一个真正巨大的base：64，那会导致问题，至少在渲染上是这样。 base：64 不是要以这种方式使用的，而是应该保存文件本身并像普通图像一样渲染它。

将其保存在数据库中后，您将不需要使用 base：64，如果您使用简单的img标记将其呈现为 url，您的问题应该会消失。

关于 base：64 的图片好读