本文为大家分享微信小程序的图片上传及图片预览功能，如下图所示：

需求分析：

1. 图片上传可以从本地图库选择也可调用相机进行拍照上传
   
2. 上传完成之后图片可以进行删除、预览等功能
   
3. 图片上传至服务器进行后台调用

代码实现：

wxml文件

<view class="recovery_other_line"><view class="other_text">上传图片</view><view wx:if="{{imageList.length}}" class="choose_upload_view"><view wx:for="{{imageList}}" wx:key="index" class="choose_upload_item"><!-- 图片上传展示 --><image src="{{item}}" class="choose_upload_img" data-index="{{index}}" bindtap="previewBigImage"></image><!-- 删除按钮 --><image src="../../res/img/jdRecycleIcon/icon_remove.png" class="remove_img_icon" data-index="{{index}}" catchtap="removeChooseImage"></image></view></view><!-- 上传按钮 --><view class="other_right other_upload"><image src="../../res/img/jdRecycleIcon/icon_upload.png" class="upload_img" bindtap="chooseImageTap"></image></view>
</view>

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})}
})

css文件

.recovery_other_line {display: flex;line-height: 124rpx;align-items: center;justify-content: space-between;
}
.recovery_other_line .upload_img {width: 36rpx;height: 36rpx;
}
.recovery_other_line .other_text {width: 150rpx;font-size: 28rpx;color: #000;
}
.choose_upload_view {flex: 1;height: 100%;display: flex;align-items: center;justify-content: flex-end;
}
.choose_upload_item {margin-left: 38rpx;position: relative;width: 100rpx;display: flex;align-items: center;
}
.choose_upload_view .choose_upload_img {width: 100rpx;height: 100rpx;
}
.choose_upload_view .remove_img_icon {padding: 4rpx;position:absolute;top: -15rpx;right: -13rpx;width: 28rpx;height: 28rpx;border-radius: 50%;background-color: rgba(0, 0, 0, .5);
}
.other_upload {margin-left: 15rpx;width: 80rpx;
}

以上就是本文的全部内容，希望对大家的学习有所帮助。。。