javascript - 解析JS : Error: Tried to encode an unsaved file

Question

当我尝试同时上传两个调用同一 Controller 进行提交的文件时，会发生此错误。相关代码如下:

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

以及 Controller 方法:

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 ，然后使用 Promise.all() 执行所有这些。

我尝试重新排列您的代码来进行说明，但有一个重要警告:我不理解该应用程序，也看不到围绕所有这些的 Controller ，因此此处的代码必须仔细检查以确保它正确引用 Controller 级别对象，包括 $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 函数就更简单了。它只需要创建一个 Promise 数组并执行它们(使用 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;
}