Question

在我的项目中，我正在尝试上传图像，将其作为dataURL读取并将其存储到我的数据库中。

我的HTML ng-click调用这些方法，使用true或false作为参数（一个是身体图像，另一个是个人资料图像）

根据是调用true还是false，它会更改事件的id。

出于某种原因，当它的“真实”一切都完美无缺。用户可以选择图像，将其正确发送到数据库，并正确加载图像。

然而，当调用“false”时，我收到错误：

[$ rootScope：inprog] $申请已在进行中

然后调用console.log（）测试“2222”。

HTML

<img src="{{controller.myCause.causeImage}}" ng-click="controller.uploadImage('true')" alt="Your Image Here" class="cause-img" id="profileImage" style="width: 80%; height: 35%;" height="300" />
<input id="imageUpload" type='file'>

<img src="{{controller.myCause.causeThumbnailImage}}" ng-click="controller.uploadImage('false')" alt="Your Thumbnail Here" id="profileImageThumb" class="cause-img" style="width: 80%; height: 20%;" height="200" />
<input id="profileImageUpload" type='file'>

客户端

/////////////////////////////////////
//Begin Uploading Cause Profile Image
public uploadImage(bool) {
    if (bool === "true") {
        $("#imageUpload").click();
        this.imgUpload(bool);
    } else {
        $("#profileImageThumb").click();
        this.imgUpload(bool);
    }
}

public imgUpload(bool) {
    console.log(bool);
    var _this = this;
    var id = "";
    var imgId = "";

    if (bool === "true") {
        id = "#imageUpload";
        imgId = "#profileImage";
    } else {
        id = "#profileImageUpload";
        imgId = "#profileImageThumb";
    }

    console.log("111");

    $(id).change(function () {
        console.log("2222");
        if (this.files && this.files[0]) {
            var reader = new FileReader();
            reader.readAsDataURL(this.files[0]);
            $(imgId).attr('src', this.files[0]);
            _this.convertFileToBase64AndSet(this.files, bool);
        }  
    });

};

convertFileToBase64AndSet(fileList: FileList, bool) {
    var self = this;
    if (fileList.length > 0) {
        var reader = new FileReader();

        reader.onloadend = (e: Event) => {
            self.postProfileImage(reader.result, bool);
        }
        reader.readAsDataURL(fileList[0]);
    }
}

public postProfileImage(file, bool) {

    if (bool === "true") {
        this.$http.put(`api/causes/profpic`, JSON.stringify(file)).then((res) => {
            this.$state.reload();
        });
    } else {
        this.$http.put(`api/causes/thumbpic`, JSON.stringify(file)).then((res) => {
            this.$state.reload();
        });
    }
}
//End Cause Profile Image Upload
////////////////////////////////

Answer 1

您的点击事件正在运行与当前摘要周期冲突的摘要周期。

您可以使用setTimeout()

你能试试吗

public uploadImage(bool) {
    if (bool === "true") {
        setTimeout(function({$("#imageUpload").click();})            
        this.imgUpload(bool);
    } else {            
        setTimeout(function({$("#profileImageThumb").click();})
        this.imgUpload(bool);
    }
}

Answer 2

与@ hasan的回答相似，我得到了这个。

public uploadImage(bool) {
    var self = this;
    var id = "";
    if (bool === "true") {
        id = "#imageUpload";
    } else {
        id = "#profileImageUpload";
    }
    setTimeout( () => {
        $(id).click();
        self.imgUpload(bool);
    });
}

谢谢哈桑指出我正确的方向。 setTimeout确实有效！

$ rootScope：inprog $ apply已在进行中.change事件错误

2 个答案: