微信小程序图片上传功能怎么实现

这篇文章主要介绍“微信小程序图片上传功能怎么实现”，在日常操作中，相信很多人在微信小程序图片上传功能怎么实现问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答”微信小程序图片上传功能怎么实现”的疑惑有所帮助！接下来，请跟着小编一起来学习吧！

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

.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的部分，我已详细备注～～～

先来看下完整的代码

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.html      wx.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);    }})

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

大家需要注意的是这里

通常在真机上点击选中图片后wx.chooseImage方法中返回的文件路径是wxfile:开头的路径，这样的路径想直接转成base64，上面的方式是可以实现的，我也是查了很多资料才找到的解决办法。

再一个需要注意的是image src属性想显示base64格式的图片要进行字符串拼接才可以正常显示如下图

到此，关于“微信小程序图片上传功能怎么实现”的学习就结束了，希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习，快去试试吧！若想继续学习更多相关知识，请继续关注编程网网站，小编会继续努力为大家带来更多实用的文章！