uni-app 上传图片、预览图片

2019-11-02 admin

chooseimg.gif

<view class="setting-item">
    <text class="item-title" @click="preview">头像</text>
    <view class="item-right" @click="changeImg">
    <!-- userinfo.headimgurl是用户登陆的头像也就是未更改时的头像 changeimg是用户更改后的头像 -->
    <image class="headimgsize" :src="userinfo.headimgurl || changeimg" mode=""></image>
    <i class="iconfont">&#xe625;</i>
    </view>
</view>
data() {
    return {
        changeimg: '', // 更改后的头像
    }
},
// 获取vuex的数据
computed: mapState({
    userinfo: state => state.userinfo
}),
methods: {
    changeImg() {
        uni.chooseImage({
            success: (chooseImageRes) => {
                const tempFilePaths = chooseImageRes.tempFilePaths;
                this.changeimg = tempFilePaths[0] 
                uni.uploadFile({
                    url: app.apiUrl+'small/index/indexdata', //仅为示例,非真实的接口地址
                    filePath: tempFilePaths[0],
                    name: 'headimgurl',
                    formData: {
                        openid: uni.getStorageSync('openid')
                    },
                    success: (res) => {
                        console.log(JSON.parse(res.data))
                        var res = JSON.parse(res.data)
                        if (res.status) {
                            app.getUserData() //这里调用用户信息接口更新数据存进vuex
                            uni.showToast({
                                title:res.msg,
                                icon:'none',
                                duration:2000
                            })
                        }else {
                            uni.showToast({
                                title:res.msg,
                                icon:'none',
                                duration:2000
                            })
                        }
                    }
                });
            }
        });
    },
}

预览图片:我把点击事件放在“头像”,点击头像可预览图片,实际应用中是不会这么设计的哈

preview(){
    uni.previewImage({
        urls: [this.userinfo.headimgurl],//拿vuex中的头像地址
        longPressActions: {
            itemList: ['发送给朋友', '保存图片', '收藏'],
            success: function(data) {
                console.log('选中了第' + (data.tapIndex + 1) + '个按钮,第' + (data.index + 1) + '张图片');
            },
            fail: function(err) {
                console.log(err.errMsg);
            }
        }
    });
}

[转载]原文链接:https://segmentfault.com/a/1190000020888114

本站文章除注明转载外,均为本站原创或编译。欢迎任何形式的转载,但请务必注明出处。

转载请注明:文章转载自 JavaScript中文网 [https://www.javascriptcn.com]

本文地址:https://www.javascriptcn.com/read-78789.html

文章标题:uni-app 上传图片、预览图片

相关文章
HTML5渐行渐近 APP还能走多远
鎽樿�侊細浠讳綍浜嬬墿閮界洓鏋佽€岃“锛孉PP涔熶笉渚嬪�栥€傚湪鍙栧緱杈夌厡鎴愮哗鐨勫悓鏃讹紝APP涔熷悓鏍烽潰涓寸潃璇稿�氶毦浠ラ€捐秺鐨勯殰纰嶃€� 鍦ㄧ粡鍘嗕簡闀胯揪8骞寸殑闀胯窇鍚庯紝HTML5瑙勮寖缁堜簬鐡滅啛钂傝惤銆佹�e紡瀹...
2015-11-12
JS动态修改图片的URL(src)的方法
本文实例讲述了JS动态修改图片的URL(src)的方法。分享给大家供大家参考。具体如下: 下面的JS代码可以动态修改图片地址,以显示一张新的图片,实际上是通过修改图片的src属性来实现的 &lt;!DOCTYPE html&gt; &lt;...
2017-03-22
微信JSSDK上传图片
前不久微信公开了一些接口,其中有一个uploadImage接口用于上传图片,一般和chooseImage接口配合使用。先调用chooseImage接口让用户选择一张或者多张图片,用户选择完毕后微信会返回被选中图片的id,再把图片id传给up...
2017-03-29
Element el-upload上传组件详解
upload上传是前端开发很常用的一个功能,在Vue开发中常用的Element组件库也提供了非常好用的upload组件。 基本用法 代码: &lt;el-upload :action=&quot;uploadActionUrl&quot;&...
2018-03-18
最简单的JavaScript图片轮播代码(两种方法)
通过改变每个图片的opacity属性: 素材图片: 代码一: &lt;!DOCTYPE html&gt; &lt;html lang=&quot;en&quot;&gt; &lt;head&gt; &lt;meta cha...
2017-03-21
javascript异步文件上传(兼容IE8+)
在非html5的情况下是无法用ajax把文件推送到后端的,只能通过form表单提交。但是form表单提交后浏览器会根据响应头与状态码对当前页面进行渲染、下载或跳转等行为,返回text、html、json等类型的内容时浏览器会对当前页面进行渲...
2017-04-05
JavaScript中的call方法和apply方法使用对比
方法定义 call方法: 语法:call([thisObj[,arg1[, arg2[,   [,.argN]]]]]) 定义:调用一个对象的一个方法,以另一个对象替换当前对象。 说明: call 方法可以用来代替另一个对象调用一个方法。c...
2017-03-29
angular+ionic 的app上拉加载更新数据实现方法
第一步,首先需要在&lt;ion-content&gt;标签里面加入标签&lt;ion-infinite-scroll ng-if=&quot;hasmore&quot; on-infinite=&quot;loadMore()&quot;...
2017-03-07
如何优雅的使用vue+Dcloud(Hbuild)开发混合app
最近在做混合app,前端框架用的是vue,打包app使用的是Dcloud,不过在开发过程中有一点不爽的是,如果想使用Dcloud提供的plus这个环境变量,难倒每次都得使用npm run build先把vue打包,然后再用Hbuild打开...
2018-05-22
JS实现可直接显示网页代码运行效果的HTML代码预览功能实例
本文实例讲述了JS实现可直接显示网页代码运行效果的HTML代码预览功能。分享给大家供大家参考。具体如下: JavaScript实现HTML代码预览功能,直接在网页上显示代码运行的效果,就例如点击“运行代码”后的效果,使用时,你只需将需要运行...
2017-03-27
回到顶部