微信小程序实现图片上传

最近做了个小程序，涉及到了图片上传的功能，今天给大家详细介绍下如何实现小程序图片上传，话不多说先上代码

首先是静态布局和样式部分

.wxml代码部分

<view class='load-img'><view class='load-box'><view class='img-item' wx:for="{{fileList}}" wx:key="index" ><image src="{{item.path}}" data-src="{{item}}" mode="aspectFill" data-list="{{fileList}}" bindtap=""></image><icon class='icon' type="clear" size="20" color='#EF4444' catchtap='_onDelTab' data-idx="{{index}}" wx:if="{{!prevent}}"/></view><image class='img-add' bindtap='_addImg' wx:if="{{!prevent}}"></image></view></view>

.wxss代码部分

/* 上传图片 */
.load-name {height: 80rpx;line-height: 80rpx;font-size: 30rpx;}.load-box {display: flex;flex-direction: row;flex-wrap: wrap;}.img-item, .img-add {position: relative;width: 140rpx;height: 140rpx;margin: 20rpx;}.img-add {border: 1px solid #ccc;}.img-add:after{width: 1rpx;height: 50rpx;content: " ";position: absolute;top: 50%;left: 50%;-webkit-transform: translate(-50%, -50%);-ms-transform: translate(-50%, -50%);transform: translate(-50%, -50%);background-color: #ccc;}.img-add:before{position: absolute;top: 50%;right: 31%;width: 50rpx;height: 1rpx;content: " ";display: inline-block;background-color: #ccc;  }.img-item {margin-right: 20rpx;}.img-item image {width: 100%;height: 100%;border-radius: 10rpx;}.icon {position: absolute;top: 0;right: 0;}

以上这些基本代码就可以完成图片上传，显示，删除等样式布局

下面是js的部分，我已详细备注～～～

先来看下完整的代码

/*** 小程序图片上传* 组件接受参数* fileList  图片数组* prevent 控制是否可新增* 方法* bindimageChange 选择图片后触发* bindimageDel  删除图片后触发* */
const app = getApp();
Component({properties: {fileList: {type: Array},prevent: {type: Boolean,value: false}},data: {fileList: []},ready() {},methods: {// 点击加号进入手机相册，并进行图片选择_addImg() {let _this = this;// 此方法为微信小程序自带api 详情访问https://developers.weixin.qq.com/miniprogram/dev/api/media/image/wx.chooseImage.htmlwx.chooseImage({count: 5,success(res) {//此处会返回图片暂存路径和文件大小const data = res.tempFiles;_this.setFile(data)}})},setFile (data) {// 将wx.chooseImage返回的数据进行扩展data.map((item, index) => {// 通过路径截取文件后缀名const fileFormat = item.path.substring(item.path.lastIndexOf(".") + 1, item.path.length);// wx.getFileSystemManager()小程序文件管理器api，可以将通过文件路径将其转换成64编码const fileManager = wx.getFileSystemManager();const base64 = fileManager.readFileSync(item.path, 'base64');item.fileContent = base64;item.fileSize = item.size;// 通过时间获取随机13位随机数并且拼接文件后缀进行文件命名item.fileName = this.getFileName(13) + '.' + fileFormat;// 此处操作是用来进行选中图片显示的，只有这样拼接才能显示base64编码的路径item.path = `data:image/${fileFormat};base64,${base64}`;;})this.setData({ fileList: this.data.fileList.concat(data)});// 此处操作是用来将获取到的文件数据传递给父组件进行文件上传this.triggerEvent('imageChange', this.data.fileList)},// 随机生成文件名getFileName (m) {m = m > 13 ? 13 : m;var num = new Date().getTime();return num.toString().substring(13 - m);},点击进行图片删除_onDelTab(e) {// 获取图片索引let idx = e.currentTarget.dataset.idx;let delFile = this.data.fileList[idx];console.log(delFile);this.data.fileList.splice(idx, 1);this.setData({fileList: this.data.fileList})this.triggerEvent('imageDel', delFile);}
})

代码里对代码的备注已经很明确了，大家仔细扒一下，根据的自己的项目进行相应的调整，基本上都是没问题的，~~不要直接直接粘贴不复置，我是直接在我的项目中直接拿过来的代码，直接粘贴复制肯定是不行的！！！~~