微信小程序实现多图上传图片预览和删除案例

2021-09-08 阅读：1653 分类：后端标签：微信小程序

本文例子实现小程序多图上传和预览功能，限制图片上传张数限制，供大家参考。

效果展示：

1、wxml代码：

<form catchsubmit="formSubmit" catchreset="formReset">
<view class="other">
 <view class='uploader-img flex justify-content-start' wx:if="{{pics}}">
	 <view class='uploader-list' wx:for="{{pics}}" wx:key="item.length">
		<image src='{{item}}' data-index="{{index}}" mode="scaleToFill" bindtap='previewImg1'/>
		<image class='delete' data-index="{{index}}" src='/asset/del.png' mode="widthFix" bindtap='deleteImg'/>
	 </view>
	</view>
	<view class='upAdd' bindtap='chooseImg'>
	 <image src='/asset/add.png' mode="widthFix"/>
	</view>
	<view class="for-me">图片(最多3张)</view>
</view>
	<button class="formbtn" formType="submit">上传</button>
</form>

2、wxss样式代码：

/* 图片上创 */
.other{
 background: #eeeeee;
 border-radius: 15rpx;
 border:1px solid #eeeeee;
 margin-top: 25rpx;
}
.uploader-img{
 display: inline-block;
}
.upAdd{ 
 width: 150rpx;
 height: 150rpx;
 display: inline-block;
}
.upAdd image{
 width: 150rpx;
 height: 150rpx;
 display: block;
}
.uploader-list{
 width: 150rpx;
 height: 150rpx;
 display: inline-block;
 position: relative;
 margin-right: 5rpx;
}
.uploader-list image{
 width: 150rpx;
 height: 150rpx;
}
.delete{ 
 width: 45rpx !important;
 height: 45rpx !important;
 position: absolute;
 right: 5rpx;
 top: 5rpx;
}
.for-me{
 font-size: 25rpx !important;
 color: #747373;
 padding-left: 15rpx;
 padding-bottom: 20rpx;
 font-weight: normal !important;
}
/* 图片上传 end*/

3、js部分代码：图片上传这里采用同步形式

 // index.js
// 获取应用实例
const app = getApp()


Page({
  data: {
    pics: [],//图片
  },
  onLoad() {


  },


   //图片上传
    uploadimg:function(path){
        return new Promise((resolve, reject) =>{
            wx.uploadFile({
                filePath: path,
                name: 'file',
                url: 'https://www.tpxhm.com/photo',
                success(res) {
                	//resolve作用提示小程序请求已结束
                    resolve(JSON.parse(res.data))
                },
                fail (err) {
                  reject(err)
                }
            });
        });
    },
    async formSubmit(e) {
      var _that2=this
	  let images = _that2.data.pics
	  // console.log(_that2.data.pics)
	  var _images = [];
	  for (let i = 0; i < images.length; i++) {
			var res = await _that2.uploadimg(images[i])
			_images[i] = res.data
			
	  }
	//  console.log(_images)
      
      //数据提交
      wx.request({
        url: 'https://www.tpxhm.com/postSubject', //仅为示例，并非真实的接口地址
        data: {
          image: JSON.stringify(_images),
        },
        method: 'POST',
        success (res) {
          console.log(res)
        },
        fail (res) {
          console.log(res)
          wx.showToast({
            title: '网络繁忙，请稍后重试。',
            icon: 'error',
            mask: true,
            duration: 2000
          })
        }
      })
    },


    /**
   * 图片放大查看
   */
  previewImg: function (e) {
    
    var index = e.target.dataset.index;//当前图片地址
    var imgArr = e.target.dataset.list;//所有要预览的图片的地址集合 数组形式
    console.log(index, imgArr)
    wx.previewImage({
      current: imgArr[index],
      urls: imgArr,
    })
  },
  /**
   * 图片上传
   * 
   */


  //上传图片开始
  chooseImg: function (e) {
    var that = this, pics = this.data.pics;
    // console.log(pics);
    if (pics.length < 3) {
      wx.chooseImage({
        count: 3, // 最多可以选择的图片张数，默认9
        sizeType: ['original', 'compressed'], // original 原图，compressed 压缩图，默认二者都有
        sourceType: ['album', 'camera'], // album 从相册选图，camera 使用相机，默认二者都有
        success: function (res) {
          // 返回选定照片的本地文件路径列表，tempFilePath可以作为img标签的src属性显示图片
          var tempFilePaths = res.tempFilePaths;
          // wx.showToast({
          //   title: '正在上传...',
          //   icon: 'loading',
          //   mask: true,
          //   duration: 10000
          // });
          for (var i = 0; i < tempFilePaths.length;i++){
            pics.push(tempFilePaths[i]);
          }
          // console.log(pics);
          that.setData({
            pics: pics
          })
        },
      });
    } else {
      wx.showToast({
        title: '最多上传3张图片',
        icon: 'none',
        duration: 3000
      });


    }
  },
  // 删除图片
  deleteImg: function (e) {
    var that = this;
    var pics = this.data.pics;
    var index = e.currentTarget.dataset.index;
    pics.splice(index, 1);
    console.log(pics)
    this.setData({
      pics: pics,
    })
  },
  // 预览图片
  previewImg1: function (e) {
    //获取当前图片的下标
    var index = e.currentTarget.dataset.index;
    //所有图片
    var pics = this.data.pics;
    wx.previewImage({
      //当前显示图片
      current: pics[index],
      //所有图片
      urls: pics
    })
  }, 
})

后端代码：基于ThinkPHP6简单的上传图片方法：

// 图片单文件上
public function photo(Request $request){
	//获取表单上传文件
	$file = request()->file('file');
	$upload_dir = '/question'; //组装文件保存目录
  //上传文件到本地服务器
	$filename = \think\facade\Filesystem::disk('public')->putFile($upload_dir, $file);
	;
	if ($filename){
		$src = '/uploads/'.str_replace('\\', '/', $filename);
		return json(['code'=>1,'msg'=>'上传成功','data'=>$src]);
	}else{
		return json(['code'=>0,'msg'=>'上传失败']);
	}
}