> 위챗 애플릿 > 미니 프로그램 개발 > WeChat 애플릿 개발 사진 업로드 + 서버 수신 튜토리얼

WeChat 애플릿 개발 사진 업로드 + 서버 수신 튜토리얼

黄舟
풀어 주다: 2017-01-20 17:30:27
원래의
4069명이 탐색했습니다.

이번에는 미니프로그램에서 흔히 사용되는 이미지 업로드 방법을 소개하겠습니다.

며칠전에 이미지 업로드 기능을 사용해봤는데 속았네요. 다음으로 WeChat의 업로드 API를 살펴보겠습니다.

WeChat 애플릿 개발 사진 업로드 + 서버 수신 튜토리얼

여기서 filePath는 이미지의 저장 경로이고 유형은 실제로 문자열이므로 한 번에 하나의 이미지만 전송할 수 있습니다. 저는 PHP 경험이 반밖에 없어서 이미지 수신 인터페이스만 직접 변경할 수 있습니다.

페이지 렌더링 보기

WeChat 애플릿 개발 사진 업로드 + 서버 수신 튜토리얼

아바타 수정의 아주 일반적인 효과로, 사진을 선택(촬영)한 후 업로드합니다.

다음 코드는

먼저 미니 프로그램의 wxml 코드입니다

<view class="xd-container">
<form bindsubmit="bindSaveTap">
<image class="xd-img-user1" catchtap="chooseImageTap" src="{{logo}}"></image>
<view class="xd-view-section">
 <text class="xd-abs xd-flex-left xd-text-nick">昵称</text>
 <input name="nick_name" placeholder="请输入昵称" class="xd-input" value="{{userInfo.user_name}}"/>
</view>
<view class="xd-view-section1">
 <text class="xd-abs xd-flex-left xd-text-nick">宝宝性别</text>
 <radio-group class="xd-abs xd-radio-group" name="baby_sex">
 <label class="xd-label-radio" wx:for="{{sex_items}}" wx:key="item">
 <radio color="#3cc975" value="{{item.name}}" wx:if="{{item.name==userInfo.baby_sex}}" checked="true"/>
 <radio color="#3cc975" value="{{item.name}}" wx:else checked="false"/>
 <text class="xd-radio-text">{{item.value}}</text>
 </label>
 </radio-group>
</view>
<view class="xd-view-section1">
 <text class="xd-abs xd-flex-left xd-text-nick">宝宝年龄</text>
 <input placeholder="请输入年龄" wx:if="{{userInfo.baby_age != 0}}" value="{{userInfo.baby_age}}" class="xd-input"/>
 <input name="baby_age" placeholder="请输入年龄" wx:else value="" class="xd-input"/>
</view>
<button size="default" class="xd-abs xd-subBtn" formType="submit" hover-class="xd-subBtn-hover">保存</button>
</form>
</view>
로그인 후 복사

css 코드는 안 올리고 몇 가지 스타일만 올려보겠습니다.

해당 JS 코드

var util = require(&#39;../../../utils/util.js&#39;)
var app = getApp()
Page({
 data: {
sex_items: [
 {name:&#39;1&#39;, value:&#39;小王子&#39;},
 {name:&#39;2&#39;, value:&#39;小公主&#39;},
 {name:&#39;0&#39;, value:&#39;尚无&#39;}
],
logo:null,
 
userInfo: {}
 },
 
 //事件处理函数
 bindViewTap: function() {
wx.navigateTo({
 // url: &#39;../logs/logs&#39;
// url: &#39;../load/load&#39;
})
 },
 onLoad: function () {
console.log(&#39;onLoad&#39;)
var that = this
//调用应用实例的方法获取全局数据
app.getUserInfo(function(userInfo){
 //更新数据
 console.log(userInfo);
 that.setData({
 userInfo:userInfo,
 logo:userInfo.logo
 })
})
 },
 
 bindSaveTap: function(e){
console.log(e)
var formData = {
 uid:util.getUserID(),
 user_name:e.detail.value.nick_name,
 baby_sex:e.detail.value.baby_sex,
 baby_age:e.detail.value.baby_age
}
 console.log(formData)
app.apiFunc.upload_file(app.apiUrl.modify_user, this.data.logo, &#39;photos&#39;, formData, 
function(res){
 console.log(res);
},
function(){
})
 }, 
 
 chooseImageTap: function(){
let _this = this;
wx.showActionSheet({
 itemList: [&#39;从相册中选择&#39;, &#39;拍照&#39;],
 itemColor: "#f7982a",
 success: function(res) {
 if (!res.cancel) {
 if(res.tapIndex == 0){
 _this.chooseWxImage(&#39;album&#39;)
 }else if(res.tapIndex == 1){
 _this.chooseWxImage(&#39;camera&#39;)
 }
 }
 }
})
 
 },
chooseWxImage:function(type){
let _this = this;
wx.chooseImage({
 sizeType: [&#39;original&#39;, &#39;compressed&#39;],
 sourceType: [type],
 success: function (res) {
 console.log(res);
 _this.setData({
 logo: res.tempFilePaths[0],
 })
 }
 })
 }
})
로그인 후 복사

JS 코드를 중심으로 설명

1. chooseImageTap 메소드

는 선택 이미지를 표시하고 photo 팝업창은 WeChat의 페이지 인터랙티브 API인 showActionSheet를 사용합니다.

작업 메뉴 표시

2.WxImage 방법 선택

주로 사진을 선택하고 사진 경로 콜백을 받는 데 사용되는 모니터입니다. 자세한 사용법을 보려면 클릭하세요

로컬 앨범에서 사진을 선택하거나 카메라를 사용하여 사진을 찍습니다

3. 업로드

chooseWxImage 메소드의 성공 콜백에서 반환된 이미지 경로 res.tempFilePaths[0]를 로고에 할당한 것을 볼 수 있습니다. 업로드 메소드를 호출하세요. WeChat의 uploadFile 메소드는 잠시 후 upload_file이 되었습니다.

uploadFile 메소드

//上传文件
function upload_file(url, filePath, name, formData, success, fail) {
console.log(&#39;a=&#39;+filePath)
wx.uploadFile({
 url: rootUrl + url,
 filePath:filePath,
 name:name,
 header: {
 &#39;content-type&#39;:&#39;multipart/form-data&#39;
 }, // 设置请求的 header
 formData: formData, // HTTP 请求中其他额外的 form data
 success: function(res){
 console.log(res);
 if(res.statusCode ==200 && !res.data.result_code){
 typeof success == "function" && success(res.data);
 }else{
 typeof fail == "function" && fail(res);
 }
 },
 fail: function(res) {
 console.log(res);
 typeof fail == "function" && fail(res);
  }
 })
}
로그인 후 복사

filePath는 이미지의 절대 경로인 upload_file에 전달한 로고 변수입니다.

서버의 이미지 수신 코드

로그인 프로세스에 대한 이전 글을 읽어보신 분들은 제 서버가 PHP 프레임워크인 Laravel을 사용한다는 사실을 잘 아실 것입니다.

여기서는 이미지 수신 코드만 게시하겠습니다.

if(!empty($_FILES[&#39;photos&#39;])){
  $up_arr[&#39;logo&#39;] = upload_logo(&#39;photos&#39;,&#39;manage/images/user&#39;,&#39;logo&#39;,$user_id,0);
  $up_arr[&#39;logo&#39;] = $up_arr[&#39;logo&#39;][0];
  $user_info[&#39;logo&#39;] = $Server_Http_Path . $up_arr[&#39;logo&#39;];
}
로그인 후 복사

핵심 방법은 upload_log에 있습니다.

사진 받고 저장하기

if( !function_exists(&#39;upload_logo&#39;)){
 function upload_logo( $key_name=&#39;photos&#39;, $logo_path=&#39;manage/images/nurse&#39;, $pre_name=&#39;logo&#39;, $salt=&#39;20160101&#39;,$encode = 1,$make=0 ){
  $result_arr = array();
  global $Server_Http_Path,$App_Error_Conf;
  //分文件夹保存 
  $date_info = getdate();
  $year = $date_info[&#39;year&#39;];
  $mon = $date_info[&#39;mon&#39;];
  $day = $date_info[&#39;mday&#39;];
  $logo_path = sprintf("%s/%s/%s/%s",$logo_path,$year,$mon,$day);
  if(!is_dir($logo_path)){
   $res=mkdir($logo_path,0777,true);
  }
  //图片上传
  //foreach($photos as $key => $photo ){
  $photo = $_FILES[&#39;photos&#39;];
  $name = $key_name;
 
  $file_id = Input::file($name);
  if(!empty($file_id) && $file_id -> isValid()){
   $entension = $file_id -> getClientOriginalExtension();
   if($pre_name == &#39;baby&#39;){
    $new_name = $pre_name . "_" . intval($salt) ."_" .time() . "_" . salt_rand(2,2);
   }else {
    $new_name = $pre_name . "_" . intval($salt) ."_" . salt_rand(2,2);
   }
   $path_id = $file_id -> move($logo_path,$new_name."_b.".$entension);
   if(!empty($path_id)){
    $path_name = $path_id->getPathName();
    $image_size=getimagesize($path_name);
 $weight=$image_size["0"];////获取图片的宽 
 
$height=$image_size["1"];///获取图片的高
if($pre_name == "baby" || $pre_name == "video") {   
 
   $photo_info[&#39;url&#39;] = $path_name;  
 
   $photo_info[&#39;width&#39;] = $weight;
  $photo_info[&#39;height&#39;] = $height;
 $result_arr[] = $photo_info;
 }else{
 $result_arr[] = $path_name;
 } 
    //处理图片
if($make == 1){
 $img = Image::make($path_name)->resize(200, $height*200/$weight);
$img->save($logo_path ."/".$new_name."_s.".$entension);
 //dd($img);
 // return $img->response(&#39;jpg&#39;);
    }
   }
if(empty($result_arr)){
 $response[&#39;result_code&#39;] = -1006;
 $response[&#39;result_msg&#39;] = $App_Error_Conf[-1006];
  return response($response);
   }
 if($encode == 1){
    $result_arr = json_encode($result_arr);
   }
  }
  return $result_arr;
 }
 }
로그인 후 복사

이 코드 형식이 너무 귀찮아서 그냥 정리했습니다.

이렇게 해서 미니프로그램의 이미지 업로드와 인터페이스 기능을 시작하게 되었습니다.

위 내용은 위챗 애플릿 개발을 위한 이미지 업로드 + 서버 수신 튜토리얼 내용입니다. 더 많은 관련 내용은 PHP 중국어 홈페이지(m.sbmmt.com)를 참고해주세요!


원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿