如何使用meteor将图像上载到服务器？

我的申请页面上有一个徽标

应用程序管理员应该能够通过上传一个新的徽标来调整webapplication中的徽标。实现这一目标的最佳实践是什么

我将如何处理服务器上的上载。它应该用新标识替换旧标识。名称和位置应保持不变

我的做法如下：

我用这个包裹

我的代码：

上传

*.js服务器和客户端

//Almost Standard initialization - works so far
Logo = new Mongo.Collection('logo');

LogoStore = new UploadFS.store.Local({
    collection: Logo,
    name: 'logo',
    path: '/uploads/logo',
    mode: '0744', // directory permissions
    writeMode: '0744', // file permissions
    filter: new UploadFS.Filter({
        minSize: 1,
        maxSize: 1024 * 1000, // 1MB,
        contentTypes: ['image/*'],
        extensions: ['png']
    })
 });

*.html

//Standard initialization - works so far
<template name="upload">
    <button type="button" name="upload">Select files</button>
</template>

<template name="whatever">
<img src="{{logoUrl}}" alt="Logo" >
</template>

显示上传的徽标

*.html

//Standard initialization - works so far
<template name="upload">
    <button type="button" name="upload">Select files</button>
</template>

<template name="whatever">
<img src="{{logoUrl}}" alt="Logo" >
</template>

因此，如果我理解正确，代码所做的就是将img上传到服务器上的某个地方。它还将有关该图像的一些信息存储在Mongo.Collection-Logo中

但我不知道这些图像存储在哪里，在哪个文件夹中。它们不存储在我的默认项目文件夹中。 示例img的url为：。中间的随机字符串是IMG的子ID。所以我不能用硬编码的url来访问这些图片，因为一旦上传了一个新的img，那个url就会完全改变

第一个问题是：我可以直接上传到myProject/public/img文件夹吗？因此，img的url类似于： 然后我只需要更换上传上的旧徽标

现在我必须处理通用url。因此，接下来，我从Logo-collection中选择服务器上当前图像的url，并将该url传递到模板中必须放置Logo的位置。问题是，url是在加载其他所有内容之后加载的，因此在几秒钟内，我得到了一个没有url的标记。因此，该位置仅在加载url之前显示alt文本。那太难看了

问题2：在加载标记之前，我如何获取url。这样logo就会出现在其他内容之前，就好像url是预先硬编码的一样

问题3：是否可以在上传页面上用新上传的徽标替换旧徽标？怎么做

---

问题4：如果我从Logo-Collection中删除img的条目，那么该图像实际上是从服务器中删除的吗？或者我必须手动/以其他方式删除它吗？

您可以在服务器上发送base64编码图像，然后使用fs覆盖该文件。 比如：

客户端

readAsDataURL具有格式为的base64编码数据

数据：图像/jpeg；base64，/9j/4AAQSkZJRgABA

因此，您需要去掉前面的mime类型和编码信息

contents = contents.split(',')[1];

现在您可以将此base64编码数据发送到服务器

服务器

由于您正在接收base64编码数据，因此可以将其转换为缓冲区并写入文件：

fs.writeFile(filepath, Buffer(argument,'base64'), err => {
  //
})

---

如果文件名与另一个文件相同，则它将完全覆盖您的文件。

您可以在服务器上发送base64编码图像，然后使用fs覆盖该文件。 比如：

客户端

readAsDataURL具有格式为的base64编码数据

数据：图像/jpeg；base64，/9j/4AAQSkZJRgABA

因此，您需要去掉前面的mime类型和编码信息

contents = contents.split(',')[1];

现在您可以将此base64编码数据发送到服务器

服务器

由于您正在接收base64编码数据，因此可以将其转换为缓冲区并写入文件：

fs.writeFile(filepath, Buffer(argument,'base64'), err => {
  //
})

如果文件名与另一个文件相同，则它将完全覆盖您的文件。

回答问题1： 默认图像将存储在项目的隐藏文件夹中。meteor/local/build/programs/server/ufs/uploads/

您可以通过“路径”更改目的地，如下代码所示

new UploadFS.store.Local({
  collection: Csvs.collection,
  name: 'csv',
  path: '../../../../../uploads/csv', //here change destination folder stored file
  filter: new UploadFS.Filter({
    maxSize: 1024 * 3000, // 3MB,
    contentTypes: ['text/csv']
  })
});

对问题1的答复： 默认图像将存储在项目的隐藏文件夹中。meteor/local/build/programs/server/ufs/uploads/

您可以通过“路径”更改目的地，如下代码所示

new UploadFS.store.Local({
  collection: Csvs.collection,
  name: 'csv',
  path: '../../../../../uploads/csv', //here change destination folder stored file
  filter: new UploadFS.Filter({
    maxSize: 1024 * 3000, // 3MB,
    contentTypes: ['text/csv']
  })
});

---

在Pankaj Javav的回答中执行“客户机”步骤时，您可能希望使用我编写的包，因为我遇到了相同的问题。它简化了将任何base64字符串上载到服务器的过程，并且您不需要以这种方式摆脱MIME类型。

在Pankaj Javav的回答中执行“客户端”步骤时，您可能希望使用我编写的包，因为我遇到了相同的问题。它简化了将任何base64字符串上载到服务器的过程，并且您不需要以这种方式摆脱MIME类型。

另一个问题是有关上载到第三方的多个图像的问题。我想把一张图片上传到我的服务器上，最好是上传到公用文件夹。这个问题大约每周有一次以不同的方式被问到。此外，您本质上只是请求代码，而不是对现有代码的帮助。形式为“我将如何做X？”的问题不适合Stackoverflow。新的Stackoverflow文档页面非常适合这样做，但仍在填充中。因此，如果现有的答案都不适用于你，那么展示你所做的尝试，我们将尽力帮助你。感谢你用我的问题向我解释这个问题。我已经添加了我自己的方法，并解释了我目前使用该方法所面临的问题。另一个问题是关于上传到第三方的几个图像。我想把一张图片上传到我的服务器上，最好是上传到公用文件夹。这个问题大约每周有一次以不同的方式被问到。此外，您本质上只是请求代码，而不是对现有代码的帮助。形式为“我将如何做X？”的问题不适合Stackoverflow。新的Stackoverflow文档页面非常适合这样做，但仍在填充中。因此，如果现有的答案都不适用于你，那么展示你所做的尝试，我们将尽力帮助你。感谢你用我的问题向我解释这个问题。我已经添加了我自己的方法，并解释了我目前使用该方法所面临的问题。谢谢，但我无法在我的项目中运行fs.writeFile，因此我不得不