Question

我在提交表单时上传了多个文件。

这是图片上传输入（html）：

    <form class="form-inline" id="cost-estimate-form">
        <div class="form-field-short col s12 m6">
            <i class="material-icons prefix">insert_photo</i>
            <label for="input-file">Upload photos</label>
            <input id="input-file" type="file" name="images" accept="image/jpeg, image/png, application/pdf" multiple/> <!-- todo: ugly on safari -->
        </div>
<!-- rest-->
        <button class="btn waves-effect col s6 m3 offset-m6" type="submit" name="action">Submit
            <i class="material-icons right">send</i>
        </button>

和.js

'submit #cost-estimate-form': function(event, tmpl){
    event.preventDefault();

    let files;
    if(event.target.images) {
        files = event.target.images.files;
    }
    Meteor.call('travelRequests.insert', tmpl.data, function(err, trId) {
        if (err) {
            alertError(err.message);
        }
        else {
            if (files) {
                var imageDetails = [];
                for (var i = 0, j = 0, ln = files.length; i < ln; i++) {
                    Image.insert(files[i], function (err, fileObj) {
                        if (err) {
                            console.log('Error uploading image: ');
                            console.log(err);
                        } else {
                            console.log('[DB] insert image(id=' + fileObj._id);
                            j++;
                            let imagePath = '/uploads/images-' + fileObj._id + '-' + fileObj.name();
                            imageDetails.push({id: fileObj._id, name: fileObj.name(), path: imagePath});
                            if (j === ln) {  // when last file is successful
                                Meteor.call('travel.addImages', trId, imageDetails,
                                    function (err, _) {
                                        if (err) alertError(err.reason);
                                    });
                                console.log('travel.addImages');
                            }
                        }
                    });
                }
            }
        }
    });

    Router.go('travel_requests_list');

Meteor.call('travelRequests.insert'...创建一个实体。然后，我尝试使用Meteor.call('travel.addImages',...上传文件后更新为该实体上传的图片。

但是，当单击表单上的“提交”按钮时，下一个屏幕会多次刷新，并且我在客户端出错：

cfs_power-queue.js:525 Error: "Queue" network [undefined], Error
at cfs_upload-http.js:382
at cfs_upload-http.js:108
at underscore.js:794
at XMLHttpRequest.xhr.onreadystatechange (cfs_upload-http.js:167)

在mongodb中，有些文件是完全上传的，有些则不是：

示例完整文件：

{
    "_id" : "MEWTZaXLX9gvx5utc",
    "original" : {
        "name" : "IMG_3867.JPG",
        "updatedAt" : ISODate("2017-07-19T02:57:55Z"),
        "size" : 4231984,
        "type" : "image/jpeg"
    },
    "uploadedAt" : ISODate("2017-09-15T02:30:40.204Z"),
    "copies" : {
        "images" : {
            "name" : "IMG_3867.JPG",
            "type" : "image/jpeg",
            "size" : 4231984,
            "key" : "images-MEWTZaXLX9gvx5utc-IMG_3867.JPG",
            "updatedAt" : ISODate("2017-09-15T02:30:40Z"),
            "createdAt" : ISODate("2017-09-15T02:30:40Z")
        }
    }
}

示例不完整的文件：

{
    "_id" : "cgHcSCRPvzgekW6Ai",
    "original" : {
        "name" : "IMG_3869.JPG",
        "updatedAt" : ISODate("2017-07-19T02:58:10Z"),
        "size" : 4108047,
        "type" : "image/jpeg"
    },
    "chunkSize" : 2097152,
    "chunkCount" : 1,
    "chunkSum" : 2
}

收藏定义：

Image = new FS.Collection("images", {
    /* the file director: .meteor/local/uploads */
    stores:[new FS.Store.FileSystem("images",{path:Meteor.settings.uploadRoot+"/uploads"})],
    filter: {
        allow: {
            contentTypes: ['image/*', 'application/pdf'] //allow only images and pdf in this FS.Collection
        }
    }
});

if(Meteor.isServer){
    Image.allow({
        'insert': function () {
            return true;
        },
        'update': function () {
            return true;
        },
        'download':function(){
            return true;
        }
    });
}

为什么会这样？在路由到下一个屏幕之前，我应该等待文件上传完成吗？如果这是问题，我该怎么做？

我是流星的新手，所以感谢任何帮助。

Answer 1

由于您没有使用kadira的FlowRouter，我可能不是回答有关重定向问题的合适人选，因为路由器机制可以在路由中保存数据，这非常糟糕。根据最新的Meteor约定，订阅必须是模板级实现。

但是，我可以告诉你，你可以等待完成图片上传。成功上传图像后，您可以执行下一个操作，可以重定向到下一页或任何其他操作。

以下是等待完成图片上传的代码。基本思路是图像的url仅在图像完全上传时生成。所以我们等待url生成，一旦收到url，就意味着我们已经完成了。

var myImage = event.target.images.files[0];
if(myImage){
    var myFile = new FS.File(myImage);
    Images.insert(myFile, function(err, result){
      if(!err){
        var liveQuery = Images.find(result._id).observe({
        changed: function(newImage, oldImage) {
          if (newImage.url() != null) {
            liveQuery.stop();
            // Here the image is uploaded successfully.
          }
        }
        });
      } else {
        //console.log(err);
      }
    });
}

某些文件的上传失败，客户端多次刷新（CFS）

1 个答案: