微信小程序 实现上传图片并可以预览图片

    xiaoxiao2022-07-14  141

    我的qq 2038373094

    我做的是微信小程序、网站、手机app,后端java+前端vue、bootstrap框架、原生的html+css+js都会

    做过律师在线咨询系统、共享农场手机app、在线心理咨询系统

     

    废话不多说,直接上效果图

    wxml文件代码

    <view> <button style="margin:30rpx;" bindtap="chooseimage">获取图片</button> <image src="{{tempFilePaths}}" style="width:450rpx; height: 450rpx" /> </view>

    wxss文件代码

    js代码

    'use strict'; //index.js //获取应用实例 var app = getApp(); Page({ data: { tempFilePaths: '' }, onLoad: function onLoad() {}, chooseimage: function chooseimage() { var _this = this; wx.chooseImage({ count: 1, // 默认9 sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图,默认二者都有 sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机,默认二者都有 success: function success(res) { wx.showToast({ title: '正在上传...', icon: 'loading', mask: true, duration: 1000 }); // 返回选定照片的本地文件路径列表,tempFilePath可以作为img标签的src属性显示图片 _this.setData({ tempFilePaths: res.tempFilePaths }); console.log(res.tempFilePaths); } }); } });

     

     

     

    最新回复(0)