微信小程序表单含多图上传

html

<form class="page__bd" bindsubmit="formSubmit" bindreset="formReset">

<l-input label="标题" name='title' bind:linblur='title'  rules="{{titleRules}}" placeholder="请输入标题"  />

<l-textarea name='dream'  bind:linblur='dream' auto-focus="true" placeholder="说说你的想法吧..."  />

<view wx:if="{{id==3}}">



</view>

<view wx:else="{{id!=3}}">

<l-image-picker name='img' count="9" bind:linchange="onChangeTap"  bind:linremove="remove" />

</view>

<input type="text" hidden="true" name='type_id' value="{{id}}" />

<view>

<l-button size="mini" bindtap="address">位置</l-button>

<input type="text"  name='address' value="{{address}}" />

</view>

<checkbox-group   bindchange="checkboxChange" wx:for="{{label}}" wx:key="id">

<checkbox  value="{{item.id}}">{{item.title}}</checkbox>

</checkbox-group>

<view class="btn-area">

<button form-type="submit">Submit提交</button>

</view>

</form>

data:{path:[],url:'',address:'',label:[],labels:[],allValue:''
}//图片上传
onChangeTap(e){let img_url =e.detail.currentthis.setData({url:img_url})var token = wx.getStorageSync('token')let img = this.data.url;for (let index = 0; index < img.length; index++) {wx.uploadFile({filePath:img[index],name: 'pic',url: 'http://www.money.com/api/wx/img',formData:{token},success:res=>{// let url = res.datalet path = this.data.pathpath.push(res.data)this.setData({path})}})}},//图片删除remove(e){let index = e.detail.indexlet path = this.data.pathpath.splice(index,1)this.setData({path})},//地图获取地址
address(e){wx.chooseLocation({latitude: 0,success:res=>{let address = res.addressthis.setData({address})}})
},//复选框
checkboxChange:function(e){let id = e.detail.valuelet labels  = this.data.labelslabels.push(id[0])this.setData({labels})
},//表单提交formSubmit: function(e) {console.log('form发生了submit事件，携带数据为：', e.detail.value)this.setData({allValue:e.detail.value})let labels  = this.data.labelslet token =wx.getStorageSync('token');let allValue = this.data.allValuewx.request({url: 'http://www.money.com/api/wx/friend_list',data:{token,allValue,labels},method:"POST",success:r=>{console.log(r)if(r.data.code==200){wx.showToast({title: r.data.msg,icon: 'success',duration: 2000,success:function(){setTimeout(function () {//要延时执行的代码wx.navigateTo({url: '/pages/friend/friend'})}, 2000) //延迟时间}})}}})}

后端做处理

 //图片上传public function img(Request $request){$file = $request->file('pic');$suffix = $file->getClientOriginalName();//后缀名,判断一下$files = substr(strrchr($suffix, '.'), 1);if($files=='mp4'){$video = Wxserver::videos($file);return $video;}else{$res = Wxserver::alyImg($file);return $res;}}//发布朋友圈public function friend_list(Request $request){$data = $request->except('token');//然后图片做拼接处理$data['allValue']['img'] = implode(',',$data['allValue']['img']);$data['allValue']['l_id'] = implode(',',$data['labels']);unset($data['labels']);Friend_list::create($data['allValue']);return  ['code'=>'200','msg'=>'发布成功','data'=>''];}

阿里云图片存储

//阿里云文件存储public static  function  alyImg($filePath){$accessKeyId = "LTAI5t89a2M3qLbimbpYTtAz";$accessKeySecret = "QrQueYS6bL0Yqic10R9WTtNwcgUyHK";// Endpoint以杭州为例，其它Region请按实际情况填写。$endpoint = "http://oss-cn-shanghai.aliyuncs.com";// 设置存储空间名称。$bucket= "zxyyxz";$object =  time().rand(1,999999).'.png';try{$ossClient = new OssClient($accessKeyId, $accessKeySecret, $endpoint);$path = $ossClient->uploadFile($bucket, $object, $filePath);} catch(OssException $e) {printf(__FUNCTION__ . ": FAILED\n");printf($e->getMessage() . "\n");return;}return 'http://www.1902.zxyxh.com'.$object;}

阿里云视频存储

 public static function videos($path){$accessKeyId = "LTAI5t89a2M3qLbimbpYTtAz";$accessKeySecret = "QrQueYS6bL0Yqic10R9WTtNwcgUyHK";$endpoint = "http://oss-cn-shanghai.aliyuncs.com";$bucket= "zxyyxz";$object =  time().rand(1,999999).'.mp4';$uploadFile = $path;/***  步骤1：初始化一个分片上传事件，获取uploadId。*/try {$ossClient = new OssClient($accessKeyId, $accessKeySecret, $endpoint);//返回uploadId。uploadId是分片上传事件的唯一标识，您可以根据uploadId发起相关的操作，如取消分片上传、查询分片上传等。$uploadId = $ossClient->initiateMultipartUpload($bucket, $object);} catch (OssException $e) {printf(__FUNCTION__ . ": initiateMultipartUpload FAILED\n");printf($e->getMessage() . "\n");return;}/** 步骤2：上传分片。*/$partSize = 10 * 1024 * 1024;$uploadFileSize = filesize($uploadFile);$pieces = $ossClient->generateMultiuploadParts($uploadFileSize, $partSize);$responseUploadPart = array();$uploadPosition = 0;$isCheckMd5 = true;foreach ($pieces as $i => $piece) {$fromPos = $uploadPosition + (integer)$piece[$ossClient::OSS_SEEK_TO];$toPos = (integer)$piece[$ossClient::OSS_LENGTH] + $fromPos - 1;$upOptions = array(// 上传文件。$ossClient::OSS_FILE_UPLOAD => $uploadFile,// 设置分片号。$ossClient::OSS_PART_NUM => ($i + 1),// 指定分片上传起始位置。$ossClient::OSS_SEEK_TO => $fromPos,// 指定文件长度。$ossClient::OSS_LENGTH => $toPos - $fromPos + 1,// 是否开启MD5校验，true为开启。$ossClient::OSS_CHECK_MD5 => $isCheckMd5,);// 开启MD5校验。if ($isCheckMd5) {$contentMd5 = OssUtil::getMd5SumForFile($uploadFile, $fromPos, $toPos);$upOptions[$ossClient::OSS_CONTENT_MD5] = $contentMd5;}try {// 上传分片。$responseUploadPart[] = $ossClient->uploadPart($bucket, $object, $uploadId, $upOptions);} catch (OssException $e) {printf(__FUNCTION__ . ": initiateMultipartUpload, uploadPart - part#{$i} FAILED\n");printf($e->getMessage() . "\n");return;}}
// $uploadParts是由每个分片的ETag和分片号（PartNumber）组成的数组。$uploadParts = array();foreach ($responseUploadPart as $i => $eTag) {$uploadParts[] = array('PartNumber' => ($i + 1),'ETag' => $eTag,);}/*** 步骤3：完成上传。*/try {// 执行completeMultipartUpload操作时，需要提供所有有效的$uploadParts。OSS收到提交的$uploadParts后，会逐一验证每个分片的有效性。当所有的数据分片验证通过后，OSS将把这些分片组合成一个完整的文件。$pathVideo =  $ossClient->completeMultipartUpload($bucket, $object, $uploadId, $uploadParts);} catch (OssException $e) {printf(__FUNCTION__ . ": completeMultipartUpload FAILED\n");printf($e->getMessage() . "\n");return;}return 'http://www.1902.zxyxh.com'.$object;}

微信小程序表单含多图上传相关推荐

微信小程序图片(单图多图上传显示)
微信小程序上传图片组件自定义最近在做微信小程序开发的时候,遇到了一个问题,就是图片上传于显示问题,微信自带的感觉用起来还是不方便,于是就萌生了自定义图片上传于显示组件废话不多说直接上代码首先创建 ...
微信小程序表单post提交数据
微信小程序以post方式提交数据踩坑在以post方式提交微信小程序表单数据时,请求头中要添加一条信息 header: {"Content-Type": "applica ...
微信小程序云开发如何实现上传视频以及图片
微信小程序云开发如何实现上传视频以及图片最基础的数据库增删改查,上传到云存储即可实现,附源码 wxml文件 <button bindtap="upload">上传 ...
小程序录音上传服务器,微信小程序录音实现功能并上传(使用node解析接收)
微信小程序录音实现功能并上传(使用node解析接收) 发布时间:2020-09-04 11:59:06 来源:脚本之家阅读:97 作者:weixin_43188227 背景我在开发小程序的时候,有 ...
taro开发微信小程序-添加开发者预览,上传测试版本(十四)
taro开发微信小程序,上传测试版本,如果需要访问网络需要打开调试模式,如果配置了https协议的服务,提示对应的服务器证书无效,那么必须正确配置ssl证书,可以在阿里云或者腾讯云申请. 添加开发者预 ...
微信小程序表单提交php存储,微信小程序实现form表单本地储存数据
本文实例为大家分享了微信小程序实现form表单本地储存数据的具体代码,供大家参考,具体内容如下效果图: 主要利用小程序的getStorage来实现异步本地储存. 小程序目录结构如下: 新建项目前,为 ...
微信小程序表单验证错误提示。
在之前,在做填写表单之类的东西时候,凡是需要判断是否合格的, 我都会给他 wx.showToast({ title: '手机号有误!', icon: 'loading', ...
微信小程序环境下将文件上传到 OSS
步骤 1: 配置 Bucket 跨域客户端进行表单直传到 OSS 时,会从浏览器向 OSS 发送带有 Origin 的请求消息.OSS 对带有 Origin 头的请求消息会进行跨域规则(CORS)的 ...
微信网页开发wx.chooseImage多图上传、预览（已解决）
需求: 1.调用微信jsSDK选图或者拍照(选图支持选多图) 2.选图或者拍照后提供预览,但不把图片下载到服务器 3.提交表单的时候再一并提交,把图片下载到服务器 4.支持编辑页面删除已选图片(此图已 ...

微信小程序表单含多图上传

微信小程序表单含多图上传相关推荐

最新文章

热门文章