小程序二开之图片篇-删除图片

接上篇

开始前先学习一下：

 删除无非就是获取图片信息，获取图片路径看路径是否需要转换，然后把拿到的路径往删除函数上一扔，然后看返回结果，我这个上传图片返回和存储的图片路径都是站点路径就是http开头的所以要转相对路径。

认真看的小伙伴或许会有疑问为什么我不把网页获取到的upload_img赋值给uploadImgUrl呢？这样在这里就不用写一大堆的判断了，其实我也和群友试过，但他这个小程序的返回值是直接渲染到页面上的，在onLoad和onShow获取不到这个值而在onReady里可以获取到，但这要重新刷新一次页面，用户体验不好，所以改成了这种麻烦的方法。大家看看就好了，嘿嘿。

废话不多说上代码

wxml代码：

        <view class="fui-cell uploadImg">
              <view class="fui-cell-label" style="width:200rpx;">图片上传:</view>
              <view style="margin-top: 20rpx; display: flex;justify-content: flex-start;align-items: center;">
              <view wx:if="{{(imgShow==1&&list.order.upload_img)||uploadImgUrl}}">
              <image src="{{list.order.upload_img?list.order.upload_img:uploadImgUrl}}" style="width: 150rpx;height: 150rpx;"></image>
              <view wx:if="{{uploadImgUrl.length>0||list.order.upload_img.length>0}}" class="imgDelCss"  bindtap="imgDelBtn">+</view></view>
              <view wx:if="{{!(imgShow==1&&list.order.upload_img)||uploadImgUrl}}">
                  <view wx:if="{{!(uploadImgUrl.length>0||list.order.upload_img.length>0)||imgAddShow==1}}" bindtap="chooseImage" class="addUploadImgCss">+</view>
                  </view>
              </view>
            </view>

wxss代码：

.uploadImg{
  position: relative;
}
.imgDelCss{
  position:absolute;
  left: 70px;
  top:24px;
  background-color: rgba(61, 61, 61, 0.74);width: 18px;height: 18px;border-radius: 50%;
  text-align: center;
  line-height: 18px;
  color: #ffffff;
  transform: rotate(45deg);
}
.addUploadImgCss{
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center; 
  width: 148rpx;
  height:148rpx;
  border:1px solid rgb(211, 211, 211);
  font-size: 30px;color: rgb(211, 211, 211);
}

js代码：

 data: {
        uploadImgUrl:'',
        imgShow:1,
        imgAddShow:1,

    },
    chooseImage:function(t){
      var that = this;
  wx.chooseImage({
    count: 1,  //最多可以选择的图片总数
    sizeType: ['compressed'], // 可以指定是原图还是压缩图，默认二者都有
    sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
    success: function (res) {
      // 返回选定照片的本地文件路径列表，tempFilePath可以作为img标签的src属性显示图片
      var tempFilePaths = res.tempFilePaths;
      //启动上传等待中...
      wx.showToast({
        title: '正在上传...',
        icon: 'loading',
        mask: true,
        duration: 3000
      })
 
        wx.uploadFile({
          url: 'http://www.weiqing2.cn/app/ewei_shopv2_api.php?i=1&r=util.uploader.upload',//后台原本封装了保存图片的接口，保存完返回一个绝对路径一个相对路径
          filePath: tempFilePaths[0],
          name: 'file',
          header: {
            "Content-Type": "multipart/form-data"
          },
          success: function (res) {
            var data = JSON.parse(res.data);
            if(data.files.length>0){
              that.setData({
                uploadImgUrl:data.files[0].url,
                imgShow:1,
                imgAddShow:0,
              })
              // 获取到图片保存地址进行写表操作
              that.getEvidenceImg(data.files[0].url)
            }
            
          },
          fail: function (res) {
            wx.hideToast();
            wx.showModal({
              title: '错误提示',
              content: '上传图片失败',
              showCancel: false,
              success: function (res) { }
            })
          }
        });
    }
  });
    },

    getEvidenceImg(img){
      //获取当前展示页面数据表相关id
      let id = this.data.list.order.id;
      wx.request({
        url: 'http://www.weiqing2.cn/app/ewei_shopv2_api.php?i=1&r=order.pay.updateOrderVoucher',//在相关后台页面写了个更新数据表方法updateOrderVoucher修改保存图片地址
        data:{
          id:id,
          img:img
        },
        success(res){
          console.log('图片地址已经写入数据库');
        },
        fail(err){
          // console(err)
        }
      })
    },
    imgDelBtn:function(){
       //获取相关id
      let id = this.data.list.order.id;
      var that = this;
      wx.request({
        url: 'http://www.weiqing2.cn/app/ewei_shopv2_api.php?i=1&r=order.pay.delOrderPayImg',
        data:{
          id:id,
        },
        header:{
          'content-type':'application/json'
        },
        success:function(res){
          // 请求成功
          // 修改外层div值隐藏相关图片
          that.setData({
            uploadImgUrl:'',
            imgShow:0,
            imgAddShow:1,
          });
          
          
        },
        fail(){
          console.log('失败');

        }
      })
    },

微擎相关代码：

    public function delOrderPayImg()
    {
        global $_W, $_GPC;
        $id = intval($_GPC['id']);
        $order = pdo_fetch("Select id,upload_img from ".tablename("相关数据表")." Where id={$id}");//根据id获取相关图片
        $lenght =istrlen($_W['attachurl']);//$_W[attachurl] => 附件URL根目录
        $img = substr($order['upload_img'],$lenght);//获取目录字符串长度
        if ($order['id']) {
            load()->func('file');
            if(file_delete($img)){//删除图片，成功则下一步改表数据
                $imgRes = pdo_update('相关数据表',array('upload_img'=>''),array('id'=>$id));
                if ($imgRes) {
                    return app_json(1);
                }
            }else{
                //图片删除失败
                return app_error("图片删除失败！");
            }

        }
        return app_error("订单更新失败");
    }

分享到此结束，继续我的牛马打工生活