微信小程序多图片上传框，含编辑功能，只包含部分核心代码

于 2018-09-10 17:27:49 发布
阅读量902 收藏 10
点赞数
分类专栏： 微信小程序 node.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ZkD953/article/details/82592619
版权

wxml 文件（核心代码）

<!--图片上传-->
    <view class='upload_image_view' wx:if="{{img_arr1.length <= 0}}">
      <!-- <view class='title'>招店牌实景效果图</view> -->
      <block wx:for="{{files1}}" wx:key="*this">
        <view class='image_view'>
          <image src='{{item}}' bindtap="previewImage1" id="{{item}}" data-src="{{item}}" mode="aspectFill"></image>
          <view class='del_btn' data-index="{{index}}" bindtap='del_img1'>
            <view class='baicha'></view>
          </view>
        </view>
      </block>
      <view class='add_view' wx:if="{{files1.length < up_img_length1}}" bindtap="chooseImage1">
        <view class="xiangji">
          <view class="tixing"></view>
          <view class='changfx'>
            <view class='yuan1'>
              <view class='yuan2'></view>
            </view>
          </view>
        </view>
      </view>
      <view class='info'>上传招店牌实景效果图，最多{{up_img_length1}}张。(非必填)</view>
    </view>

    <!--图片上传-->
 <!--图片上传-->
    <view class='upload_image_view' wx:if="{{img_arr2.length <= 0}}">
      <!-- <view class='title'>招店牌机构设计图</view> -->
      <block wx:for="{{files2}}" wx:key="*this">
        <view class='image_view'>
          <image src='{{item}}' bindtap="previewImage2" id="{{item}}" data-src="{{item}}" mode="aspectFill"></image>
          <view class='del_btn' data-index="{{index}}" bindtap='del_img2'>
            <view class='baicha'></view>
          </view>
        </view>
      </block>
      <view class='add_view' wx:if="{{files2.length < up_img_length2}}" bindtap="chooseImage2">
        <view class="xiangji">
          <view class="tixing"></view>
          <view class='changfx'>
            <view class='yuan1'>
              <view class='yuan2'></view>
            </view>
          </view>
        </view>
      </view>
      <view class='info'>上传招店牌机构设计图，最多{{up_img_length2}}张。(非必填)</view>
    </view>

    <!--图片上传-->

  </view>

wxss 文件 （核心样式）

.upload_image_view {
  width: 90%;
  margin: 20rpx 0 20rpx 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}

.upload_image_view .title {
  width: 100%;
  font-family: PingFang-SC-Regular;
  font-size: 24rpx;
  color: #4a4a4a;
  margin-bottom: 15rpx;
  line-height: 100%;
}

.upload_image_view .info {
  width: 100%;
  font-family: PingFang-SC-Regular;
  font-size: 24rpx;
  color: #ff4259;
  height: 24rpx;
  margin-top: 15rpx;
  line-height: 24rpx;
}

.upload_image_view .image_view {
  height: 130rpx;
  width: 130rpx;
  position: relative;
  margin: 15rpx 15rpx 15rpx 0rpx;
  border-radius: 8rpx;
}

.upload_image_view .image_view image {
  height: 100%;
  width: 100%;
  border-radius: 8rpx;
}

.upload_image_view .image_view .del_btn {
  background-color: #f67371;
  border-radius: 50%;
  width: 25rpx;
  height: 25rpx;
  position: absolute;
  top: -12rpx;
  right: -12rpx;
  z-index: 2;
  display: flex;
  justify-content: center;
  align-items: center;
}

.upload_image_view .image_view .del_btn .baicha {
  display: inline-block;
  width: 20rpx;
  height: 5rpx;
  background: #fff;
  line-height: 0;
  font-size: 0;
  vertical-align: middle;
  -webkit-transform: rotate(45deg);
}

.upload_image_view .image_view .del_btn .baicha:after {
  content: '/';
  display: block;
  width: 20rpx;
  height: 5rpx;
  background: #fff;
  -webkit-transform: rotate(-90deg);
}

.upload_image_view .add_view {
  height: 115rpx;
  width: 115rpx;
  margin: 15rpx 15rpx 15rpx 0rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.00);
  border: 4rpx dashed #979797;
  border-radius: 8rpx;
}

/* 相机 */

.upload_image_view .add_view .xiangji {
  height: 40rpx;
  width: 48rpx;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
}

.upload_image_view .add_view .xiangji .tixing {
  width: 10rpx;
  height: 7rpx;
  background-color: #fff;
  border-right: 10rpx solid #fff;
  border-bottom: 7rpx solid #b2b2b2;
  border-left: 10rpx solid #fff;
}

.upload_image_view .add_view .xiangji .changfx {
  height: 32rpx;
  width: 48rpx;
  border-radius: 5%;
  background-color: #b2b2b2;
  display: flex;
  align-items: center;
  justify-content: center;
}

.upload_image_view .add_view .xiangji .changfx .yuan1 {
  height: 20rpx;
  width: 20rpx;
  border-radius: 50%;
  background-color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
}

.upload_image_view .add_view .xiangji .changfx .yuan2 {
  height: 10rpx;
  width: 10rpx;
  border-radius: 50%;
  background-color: #b2b2b2;
}

js 文件 （核心代码）

  /**
   * 页面的初始数据
   */
  data: {
    files1: [],
    fileids1: [],
    img_arr1: [],
    up_img_length1: 4, //图片上传长度限制,
    upload_imgs1: [],
    files2: [],
    fileids2: [],
    img_arr2: [],
    up_img_length2: 4, //图片上传长度限制,
    upload_imgs2: [],
    submit_info: '保存',
    bindfunc: 'savecase',
    server: app.globalData.serverhostname,
    params: app.globalData.params
  }
 // 图片上传 开始
  /**
   * 选择照片
   */
  chooseImage1: function(e) {
    var that = this;
    var files = this.data.files1;
    if (that.data.files1.length >= that.data.up_img_length1) {
      wx.showToast({
        title: '最多提交' + that.data.up_img_length1 + '张照片!',
        image: '../../../style/img/jinggao.png',
        duration: 3000
      })
    } else {
      wx.chooseImage({
        count: that.data.up_img_length1,
        sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
        sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
        success: function(res) {
          // 返回选定照片的本地文件路径列表，tempFilePath可以作为img标签的src属性显示图片
          if (res.tempFilePaths.length + files.length > that.data.up_img_length1) {
            wx.showToast({
              title: '最多提交' + that.data.up_img_length1 + '张照片!',
              image: '../../../style/img/jinggao.png',
              duration: 3000
            })
          } else {
            for (var i = 0; i < res.tempFilePaths.length; i++) {
              var index = 0;
              for (var j = 0; j < files.length; j++) {
                if (files[j] == res.tempFilePaths[i]) {
                  index = 1;
                }
              }
              if (index != 1) {
                files.push(res.tempFilePaths[i]);
              } else {
                wx.showToast({
                  title: '图片已存在！',
                  image: '../../../style/img/jinggao.png',
                  duration: 1000
                })
              }
            }
            that.setData({
              files1: files
            });
          }
        }
      })
    }
  },
  /**
   * 选择照片
   */
  chooseImage2: function(e) {
    var that = this;
    var files = this.data.files2;
    if (that.data.files2.length >= that.data.up_img_length2) {
      wx.showToast({
        title: '最多提交' + that.data.up_img_length2 + '张照片!',
        image: '../../../style/img/jinggao.png',
        duration: 3000
      })
    } else {
      wx.chooseImage({
        count: that.data.up_img_length2,
        sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
        sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
        success: function(res) {
          // 返回选定照片的本地文件路径列表，tempFilePath可以作为img标签的src属性显示图片
          if (res.tempFilePaths.length + files.length > that.data.up_img_length2) {
            wx.showToast({
              title: '最多提交' + that.data.up_img_length2 + '张照片!',
              image: '../../../style/img/jinggao.png',
              duration: 3000
            })
          } else {
            for (var i = 0; i < res.tempFilePaths.length; i++) {
              var index = 0;
              for (var j = 0; j < files.length; j++) {
                if (files[j] == res.tempFilePaths[i]) {
                  index = 1;
                }
              }
              if (index != 1) {
                files.push(res.tempFilePaths[i]);
              } else {
                wx.showToast({
                  title: '图片已存在！',
                  image: '../../../style/img/jinggao.png',
                  duration: 1000
                })
              }
            }
            that.setData({
              files2: files
            });
          }
        }
      })
    }
  },
  /**
   * 放大上传照片
   */
  previewImage1: function(e) {
    wx.previewImage({
      current: e.currentTarget.id, // 当前显示图片的http链接
      urls: this.data.files1 // 需要预览的图片http链接列表
    });
  },
  /**
   * 放大上传照片
   */
  previewImage2: function(e) {
    wx.previewImage({
      current: e.currentTarget.id, // 当前显示图片的http链接
      urls: this.data.files2 // 需要预览的图片http链接列表
    });
  },
  /**
   * 提示信息
   */
  bttips: function() {
    wx.showToast({
      title: '正在提交!',
      icon: 'success',
      duration: 2000
    });
  },
  /**
   * 点击案件提交按钮
   */
  savecase: function() {
    var self = this;
    self.commit();
  },

  commit: function() {
    var self = this;
    //禁用提交按钮
    this.setData({
      bind_submit: 'bttips'
    })
    wx.showLoading({
      title: self.data.submit_info + '中',
      mask: true
    })
    if (self.data.files1.length > 0 || self.data.files2.length) {
      //上传图片
      for (var i = 0; i < self.data.files1.length; i++) {
        if (IsInArray(self.data.upload_imgs1, self.data.files1[i]) == false) {

          self.uploadimgs(app.globalData.serverhostname + "/common/upload/img" + app.globalData.params + "&type=eggimg0", self.data.files1[i], 'xg');
        } else {
          let img_urls = self.data.files1[i].split('//');
          img_urls = img_urls[1].split('/');
          let img_name = img_urls[5].split('?');
          let img_url = '/' + img_urls[1] + '/' + img_urls[2] + '/' + img_urls[3] + '/' + img_urls[4] + '/' + img_name[0];
          self.setData({
            fileids1: self.data.fileids1.concat(img_url)
          });
        }
      } //上传图片
      for (var i = 0; i < self.data.files2.length; i++) {
        if (IsInArray(self.data.upload_imgs2, self.data.files2[i]) == false) {

          self.uploadimgs(app.globalData.serverhostname + "/common/upload/img" + app.globalData.params + "&type=eggimg0", self.data.files2[i], 'jg');
        } else {
          let img_urls = self.data.files2[i].split('//');
          img_urls = img_urls[1].split('/');
          let img_name = img_urls[5].split('?');
          let img_url = '/' + img_urls[1] + '/' + img_urls[2] + '/' + img_urls[3] + '/' + img_urls[4] + '/' + img_name[0];
          self.setData({
            fileids2: self.data.fileids2.concat(img_url)
          });
        }
      }
      //监听图片是否上传完成
      var interval = setInterval(function() {
        //判断是否有上传失败的图片
        if (self.data.picuploadsucc == false) {
          //存在上传失败的照片
          //销毁 interval
          clearInterval(interval);
          //隐藏加载提示框
          wx.hideLoading();
          //开启提交按钮
          self.setData({
            bind_submit: 'submit'
          })
          //提示上传失败
          wx.showToast({
            title: '上传失败!',
            image: '../../../style/img/jinggao.png',
            duration: 3000
          });
        } else {
          //判断图片是否上传完成
          console.log(self.data.files1.length + '||' + self.data.fileids1.length + '||' + self.data.files2.length + '||' + self.data.fileids2.length);

          if ((self.data.files1.length == self.data.fileids1.length) && (self.data.files2.length == self.data.fileids2.length)) {
            //图片上传完成并且没有报错
            //销毁interval
            clearInterval(interval);
            //保存数据
            submit_dianzhaodp_info(self);
          }
        }
      }, 1000);
    } else {
      submit_dianzhaodp_info(self);
    }

  },

  /**
   * 
   * 上传单个图片
   */
  uploadimgs: function(url, imgfilepath, type_img) {
    var that = this;
    wx.uploadFile({
      url: url,
      filePath: imgfilepath,
      name: type_img == 'xg' ? 'flie1' : 'file2',
      header: {
        'content-type': 'multipart/form-data'
      }, // 设置请求的 header
      formData: {}, // HTTP 请求中其他额外的 form data
      success: function(res) {
        var data = JSON.parse(res.data);
        if (data.success) {
          //图片上传成功
          if (type_img == 'xg') {
            console.log('xg');
            that.setData({
              fileids1: that.data.fileids1.concat(data.file_path)
            });
          } else if (type_img == 'jg') {
            console.log('jg');
            that.setData({
              fileids2: that.data.fileids2.concat(data.file_path)
            });
          }
        } else {
          //图片上传失败
          that.setData({
            picuploadsucc: false
          })
        }
      },
      fail: function(res) {
        //服务器连接失败
        that.setData({
          picuploadsucc: false
        })
      }
    })
  },
  /**
   * 删除图片
   */
  del_img1: function(e) {
    var index = e.currentTarget.dataset.index;
    index = parseInt(index);
    var files = this.data.files1;
    files.splice(index, 1);
    this.setData({
      files1: files
    })
  },
  /**
   * 删除图片
   */
  del_img2: function(e) {
    var index = e.currentTarget.dataset.index;
    index = parseInt(index);
    var files = this.data.files2;
    files.splice(index, 1);
    this.setData({
      files2: files
    })
  },
  // 图片上传 结束

 

/**
 * 验证某个字符串是否存在于某个集合中
 */
function IsInArray(arr, val) {
  var testStr = ',' + arr.join(",") + ",";
  return testStr.indexOf("," + val + ",") != -1;
}
/**
 * 提交店招牌信息
 */
function submit_dianzhaodp_info(obj) {
  let that = obj;
  let name = that.data.name;
  if (name == '' || name == undefined || name == null || name == NaN) {
    wx.hideLoading()
    wx.showModal({
      title: '警告',
      content: '招店牌名称不能为空，请填写！',
      success: function(res) {
        if (res.confirm) {
          return false
        } else if (res.cancel) {
          return false
        }
      }
    })
    return false
  }
  wx.request({
    url: app.globalData.serverurl + "/wxxcxshopbanner/add_diandianzp_info" + app.globalData.params, //数据请求接口地址
    method: 'GET',
    data: {
      //省略 n 行数据
      xg_pic: that.data.fileids1.length == 0 ? '' : that.data.fileids1.join(","),
      jg_pic: that.data.fileids2.length == 0 ? '' : that.data.fileids2.join(",")
    },
    header: {
      'content-type': 'application/json' // 默认值
    },
    success: function(res) {
      console.log(res.data)
      if (res.data.errno == 0) {
        wx.hideLoading()
        wx.showToast({
          title: that.data.submit_info + '成功',
          icon: 'success',
          duration: 2000
        });
        setTimeout(function() {}, 2000)
        //页面将进行重定向
        wx.redirectTo({
          url: '/packageA/pages/dzjc_detail/dzjc_detail?shop_id=' + that.data.shop_id //页面路径
        })
      } else {
        wx.hideLoading()
        wx.showModal({
          title: '提示',
          content: res.data.msg,
          success: function(res) {
            if (res.confirm) {
              that.commit();
            } else if (res.cancel) {

            }
          }
        })
      }
    },
    fail: function(res) {
      console.log(res.data)
      wx.hideLoading()
      wx.showToast({
        title: that.data.submit_info + '失败',
        image: '../../../style/img/jinggao.png',
        duration: 2000
      })
    }
  })
}
/**
 * 获取店招店牌信息
 */
function get_dianzhaodp_info(obj) {
  let that = obj;
  wx.request({
    url: app.globalData.serverurl + "/wxxcxshopbanner/get_diandianzp_info" + app.globalData.params, //仅为示例，并非真实的接口地址
    data: {
      fd_shopcard_id: that.data.fd_shopcard_id
    },
    header: {
      'content-type': 'application/json' // 默认值
    },
    success: function(res) {
      console.log(res.data);
      if (res.data.errno == 0) {
        let fd_shopcard = res.data.fd_shopcard;
        let size = (fd_shopcard.size).split('*');
        let server = that.data.server;
        let params = that.data.params;
        that.setData({
          //省略 n 行数据
          files1: to_img_list(fd_shopcard.xg_pic, server, params),
          upload_imgs1: to_img_list(fd_shopcard.xg_pic, server, params),
          files2: to_img_list(fd_shopcard.jg_pic, server, params),
          upload_imgs2: to_img_list(fd_shopcard.jg_pic, server, params),
        })
      }
    },
    fail: function(res) {
      console.log(res.data)
    }
  })
}
/**
 * 将图片路径转换成服务器 路径
 */
function to_img_list(value, server, params) {
  if (value != '' && value != null && value != undefined && value != NaN) {
    var pics = value.split(',');
    for (var i = 0; i < pics.length; i++) {
      pics[i] = server + pics[i] + params
    }
    return pics;
  }
  return [];
}

服务器 controller (node.js) ——>本人比较懒,未省略其他 杂乱数据

        /**
         * 提交 商户 店招店牌 信息
         */
        *add_diandianzp_info() {
            let shop_id = this.ctx.query.shop_id;
            let user_id = this.ctx.query.user_id;
            console.log('shop_id==' + shop_id + '||' + 'user_id==' + user_id);
            let fd_shopcard_id = this.ctx.query.fd_shopcard_id;
            let fd_shopcard = {};
            if (shop_id != '' && shop_id != undefined && shop_id != null && user_id != '' && user_id != undefined && user_id != null) {
                let id = fd_shopcard_id == '' ? this.ctx.helper.uuid() : fd_shopcard_id
                fd_shopcard = {
                    id: id,
                    name: this.ctx.query.name,
                    size: this.ctx.query.size,
                    zm_type: this.ctx.query.zm_type,
                    material: this.ctx.query.material,
                    create_by: this.ctx.query.user_id,
                    comment: this.ctx.query.comment,
                    shop_id: this.ctx.query.shop_id,
                    create_date: new Date(),
                    xg_pic: this.ctx.query.xg_pic,
                    jg_pic: this.ctx.query.jg_pic,
                }
                const conn = yield app.mysql.beginTransaction(); // 初始化事务
                let element = yield app.mysql.queryOne(`SELECT id FROM fd_element WHERE NAME LIKE '%店招店牌%'`);
                let element_icon = yield app.mysql.queryOne(`SELECT * FROM fd_shop_element WHERE shop_id='${shop_id}' AND element_id='${element.id}'`);
                if (element_icon != null && element_icon != undefined && element_icon != '') {
                } else {
                    if (element != null && element != undefined && element != '') {
                        let shop_element = {
                            id: this.ctx.helper.uuid(),
                            shop_id: shop_id,
                            element_id: element.id,
                            create_by: this.ctx.query.user_id,
                            create_date: new Date(),
                            update_by: this.ctx.query.user_id,
                            update_date: new Date(),
                            deleted: '0'
                        }
                        yield app.mysql.insert("fd_shop_element", shop_element);
                    }
                }
                try {
                    if (fd_shopcard_id == '') {
                        yield app.mysql.insert("fd_shopcard", fd_shopcard);
                    } else {
                        yield app.mysql.update("fd_shopcard", fd_shopcard);
                    }
                    yield conn.commit();
                    this.ctx.body = { errno: 0, msg: "提交成功！" };
                } catch (err) {
                    yield conn.rollback(); // 捕获异常后回滚事务！！
                    this.ctx.body = { errno: 1, msg: "提交失败，是否重新提？" };
                    throw err;
                }
            } else {
                this.ctx.body = {
                    errno: 1,
                    msg: '提交失败,请重试'
                }
            }
        }
       /**
         * 获取 商户 店招店牌 详情
         */
        *get_diandianzp_info() {

            let fd_shopcard_id = this.ctx.query.fd_shopcard_id;
            if (fd_shopcard_id != '' && fd_shopcard_id != undefined && fd_shopcard_id != null) {
                let fd_shopcard = yield app.mysql.queryOne(`select * from fd_shopcard where id = '${fd_shopcard_id}'`);
                if (fd_shopcard != '' && fd_shopcard != undefined && fd_shopcard != null) {
                    this.ctx.body = {
                        fd_shopcard: fd_shopcard,
                        errno: 0,
                        msg: '初始化成功！'
                    }
                } else {
                    this.ctx.body = {
                        errno: 1,
                        msg: '店招牌不存在!'
                    }
                }
            } else {
                this.ctx.body = {
                    errno: 1,
                    msg: '初始化失败,请重试!'
                }
            }
        }

 

 

 

 

 

 

 

骑蜗牛de刘皇shu
关注
  • 0
    点赞
  • 踩
  • 10
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值