微信小程序的图片上传及图片预览功能
萌小窝 时间：2022-08-24
本文为大家分享微信小程序的图片上传及图片预览功能，如下图所示：
需求分析：
- 图片上传可以从本地图库选择也可调用相机进行拍照上传
- 上传完成之后图片可以进行删除、预览等功能
- 图片上传至服务器进行后台调用
代码实现：
wxml文件
<view >="recovery_other_line"> <view >="other_text">上传图片</view> <view wx:if="{{imageList.length}}" >="choose_upload_view"> <view wx:for="{{imageList}}" wx:key="index" >="choose_upload_item"> <!-- 图片上传展示 --> <image src="{{item}}" >="choose_upload_img" data-index="{{index}}" bindtap="previewBigImage"></image> <!-- 删除按钮 --> <image src="../../res/img/jdRecycleIcon/icon_remove.png" >="remove_img_icon" data-index="{{index}}" catchtap="removeChooseImage"></image> </view> </view> <!-- 上传按钮 --> <view >="other_right other_upload"> <image src="../../res/img/jdRecycleIcon/icon_upload.png" >="upload_img" bindtap="chooseImageTap"></image> </view></view>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
js文件
import { baseUrl} from './../../utils/request.js'Page({ data: { imageList: [], // 上传图片集合 form: { // 用于其他功能提交的参数 ossUrl: [] } }, // 选择上传图片的方式 chooseImageTap() { let _this = this; wx.showActionSheet({ itemList: ['从相册中选择', '拍一张'], itemColor: "#f7982a", success(res){ if (!res.cancel) { if (res.tapIndex == 0) { // 从相册中选择 _this.chooseWxImage('album') } else if (res.tapIndex == 1) { // 使用相机 _this.chooseWxImage('camera') } } } }) }, // 选择图片 chooseWxImage(type) { let _this = this; let imgs = this.data.imageList; wx.chooseImage({ count: 1, sizeType: ['original', 'compressed'], sourceType: [type], success(res) { if (imgs.length > 2) { return wx.showToast({ title: '最多可上传三张图片', icon: 'none' }) } _this.upload(res.tempFilePaths[0]); } }) }, //上传图片到服务器 upload: function(path) { let _this = this; let {ossUrl} = this.data.form; console.log(ossUrl) wx.showToast({ icon: "loading", title: "正在上传" }), //将本地资源上传到服务器 wx.uploadFile({ url: baseUrl, // 开发者服务器地址 filePath: path, // 要上传文件资源的路径 (本地路径) name: 'editormd-image-file', // 文件对应的 key，开发者在服务端可以通过这个 key 获取文件的二进制内容 header: { // HTTP 请求 Header，Header 中不能设置 Referer "Content-Transfer-Encoding": "binary", "Content-Type": "application/octet-stream", "Content-Disposition": "form-data" }, formData: { //和服务器约定的token, 一般也可以放在header中 'token': wx.getStorageSync('userData').token, }, success: function(res) { console.log(res) // 判断下 if (res && res.data) { const data = JSON.parse(res.data); if (res.statusCode != 200) { wx.showToast({ title: data.responseBody.data.message, icon: 'none' }) return; } else { if (!!data.responseBody.data) { ossUrl.push(data.responseBody.data.url); _this.setData({ imageList: ossUrl, 'form.ossUrl': ossUrl }) } } } }, fail: function(e) { wx.showToast({ title: '上传失败', icon: 'none' }) }, complete: function() { wx.hideToast(); //隐藏Toast } }) }, // 删除图片 removeChooseImage(e) { let imgs = this.data.form.ossUrl; let {index} = e.currentTarget.dataset; imgs.splice(index, 1); this.setData({ 'form.ossUrl': imgs, imageList: imgs }) }, // 预览图片 previewBigImage(e) { let imgs = this.data.imageList; let {index} = e.currentTarget.dataset; wx.previewImage({ //当前显示图片 current: imgs[index], //所有图片 urls: imgs }) }})- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
- 58
- 59
- 60
- 61
- 62
- 63
- 64
- 65
- 66
- 67
- 68
- 69
- 70
- 71
- 72
- 73
- 74
- 75
- 76
- 77
- 78
- 79
- 80
- 81
- 82
- 83
- 84
- 85
- 86
- 87
- 88
- 89
- 90
- 91
- 特别声明：本站部分内容收集于互联网是出于更直观传递信息的目的。该内容版权归原作者所有，并不代表本站赞同其观点和对其真实性负责。如该内容涉及任何第三方合法权利，请及时与824310991@qq.com联系,我们会及时反馈并处理完毕。