微信小程序上传图片wx.chooseImage和wx.uploadFile
2018-01-18 10:30
781 查看
wxml:
<view class="container"> <view class='photo-wrap'> <view class='photo-image-wrap photo-image-wrap1'> <image src='/images/photo2.png' bindtap='getImage'></image> <text>相册</text> </view> <view class='photo-image-wrap photo-image-wrap2'> <image src='/images/photo1.png' bindtap='takePhoto'></image> <text>拍摄</text> </view> <navigator url='/pages/index/index'> <image src='/images/close1.png' class='close'></image> </navigator> </view> </view>
wxss:
/**index.wxss**/ .container{ width: 750rpx; height: 100%; position: relative; } .photo-wrap{ width: 750rpx; height: 420rpx; text-align: center; position: fixed; bottom: 0rpx; } .photo-image-wrap{ width: 196rpx; height: 260rpx; } .photo-image-wrap image{ width: 190rpx; height: 190rpx; } .photo-image-wrap text{ font-size: 17px; color: #000000; letter-spacing: -0.41px; } .photo-image-wrap1{ position: absolute; left: 120rpx; bottom: 220rpx; } .photo-image-wrap2{ position: absolute; right: 120rpx; bottom: 220rpx; } .close{ width: 56rpx; height: 56rpx; position: absolute; left: 50%; margin-left: -28rpx; bottom: 20rpx; }
js:
getImage: function () { wx.chooseImage({ count: 1, // 默认9 sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图,默认二者都有 sourceType: ['album'], // 可以指定来源是相册还是相机,默认二者都有 success: function (res) { // 返回选定照片的本地文件路径列表,tempFilePath可以作为img标签的src属性显示图片 var tempFilePaths = res.tempFilePaths wx.uploadFile({ url: app.globalData.URL +'/uploadMaterial', filePath: res.tempFilePaths[0], name: 'file', formData: { 'token': app.globalData.token,//一个签名认证,本项目的需要,其他项目不一定要 }, header: { "Content-Type": "multipart/form-data" }, success: function (result) { var resultData = JSON.parse(result.data) console.log(resultData.data.url); }, fail: function (e) { console.log(e); } }) } }) }, takePhoto: bd8c function () { wx.chooseImage({ count: 1, // 默认9 sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图,默认二者都有 sourceType: ['camera'], // 可以指定来源是相册还是相机,默认二者都有 success: function (res) { // 返回选定照片的本地文件路径列表,tempFilePath可以作为img标签的src属性显示图片 var tempFilePaths = res.tempFilePaths } }) },
相关文章推荐
- 微信小程序填坑:上传头像;wx.chooseImage,wx.uploadFile
- PHP--解决微信小程序上传图片(wx.uploadFile)接口代码
- 微信图像接口:拍照或从手机相册中选图接口chooseImage+预览图片接口previewImage+上传图片接口uploadImage+下载图片接口downloadImage
- 小程序的图片上传wx.uploadFile及后台PHP接收文件并存储到服务器
- 微信小程序 wx.uploadFile无法上传解决办法
- 微信小程序wx.upload上传图片后台java
- 微信小程序文件上传java服务器端wx:uploadFile()
- 小程序之上传图片——wx.uploadFile()
- 小程序从本地相册选择图片或使用相机拍照wx.chooseImage上传后预览并可以识别图中二维码
- 微信小程序 wx.uploadFile 的编码坑
- 微信小程序保存网络图片的方式2:downfile+saveImageToPhotosAlbum
- 微信小程序 wx.uploadFile在安卓手机上面the same task is working问题解决
- Ajaxfileupload图片上传(支持PC端、微信、手机浏览器)
- 微信小程序 wx.uploadFile 的编码坑
- php处理微信小程序wx.uploadFile(OBJECT)发送过来的文件
- 图片上传之前检查大小、尺寸、格式并预览(Validate the file size/file type/image size/ before upload)
- 微信小程序 wx.uploadFile 的编码坑
- 微信小程序 wx.uploadFile(object), wx.downloadFile(object) API
- 微信小程序wx.getImageInfo()获取图片信息
- 微信小程序把玩(三十一)wx.uploadFile(object), wx.downloadFile(object) API