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 @   jiduoduo  阅读(163)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· 无需6万激活码!GitHub神秘组织3小时极速复刻Manus,手把手教你使用OpenManus搭建本
· C#/.NET/.NET Core优秀项目和框架2025年2月简报
· Manus爆火,是硬核还是营销?
· 终于写完轮子一部分:tcp代理 了,记录一下
· 【杭电多校比赛记录】2025“钉耙编程”中国大学生算法设计春季联赛(1)
历史上的今天:
2021-05-04 Error creating document instance. Cause: org.xml.sax.SAXParseException; lineNumber: 1; columnNumber
点击右上角即可分享
微信分享提示