首页 > 其他分享 >vue 选择图片或者拍照上传,数据在外层取不到/拿不到解决。

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

时间:2023-05-04 19:58:07浏览次数:49  
标签:vue type image 不到 file reader var 上传

<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


标签:vue,type,image,不到,file,reader,var,上传
From: https://www.cnblogs.com/jiduoduo/p/17372317.html

相关文章

  • vue-esign 学习笔记
    1注意事项最新版是1.1.4,我们项目组用的是1.1.0。从npmjs可以看出,两个版本中间的版本都是不可用的,下载量为0.除此之外还可以参考的类似工具:https://www.npmjs.com/package/vue-esignaturevue-esignaturehttps://www.npmjs.com/package/vue3-esignvue3-esign2链接地址http......
  • Vue3 h函数渲染组件
    1、渲染ElSelect组件constmodulleFilters=ref([{label:1,value:2},{label:2,value:3},]);constsearch=ref('');consttableColumn=[{prop:'module',label:'模块',headerRender:()=>h(......
  • powershell实现http上传文件
    服务端代码#监听IP地址和端口$ip="127.0.0.1"$port=8080#设置上传目录$uploadDir="D:\uploads"#创建HttpListener对象并启动监听$listener=New-ObjectSystem.Net.HttpListener$listener.Prefixes.Add("http://$ip`:$port/")$listener.Start()......
  • vue el-input中点击符号,文本框中显示符号
    需求点击+|()符号,页面中光标位置,展示对应的符号点击完,光标留在原位 代码<el-form-itemprop="kwspec"label='监测关键词'><el-inputtype="textarea"placeholder="请输入监测关键词"ref="inputRef"@blur="inputBlur"v-model=&q......
  • CentOS 下修改 WordPress 文件上传大小限制
    CentOS下可以通过修改php.ini来设置WordPress 文件上传大小限制。默认的php.ini文件是在/etc下。(对应的包:php-common)修改下面的几个参数:upload_max_filesize=64Mpost_max_size=64Mmax_execution_time=300修改后重启httpd。$servicehttpdrestart这样上传文......
  • Vue.js 教程:如何使用 Mock.js 进行前端开发
    Mock.js 是常用的生成随机数据,拦截Ajax请求的JavaScript库。在软件开发的初期,后端API接口可能还没有实现或者还没有完全实现。在这种情况下,用Mock.js可以模拟后端API供前端开发人员调用,从而避免等待后端API的完成。要在Vue项目中使用Mock.js有两个思路:在客户端拦......
  • vue中scoped 在文件引入中的作用
    首先搞清楚scoped是干啥的?scoped的引入主要是上线了样式的模块化私有化,即当前组件的样式只对当前组件起作用。当vue组件被vue-loader解析的时候,对于style上加了scope属性的组件,会主动加上data-v-xx的属性来唯一标识当前组件,若当钱组件内部存在子组件,只有子组件的最外层会加上唯一......
  • vue this.$router.push 页面传值问题
    在修改一个别人的bug的时候发现一个问题,记录一下,vue前端页面在刷新页面后只读页面可以编辑了在前一个传值页面他的写法是this.$router.push({name:'xxx',query:{isEdit:false}});在接收的时候写的是this.isEdit=this......
  • Vue3数据无法显示/数据无法修改
    问题描述:昨天朋友问了我一个关于Vue3的问题,给他解答后,想起貌似自己当初也曾被这个问题困惑过,只不过被善用搜索引擎后找到了问题所在。现在考虑到可能有些朋友搜不到解决方法,所以现在用它的表现形式作为标题,可能更便于搜索到。现在重现一下这个问题:<divv-for="(item,idx)inl......
  • github修改好代码后上传已有仓库
    github修改好代码后上传已有仓库在GitHub上修改代码并将其推送到已有仓库的步骤如下:确保您的本地代码与GitHub仓库中的代码是同步的。您可以使用gitpull命令从远程仓库中获取最新代码并将其合并到您的本地代码中。如果您在本地进行了修改,请确保将其推送到远程仓库之前进行提交......