代码片段分享,小程序上传图片

最近在做售后功能,页面如下:

需要做上传图片功能,上传图片的小程序核心代码:

const App = getApp();

Page({

  /**
   * 页面的初始数据
   */
  data: {
    // 订单商品id
    order_id: null,

    statusBarHeight: 20,
    toBarHeight: 44,
    // 订单商品详情
    detail: {},

    // 图片列表
    imageList: [],

    // 服务类型
    serviceType: 10,

  },

  disable: false,

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function(options) {

    let _this = this;
        // 记录页面参数
        _this.data.order_id = options.order_id;
        _this.data.total_money = options.total_money;
        console.log(_this.data)
    //     var qqq = App.globalData.url;
    // console.log(qqq);
    //title高度样式
    _this.setData({
      'statusBarHeight': App.globalData.statusBarHeight,
      'toBarHeight': App.globalData.toBar,
    });

   //内容滚动条高度计算
   if (_this.data.UserType == 10) {
    var scollHeight = App.globalData.screenHeight - App.globalData.statusBarHeight - 260;
  } else {
    var scollHeight = App.globalData.screenHeight - App.globalData.statusBarHeight - 150;
  }
  _this.setData({
    'o_boxHeight': scollHeight
  });
  _this.setData({
    'total_money': options.total_money
  });
    //console.log(options)

    // 获取订单商品详情
   // this.getGoodsDetail();
  },



    //返回上一页
    onClick: function () {
      wx.navigateBack({
        delta:1
      })
    },



  /**
   * 获取订单商品详情
   */
  getGoodsDetail: function() {
    let _this = this;
    App._get('user.refund/apply', {
      order_goods_id: this.data.order_goods_id
    }, function(result) {
      //_this.setData(result.data);
    });
  },

  /**
   * 切换标签
   */
  onSwitchService: function(e) {
    console.log(e.detail)
    this.setData({
      serviceType: e.detail.target.dataset.type
    });
  },

  /**
   * 跳转商品详情
   */
  onGoodsDetail: function(e) {
    wx.navigateTo({
      url: '../../../goods/index?goods_id=' + e.detail.target.dataset.id
    });
  },

  /**
   * 选择图片
   */
  chooseImage: function(e) {
    let _this = this,
      index = e.currentTarget.dataset.index,
      imageList = _this.data.imageList;

    // 选择图片
    wx.chooseImage({
      count: 6 - imageList.length,
      sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图,默认二者都有
      sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机,默认二者都有
      success: function(res) {
        _this.setData({
          imageList: imageList.concat(res.tempFilePaths)
        });
      }
    });
  },

  /**
   * 删除图片
   */
  deleteImage: function(e) {
    let dataset = e.currentTarget.dataset,
      imageList = this.data.imageList;
    imageList.splice(dataset.imageIndex, 1);
    this.setData({
      imageList
    });
  },

  /**
   * 表单提交
   */
  onSubmit: function(e) {
    let _this = this;

    console.log(e.detail,_this.data);

    if (!e.detail.value.content) {
      App.showError('申请原因不能为空');
      return false;
    }

    // 判断是否重复提交
    if (_this.disable === true) {
      return false;
    }
    // 表单提交按钮设为禁用 (防止重复提交)
    _this.disable = true;

    wx.showLoading({
      title: '正在处理...',
      mask: true
    });

   // console.log(wx.getStorageSync('yj_user_id'));

    // form参数
    let postParams = {
      order_id: _this.data.order_id,
      type: _this.data.serviceType,
      content: e.detail.value.content,
      user_id:wx.getStorageSync('yj_user_id'),
      apply_money:e.detail.value.apply_number,
    };
    //console.log(postParams);return;
    // form提交执行函数
    let fromPostCall = function(params) {
      console.log(params);
      App._post_form('refund/apply', params, function(result) {
       // console.log(result);return;
          if (result.status == 200) {

            App.showSuccess(result.msg,function(){
              // 跳转售后管理页面
             console.log("222")
              wx.navigateTo({
                url: "/pages/order/index"
              });
            });
          } else {
            App.showError(result.msg);
          }
        },
        false,
        function() {
          wx.hideLoading();
          _this.disable = false;
        });
    };

    // 统计图片数量
    let imagesLength = _this.data.imageList.length;

    // 判断是否需要上传图片
    imagesLength > 0 ? _this.uploadFile(imagesLength, fromPostCall, postParams) : fromPostCall(postParams);
  },

  /**
   * 上传图片
   */
  uploadFile: function(imagesLength, callBack, formData) {
    var that = this
    let uploaded = [];
    // 文件上传
    let i = 0;
    that.data.imageList.forEach(function(filePath, fileKey) {
      console.log(filePath,fileKey);
      console.log(App.globalData.url + 'cpfr/Refund/upimages');
      console.log(filePath)
      wx.uploadFile({
        url: App.globalData.url + 'cpfr/Refund/upimages',
        //url: App.api_root + 'cpfr/upload/image',
        header: {
          "content-Type": "multipart/form-data"
        },
        filePath: filePath,
        name: 'file',
        formData: {
          // wxapp_id:'1002',
          // token: wx.getStorageSync('yj_LoginToken')
          wxapp_id: 10002,
          token: wx.getStorageSync('AuthorizeToken'),
          filePath: filePath
        },
        success: function(res) {
          console.log("vvv",res)
          //return "111";
          var dataa = res.data;
          console.log(typeof dataa,JSON.parse(dataa))
          let result = typeof res === "object" ? res : JSON.parse(res);
          console.log("sss",typeof result,result)
          console.log(result.data)
          if (res.statusCode == 200) {
            console.log("www")
            uploaded[fileKey] = res.file;
            console.log("www",uploaded)
          }
        },

        fail: function (res) {
          // debugger
          console.log("ccc")
          console.log("ccc",res);
      },


        complete: function() {
          i++;
          if (imagesLength === i) {
            // 所有文件上传完成
            console.log('upload complete');
            console.log(uploaded)
            formData['images'] = uploaded;
            // 执行回调函数
            callBack && callBack(formData);
          }
        }
      });
    });
  },


})

之所以有那么多console.log,是因为该项目我还在调试,后端的PHP代码我尽量简单化,如图

	//上传图片的方法
	public function upimages(Request $request){
		$vv = input('param.'); //获取全部参数
		$file = request()->file('file');
		if ($file) {
		$info = $file->move('uploads/refund/');//文件路径
		
		if ($info) {
			//$file = $info->getSaveName();
			$data = ROOT_PATH . 'uploads'  .'refund' . $info->getSaveName();
            $res = array('code'=>10002,'msg'=>'successfully','data'=>compact('data'));
			lq_test(json_encode($res));
            return json_encode($res);
			
			//$return_arr = array('code'=>10003,'msg'=>'Data read successfully','data'=>compact('list'));
		   // return json_encode($return_arr);
		
        }
    } 
	
	}
	public function addImg() {
        $code = $_FILES['file'];//获取小程序传来的文件
		
		//WSTUploadFile();
        // return $_FILES['file']['type'];
		
        // 判断是否是post提交
        if(is_uploaded_file($_FILES['file']['tmp_name'])) {
			//lq_test("222");
            //临时文件
            $uploaded_file = $_FILES['file']['tmp_name'];
            // return $uploaded_file;
            // 允许的图片类型
            $judge_img = array("image/gif","image/pjpeg","image/jpeg","image/png","image/jpg");
            // 允许的视频类型
            $judge_vid = array("video/mp4");
            // 判断是图片还是视频
            if(in_array($_FILES['file']['type'],$judge_img)) {
                // 换算字节  1M = 1024KB;1KB = 1000bt;
                if($_FILES["file"]["size"] > 1024000) {
                    // 图片过大
                    $arr = ['status' => 2];
                    return json_encode($arr);
                }
                // 图片的路径
				$pathdir= 'uploads/refund/';
                $user_path = Env::get('root_path').$pathdir;
            }elseif(in_array($_FILES['file']['type'],$judge_vid)) {
                if($_FILES["file"]["size"] > 2048*1000) {
                    // 视频过大
                    $arr = ['status' => 2];
                    return json_encode($arr);
                }
				
				 $pathdir= 'uploads/refund/';
                // 视频的路径
                $user_path = $pathdir;
            }else {
                // 格式错误
                $arr = ['status' => 1];
                return json_encode($arr);
            }
            $file_true_name = $_FILES['file']['name']; 
            $move_to_file = $user_path.time()."-".date("Y-m-d").substr($file_true_name,strrpos($file_true_name,"."));  
            if(move_uploaded_file($uploaded_file,iconv("utf-8","gb2312",$move_to_file))) {  
                // 上传成功
                $arr = ['status' => 3, 'url' => $move_to_file];
		
				$arr = json_encode($arr);
				
				
				
                return $arr;
            } else {  
                // 上传失败网络错误,请重新上传
                $arr = ['status' => 4];
                return json_encode($arr);
            }  
        } else { 
            // 上传方式错误
            $arr = ['status' => 6];
            return json_encode($arr);
        }
    }

小程序调试器中接收到的cosole中打印如下:

不知道为什么加上了statuscode,cookie哪些HTTP传输字段,可能是文件上传传输形式不一样吧,不影响取值

猜你喜欢

转载自blog.csdn.net/EasyTure/article/details/109647623