[微信小程序]微信小程序本地图片上传(base64)

效果

在这里插入图片描述

wxml

<view class="weui-cell">
  <view class="weui-cell__bd">
    <view class="weui-uploader">
	  <view class="weui-uploader__hd">
		  <view class="weui-uploader__title">相关照片(最多三张)<text style="color:#f00;float:right" bindtap="deleteAllImage">删除全部</text>
		 </view>
	   </view>
	  <view class="weui-uploader__bd">
		<view class="weui-uploader__files" >
			<view wx:for="{
    
    {imgList}}"> 
				<image class='weui-uploader__file' src="{
    
    {item}}"  />
			</view>
		</view>
	<view class="weui-uploader__input-box" wx:if="{
    
    {showAdd}}"> 
		<view class="weui-uploader__input"  bindtap="selectImage"></view>
	</view>
</view>
</view>
</view>
</view>

js

 selectImage() {
    
     //选择图片
    wx.chooseImage({
    
    
      count: 3, //最多可以选择的图片张数
      sizeType: ['original', 'compressed'], //所选的图片的尺寸,原图/原图
      sourceType: ['album', 'camera'], //选择图片的来源,从相册选图	/	使用相机
      success: res => {
    
      // tempFilePath可以作为img标签的src属性显示图片
        console.log(res)
        const tempFilePaths = res.tempFilePaths
        this.setData({
    
    
          imgList: tempFilePaths
        })
        if (tempFilePaths.length == 3) {
    
    
          this.setData({
    
    
            showAdd: false
          })
        }
        // wx.showToast({
    
    
        //   title: '正在上传...',
        //   icon: 'loading',
        //   mask: true,
        //   duration: 7000
        // });
        this.handleImage(); //处理图片转base64
      }
    })
  },
  handleImage: function () {
    
     // 图片转base64
    const that = this;
    // 判断是否有图片
    if (that.data.imgList.length !== 0) {
    
    
      let imgs = []
      for (let i = 0; i < that.data.imgList.length; i++) {
    
    
        // 转base64
        wx.getFileSystemManager().readFile({
    
    
         filePath: that.data.imgList[i],//要读取的文件的路径 (本地路径)
          encoding: "base64",//指定读取文件的字符编码,如果不传 encoding,则以 ArrayBuffer 格式读取文件的二进制内容
          success: function (res) {
    
    
            imgs.push('data:image/png;base64,' + res.data);
            //转换完毕,执行上传
            console.log(imgs);
            that.setData({
    
    
              imgs: imgs
            })
            // if (that.data.imgList.length == imgs.length) {
    
    

            // }
          }
        })
      }
    } else {
    
    
      wx.showToast({
    
    
        title: "请先选择图片!",
        icon: 'none',
        duration: 3000
      })
    }
  },

参考链接:
教你如何简单快速实现小程序本地图片上传(base64)

猜你喜欢

转载自blog.csdn.net/iChangebaobao/article/details/107985171