文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

微信小程序图片上传功能的实现方法

2024-04-02 19:55

关注

前言

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

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

.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格式的图片要进行字符串拼接才可以正常显示如下图

好啦这些就是我小程序上传图片的操作,这些只是我对日常工作的积累,不喜勿喷 不喜勿喷 不喜勿喷 重要的事情说三遍大家仔细看下代码理解用法,还是很简单的,看都不看想白漂肯定是不行的呦~~~~~~~~~

总结

到此这篇关于微信小程序图片上传功能的文章就介绍到这了,更多相关微信小程序图片上传功能内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网!

阅读原文内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-前端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯