微信小程序-上传多张图片加进度条（支持预览、删除）

2018-12-24

详情示例见：https://www.cnblogs.com/cisum/p/9564898.html

2018-12-29

组件下载见：https://www.cnblogs.com/cisum/p/10199507.html

2019-3-14（推荐）

组件demo：https://www.cnblogs.com/cisum/p/10533559.html

index.js

  data: {
     list: '',
     upload_picture_list: []
   },
   //选择图片方法
   uploadpic: function (e) {
     var that = this //获取上下文
     var upload_picture_list = that.data.upload_picture_list
     //选择图片
     wx.chooseImage({
       count: 8,
       sizeType: ['compressed'],
       sourceType: ['album', 'camera'],
       success: function (res) {
         var tempFiles = res.tempFiles
         //把选择的图片 添加到集合里
         for (var i in tempFiles) {
           tempFiles[i]['upload_percent'] = 0
           tempFiles[i]['path_server'] = ''
           upload_picture_list.push(tempFiles[i])
         }
         //显示
         that.setData({
           upload_picture_list: upload_picture_list,
         });
       }
     })
   },
   //点击上传事件
   uploadimage: function () {
     var page = this
     var upload_picture_list = page.data.upload_picture_list
     //循环把图片上传到服务器 并显示进度
     for (var j in upload_picture_list) {
       if (upload_picture_list[j]['upload_percent'] == 0) {
　　　　　　//调用函数
         app.util.upload_file_server(app.api.up_pic,page, upload_picture_list, j)
       }
     }
   },

   // 删除图片
   deleteImg: function(e) {
     let upload_picture_list = this.data.upload_picture_list;
     let index = e.currentTarget.dataset.index;
     upload_picture_list.splice(index, 1);
     this.setData({
       upload_picture_list: upload_picture_list
     });
   },

   //上传方法
   function upload_file_server(url, that, upload_picture_list, j) {
     //上传返回值
     const upload_task = wx.uploadFile({
       // 模拟https
       url: url, //需要用HTTPS，同时在微信公众平台后台添加服务器地址
       filePath: upload_picture_list[j]['path'], //上传的文件本地地址
       name: 'file',
       formData: {
         'num': j
       },
       //附近数据，这里为路径
       success: function (res) {

         var data = JSON.parse(res.data);
         // //字符串转化为JSON
         if (data.Success == true) {

           var filename = data.file //存储地址 显示

           upload_picture_list[j]['path_server'] = filename
         } else {
           upload_picture_list[j]['path_server'] = filename
         }
         that.setData({
           upload_picture_list: upload_picture_list
         });

         wx.setStorageSync('imgs', upload_picture_list);
       }
     })
     //上传 进度方法
     upload_task.onProgressUpdate((res) => {
       upload_picture_list[j]['upload_percent'] = res.progress
       that.setData({
         upload_picture_list: upload_picture_list
       });
     });
   }

index.wxml

 <view class="picture_list">

     <view wx:for="{{upload_picture_list}}" class="picture_item" wx:key="{{index}}">
       <image wx:if="{{item.upload_percent < 100}}" src="{{item.path}}" mode="aspectFill"></image>
       <image wx:if="{{item.upload_percent == 100}}" src="{{item.path_server}}" mode="aspectFill"></image>
       <view class="upload_progress" wx:if="{{item.upload_percent < 100}}" data-index="{{index}}" bindtap="previewImg">{{item.upload_percent}}%</view>
       <text class='del' bindtap='deleteImg' data-src='{{image}}' style='display:{{isDel}}' data-index="{{index}}">×</text>
     </view>

     <view class='picture_item'>
       <view class="add-image" bindtap='uploadpic'>
         <text>+</text>
       </view>
     </view>
   </view>
   <button bindtap='uploadimage' class='yes-upload'>确定上传</button>

index.wxss

 .add-image, .up-pic image {
   margin-top: 2%;
   margin-left: 2%;
   width: 150rpx;
   height: 150rpx;
   color: #ddd;
   font-size: 144rpx;
   line-height: 95%;
   text-align: center;
   background-color: #fff;
   cursor: pointer;
   border-radius: 10rpx;
 }

 .picture_list {
   padding: 20rpx;
   margin-left: 12%;
   display: flex;
   flex-direction: row;
   flex-wrap: wrap;
   justify-content: flex-start;
   align-items: flex-start;
   align-content: flex-start;
 }

 .picture_item {
   margin: 10px;
   margin-left:;
   position: relative;
   width: 160rpx;
   height: 160rpx;
 }

 .picture_item .del {
   position: absolute;
   top: -11rpx;
   right: -11rpx;
   color: #fff;
   border-radius: 50%;
   width: 40rpx;
   height: 40rpx;
   z-index:;
   line-height: 35rpx;
   text-align: center;
   background-color: #f00;
 }

 .upload_progress {
   position: absolute;
   top:;
   left:;
   opacity: 0.7;
   border-radius: 8rpx;
   background-color: #000;
   color: #fff;
   width: 160rpx;
   height: 160rpx;
   text-align: center;
   line-height: 160rpx;
   font-size: 12px;
 }

 .picture_item image {
   width: 160rpx;
   height: 160rpx;
 }

app.api.x ：是封装的各类请求url地址

app.util.x ：是封装的函数，关于使用

1. 先util添加方法

2. app.js

3. 页面上调用，需要声明

后端php代码

<?php
    class Imageadmin
    {

        public function imageupload()
        {
            //名字获取
            $wxid=$_POST["num"];
            //时间获取
            $diaryTime=$_POST["datetime"];
            //获取日期
            $date = $_POST["date"];
            $a = substr($_FILES['file']['type'],6);//获取图片后缀
            //$a =  strstr( $_FILES['file']['type'], '/');
            $file_name=$date.'\\'.$diaryTime.'_'.$wxid.'.'.$a;//拼装存储地址path
            $file_name1=$date.'/'.$diaryTime.'_'.$wxid.'.'.$a;//拼装图片浏览path
            $path = "D:\www\File\\".$file_name;//存储path
            $dir = iconv("UTF-8", "GBK","D:\www\File\\".$date);//判断文件夹是否存在
            if (!file_exists($dir)){
                mkdir ($dir,0777,true);//不存在 创建新文件夹
                $panduan = move_uploaded_file($_FILES['file']['tmp_name'], $path);//存入图片
            } else {
                $panduan = move_uploaded_file($_FILES['file']['tmp_name'], $path);//存入已有文件夹内
            }
            //保存到指定路径  指定名字
            if ($panduan){//存储成功
                $res = ['errCode'=>0,'errMsg'=>'图片上传成功','file'=>$file_name1,'Success'=>true];
                return json($res);
            }else{//失败
                $res = ['errCode'=>0,'errMsg'=>'图片上传失败','file'=>'https://127.0.0.1:80/xxxx.png','Success'=>!true];
                return json($res);
            }
        }

    }
?>