Question

我的应用程序页面上有一个徽标。

应用程序管理员应该能够通过简单地上传新的徽标来调整web应用程序中的徽标。实现这一目标的最佳做法是什么？

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

这是我的方法：

jalik:ufs
jalik:ufs-local
autopublish //it is still on, so the code below works without publish/subscribe I know that I will have to change that.

我的代码：

上传

*。js Server＆amp;客户

//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>

*。js客户端

//Almost Standard initialization - works so far
Template.upload.events({
    'click button[name=upload]': function (ev) {
        var self = this;

        UploadFS.selectFiles(function (file) {
            // Prepare the file to insert in database, note that we don't provide an URL,
            // it will be set automatically by the uploader when file transfer is complete.
            var logo = {
                name: 'logo.png', //all uploaded images will have the same name
                size: file.size,
                type: file.type,
                            };

            // Create a new Uploader for this file
            var uploader = new UploadFS.Uploader({
                // This is where the uploader will save the file
                store: LogoStore,
                // Optimize speed transfer by increasing/decreasing chunk size automatically
                adaptive: true,
                // Define the upload capacity (if upload speed is 1MB/s, then it will try to maintain upload at 80%, so 800KB/s)
                // (used only if adaptive = true)
                capacity: 0.8, // 80%
                // The size of each chunk sent to the server
                chunkSize: 8 * 1024, // 8k
                // The max chunk size (used only if adaptive = true)
                maxChunkSize: 128 * 1024, // 128k
                // This tells how many tries to do if an error occurs during upload
                maxTries: 5,
                // The File/Blob object containing the data
                data: file,
                // The document to save in the collection
                file: logo,
                // The error callback
                onError: function (err) {
                    console.error(err);
                },
                onAbort: function (file) {
                    console.log(file.name + ' upload has been aborted');
                },
                onComplete: function (file) {
                    console.log(file.name + ' has been uploaded');
                },
                onCreate: function (file) {
                    console.log(file.name + ' has been created with ID ' + file._id);
                },
                onProgress: function (file, progress) {
                    console.log(file.name + ' ' + (progress*100) + '% uploaded');
                },
                onStart: function (file) {
                    console.log(file.name + ' started');
                },
                onStop: function (file) {
                    console.log(file.name + ' stopped');
                }
            });

            // Starts the upload
            uploader.start();

            // Stops the upload
            uploader.stop();

            // Abort the upload
            uploader.abort();
        });
    }
});

显示已上传的徽标

*。HTML

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

*。仅限js客户端

Template.whatever.helpers({
    logoUrl: function(){
       return Logo.findOne().url;
    }

})

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

但我不知道这些图像存储在哪个文件夹中。它们不存储在我的默认项目 - 文件夹中。示例img的url是：http://localhost:3000/ufs/logo/B4Fv5etkr7xQbvs5v/logo.png。中间的随机字符串是该img的_id。所以我不能使用硬编码的URL来访问它们，因为一旦上传了新的img，该url就会完全改变。

Q1：所以第一个问题是：我可以直接上传到myProject / public / img文件夹吗？所以img的url会是这样的： http://localhost:3000/img/logo.png 然后我只需要替换上传中的旧徽标。

现在我必须处理通用网址。接下来，我从徽标 - 集合中选择服务器上现在图像的网址，并将该网址传递到我的模板到必须放置徽标的位置。问题是，在加载其他所有内容后加载了url，因此在几秒钟内我得到一个没有url的标记。因此，该地点仅显示替代文本，直到加载网址为止。那太难看了......

Q2：问题是，如何在加载标记之前获取网址。因此，徽标会显示在/之前的所有其他内容，就好像该网址会提前硬编码一样。

问题3：在上传时，是否可以用新上传的徽标替换旧徽标？怎么样？

问题4：如果我从徽标 - 收藏中删除了img的条目，是否实际从服务器中删除了图像？或者我是否必须以其他方式手动删除它？

Answer 1

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

<强>客户端

readAsDataURL具有格式为

的base64编码数据

数据：图像/ JPEG; BASE64，/ 9J / 4AAQSkZJRgABA ...

所以你需要摆脱前面的mime类型和编码信息。

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

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

服务器

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

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

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

Answer 2

回答问题1：默认图像将存储在项目中的hide文件夹.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']
  })
});

Answer 3

做＆＃34;客户＆＃34;在Pankaj Javav的回答中，您可能想要使用我提出的base64-image-upload包，因为我遇到了同样的问题。它简化了将任何base64字符串上传到服务器的过程，并且您不需要以这种方式删除MIME类型。

如何使用meteor将图像上传到我的服务器？

3 个答案: