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}}">

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

</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>

?js

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;}

總結

以上是生活随笔為你收集整理的微信小程序表单含多图上传的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。