Shulou(Shulou.com)05/31 Report--

This article introduces the relevant knowledge of "how to achieve the function of picture upload + server receiving by WeChat Mini Programs". In the operation of actual cases, many people will encounter such a dilemma. Next, let the editor lead you to learn how to deal with these situations! I hope you can read it carefully and be able to achieve something!

Upload api of Wechat.

The filePath here is the storage path of the picture, and the type is actually a String, that is, you can only send one picture at a time. My previous interface is to receive an array, and I am a half-silly PHP, so I can only change the interface to receive pictures by myself.

Take a look at the effect of the page.

A common way to modify the avatar effect is to select the picture (photo) and upload it.

Here is the paste code.

The first is the wxml code of Mini Program.

Nickname Baby gender {{item.value}} Baby Age Save

I won't post the css code, just some styles.

Corresponding JS code

Var util = require ('.. / utils/util.js') var app = getApp () Page ({data: {sex_items: [{name:'1', value:' Little Prince'}, {name:'2', value:' Little Princess'}, {name:'0', value:' not yet'}], logo:null,userInfo: {}} / / event handling function bindViewTap: function () {wx.navigateTo ({/ / url:'.. / logs/logs'// url:'.. / load/load'})}, onLoad: function () {console.log ('onLoad') var that = this// call the method of the application instance to get the global data app.getUserInfo (function (userInfo) {/ / update data 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, 'photos', formData Function (res) {console.log (res) }, function () {})}, chooseImageTap: function () {let _ this = this Wx.showActionSheet ({itemList: ['Select from album', 'photo'], itemColor: "# f7982a", success: function (res) {if (! res.cancel) {if (res.tapIndex = = 0) {_ this.chooseWxImage ('album')} else if (res.tapIndex = = 1) {_ this.chooseWxImage (' camera')})}, chooseWxImage:function (type) {let _ this = this Wx.chooseImage ({sizeType: ['original',' compressed'], sourceType: [type], success: function (res) {console.log (res); _ this.setData ({logo: res.tempFilePaths [0],})

Mainly explain the JS code.

1. ChooseImageTap method

A pop-up window for selecting pictures and taking photos is displayed. An interactive api showActionSheet on a page of Wechat is used. Click to view the detailed use.

Show Action menu

2. ChooseWxImage method

Mainly used to select pictures and receive image path callback monitoring, click to view detailed use

Select a picture from a local album or take a picture with a camera

3. Upload

In the success callback of the chooseWxImage method, we can see that I assigned the returned image path res.tempFilePaths [0] to logo. Now we just need to call the upload method to ok. I encapsulated the uploadFile method of Wechat into upload_file.

UploadFile method

/ / upload file function upload_file (url, filePath, name, formData, success, fail) {console.log ('a='+filePath) wx.uploadFile ({url: rootUrl + url, filePath:filePath, name:name, header: {' content-type':'multipart/form-data'}, / / set other additional form data success: function (res) {console.log (res) in the request header formData: formData, / / HTTP request) If {typeof success = = "function" & & success (res.data);} else {typeof fail = = "function" & & fail (res);}}, fail: function (res) {console.log (res); typeof fail = = "function" & & fail (res);}})}

FilePath is the logo variable we passed in upload_file, that is, the absolute path of the picture.

The receiving picture code of the server

Anyone who read my last article about the login process is familiar with my server using the php framework and Laravel.

Here I will only post the code that receives image.

If (! empty ($_ FILES ['photos'])) {$up_arr [' logo'] = upload_logo ('photos','manage/images/user','logo',$user_id,0); $up_arr [' logo'] = $up_arr ['logo'] [0]; $user_info [' logo'] = $Server_Http_Path. $up_arr ['logo'];}

The core method is in upload_log.

Picture receiving and saving

If (! function_exists ('upload_logo')) {function upload_logo ($key_name='photos', $logo_path='manage/images/nurse', $pre_name='logo', $salt='20160101',$encode = 1 heroic makeup 0) {$result_arr = array (); global $Server_Http_Path,$App_Error_Conf; / / sub-folder save $date_info = getdate (); $year = $date_info [' year']; $mon = $date_info ['mon'] $day = $date_info ['mday']; $logo_path = sprintf ("% s/%s/%s/%s", $logo_path,$year,$mon,$day); if (! is_dir ($logo_path)) {$res=mkdir ($logo_path,0777,true);} / / Image upload / / foreach ($photos as $key = > $photo) {$photo = $FILES [' photos']; $name = $key_name; $file_id = Input::file ($name) If (! empty ($file_id) & & $file_id-> isValid ()) {$entension = $file_id-> getClientOriginalExtension (); if ($pre_name = = 'baby') {$new_name = $pre_name. "_". Intval ($salt). "_" .time () "_". Salt_rand (2);} else {$new_name = $pre_name. "_". Intval ($salt). "_" Salt_rand (2 path_id- 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"]; / get the width of the picture $height=$image_size ["1"] / / get the high if of the picture ($pre_name = = "baby" | | $pre_name = = "video") {$photo_info ['url'] = $path_name; $photo_info [' width'] = $weight; $photo_info ['height'] = $height; $result_arr [] = $photo_info;} else {$result_arr [] = $path_name } / / process 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 ('jpg');}} if (empty ($result_arr)) {$response [' result_code'] =-1006 $response ['result_msg'] = $App_Error_Conf [- 1006]; return response ($response);} if ($encode = = 1) {$result_arr = json_encode ($result_arr);}} return $result_arr;}} "how to upload images + receive images on the server" ends here. Thank you for reading. If you want to know more about the industry, you can follow the website, the editor will output more high-quality practical articles for you!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.