vue 选择图片或者拍照上传,数据在外层取不到/拿不到解决。

<input type="file" accept="image/*" capture="camera" @change="onImageChange" class="inputClass"/>
// 调用
        async onImageChange(e) {this.capImg = await this.onImageChange(e)
            console.log(this.capImg);
        },
onImageChange(file) {
            return new Promise((resolve, reject) => {
                var self = this;
                var file = file.target.files[0];
                console.log(file)
                var type = file.type.split('/')[0];
                if(type === 'image') {
                    //将图片转化为base64
                    var reader = new FileReader();
                    reader.readAsDataURL(file); // readAsDataURL方法可以将上传的图片格式转为base64,然后在存入到图片路径,
                    reader.onload = function () {
                        var image = reader.result;  // image即base64格式,后面调用后端请求传入image
                        resolve(image);
                    }
                } else{
                    self.$toast.showToast('请正确上传图片');
                    reject('');
                }
            });
            
        },

注意:黑的部分:resolve(image); 这样就可以拿到了。否则是外面取不到值的。


一般retrun promise 都需要 async await 等待他完成

参考:https://www.cnblogs.com/hjk1124/p/15084149.html


posted @ 2023-05-04 19:42  jiduoduo  阅读(159)  评论(0编辑  收藏  举报