解析JS：错误：尝试编码未保存的文件

Question

当我尝试同时上传两个调用相同控制器进行提交的文件时，会发生此错误。以下是相关代码：

<ion-list id="licenseDetailsInReview-list4" class=" ">
            <ion-item class="item-divider " id="licenseDetails-list-item-divider5">Image 1
                <div ng-if="doc.status!='approved'" class="edit">
                    <div class="button button-clear button-small has-file button-black " type="button">
                        <span style="color:black" class="image1"><i class="icon ion-edit icon-accessory custom"></i></span>
                        <input type="file" accept="image/*;capture=camera" name="{{doctype.doctype.documentType}}" onchange="angular.element(this).scope().$parent.uplCtrl.fileChanged(this.files, this,1)">
                    </div>
                </div>

            </ion-item>
            <div class="thumbimg">
                <span class="imgdet1"><div ng-if ="doc.thumb1"><a href="{{doc.image1.url}}"><img src="{{doc.thumb1.url}}"></a></div>
                <div ng-if="!doc.thumb1"><i class="icon ion-image" style="font-size: 64px; color: rgb(136, 136, 136); vertical-align: middle;"></i></div>
            </div>
        </ion-list>

        <ion-list id="licenseDetailsInReview-list4" class=" ">
            <ion-item class="item-divider " id="licenseDetails-list-item-divider5">Image 2
                <div ng-if="doc.status!='approved'" class="edit">
                    <div class="button button-clear button-small has-file button-black edit" type="button">
                        <span style="color:black" class="image2"><i class="icon ion-edit icon-accessory custom"></i></span>
                        <input type="file" accept="image/*;capture=camera" name="{{doctype.doctype.documentType}}" onchange="angular.element(this).scope().$parent.uplCtrl.fileChanged(this.files, this,2)">
                    </div>
                </div>
            </ion-item>
            <div class="thumbimg">
                <span class="imgdet2"><div ng-if ="doc.thumb2"><a href="{{doc.image2.url}}"><img src="{{doc.thumb2.url}}"></a></div>
                <div ng-if="!doc.thumb2"><i class="icon ion-image" style="font-size: 64px; color: rgb(136, 136, 136); vertical-align: middle;"></i></div>
            </div>
        </ion-list>

控制器方法：

fileChanged(files, type, i) {
    const self = this;
    const file = files[0];
    console.log(type.name, files);
    window.URL = window.URL || window.webkitURL;
    self['files'] = self['files'] || {};
    self['files'][type.name] = {
        file: file,
        blob: window.URL.createObjectURL(file)
    };

    var typeHolder = document.querySelector('.image' + i).innerHTML = "Uploading File.." + file.name;        
        this.$scope.$apply();
        this.submit(self.$scope.user, i)
}

提交方法：

submit(user, i) {
        console.log('user', user);
        const self = this;
        //var UserDocument = Parse.Object.extend('UserDocument');
        this.$scope.mutex =0;
        var promises = [];

        for (self.$scope.doctype.documentType in this.files) {
            console.log("Files", this.files)

            if (this.files.hasOwnProperty(self.$scope.doctype.documentType)) {

                var parseFile = new Parse.File(self.$scope.doctype.documentType + i +'.' + this.files[self.$scope.doctype.documentType].file.name.split('.').pop(), this.files[self.$scope.doctype.documentType].file);


                if (!self.$scope.doc) {
                    var objUserDocType = new this.UserDocumentType();
                    console.log("reached here");
                    var docType = self.$scope.usd.find(o => o.documentType == self.$scope.doctype.documentType);
                    objUserDocType.id = docType.objectId;

                    this.objUserDoc.set('docType', objUserDocType);
                }
                // console.log("reached here too!");
                this.objUserDoc.set('owner', Parse.User.current());
                //objUserDoc.set('status', 'inReview');
                this.objUserDoc.set('image' + i, parseFile);
                self.$scope.submitted = 1;

                var p = this.objUserDoc.save().....

因此，当我尝试在另一个图像保存之前上传一个图像时，我收到错误：

upload.controller.js:110 error objUserDoc Error: Tried to encode an unsaved file.
    at encode (http://localhost:3000/app-1db45d.js:92569:14)
    at ParseObjectSubclass._getSaveJSON (http://localhost:3000/app-1db45d.js:88168:40)
    at ParseObjectSubclass._getSaveParams (http://localhost:3000/app-1db45d.js:88176:24)
    at task (http://localhost:3000/app-1db45d.js:89758:34)
    at TaskQueue.enqueue (http://localhost:3000/app-1db45d.js:94528:10)
    at Object.save (http://localhost:3000/app-1db45d.js:89768:31)
    at ParsePromise.wrappedResolvedCallback (http://localhost:3000/app-1db45d.js:90767:44)
    at ParsePromise.resolve (http://localhost:3000/app-1db45d.js:90705:37)
    at ParsePromise.<anonymous> (http://localhost:3000/app-1db45d.js:90777:30)
    at ParsePromise.wrappedResolvedCallback (http://localhost:3000/app-1db45d.js:90767:44)

我该怎么做才能解决这个问题？

提前致谢

Answer 1

需要两个关键想法：（a）我们必须保存文件，然后保存引用对象，（b）进行N个文件对象保存，首先累积保存承诺，然后使用Promise.all（）执行所有这些操作。

我尝试重新安排您的代码来说明，但是有一个重要的警告：我不了解应用程序，也无法看到控制器围绕这一切，所以代码必须仔细检查这里，以确保它正确引用控制器级对象，包括$ scope。

// save a parse file, then the parse object that refers to it
function saveUserDocWithFile(objUserDoc, doctype) {
    var parseFile = new Parse.File(doctype.documentType + i +'.' + this.files[doctype.documentType].file.name.split('.').pop(), this.files[doctype.documentType].file);

    // first save the file, then update and save containing object
    this.$scope.submitted = 1;
    return parseFile.save().then(function() {    
       objUserDoc.set('image' + i, parseFile);
       return objUserDoc.save();
    });
}

这样，submit功能更简单。它只需要创建一个promises数组并执行它们（使用Promise.all()）。

submit(user, i) {
    console.log('user', user);
    const self = this;
    //var UserDocument = Parse.Object.extend('UserDocument');
    self.$scope.mutex =0;
    var promises = [];

    for (self.$scope.doctype.documentType in self.files) {
        console.log("Files", self.files)

        if (self.files.hasOwnProperty(self.$scope.doctype.documentType)) {
            if (!self.$scope.doc) {
                self.objUserDoc.set('docType', objUserDocType());
            }
            self.objUserDoc.set('owner', Parse.User.current());
            var promise = saveUserDocWithFile(self.objUserDoc, self.$scope.doctype);
            promises.push(promise);
        }
    }
    return Promise.all(promises);
}

// factor out objUserDocType creation for readability
function objUserDocType() {
    var objUserDocType = new this.UserDocumentType();
    var docType = this.$scope.usd.find(o => o.documentType == this.$scope.doctype.documentType);
    objUserDocType.id = docType.objectId;
    return objUserDocType;
}