微信小程序 图片上传实例详解

一.了解wx.chooseImage(OBJECT)

二.代码编程

在pages文件里面创建uploadimg文件夹

1.编写页面结构:uploadimg.wxml

<view class="container" style="padding:1rem;">
<button type="primary"bindtap="chooseimage">获取图片</button>
<image src="{{tempFilePaths }}" mode="aspecFill" style="width: 100%; height: 450rpx;margin:1rem 0;"/>
</view>

2.设置数据:uploadimg.js

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

感谢阅读，希望能帮助到大家，谢谢大家对本站的支持！

您可能感兴趣的文章:

• 微信小程序实现图片上传、删除和预览功能的方法
• 微信小程序多张图片上传功能
• 微信小程序开发之从相册获取图片 使用相机拍照 本地图片上传
• 微信小程序开发（二）图片上传+服务端接收详解
• 微信小程序教程之本地图片上传(leancloud)实例详解
• 微信小程序 解决请求服务器手机预览请求不到数据的方法
• 微信小程序实现图片放大预览功能
• 微信小程序选择图片和放大预览图片功能
• 微信小程序wx.previewImage预览图片实例详解
• 微信小程序实现图片上传放大预览删除代码