Example of the image upload function (front-end + PHP back-end) implemented by WeChat applets ),

Example of the image upload function of a applet (front-end + PHP backend ),

Preface

Images are used in almost every program. Next we will introduce you to the front-end + PHP backend Implementation of the applet to implement the image upload function, share it for your reference and learning. I will not talk about it below. Let's take a look at the detailed introduction.

The method is as follows:

1. wxml File

<Text> upload an image </text> <view> <button bindtap = "uploadimg"> click to select an upload image </button> </view> <image src = '{source} 'style = 'width: 600rpx; height: 600rpx '/>

Ii. js files

Page (initial data of the {/*** Page */data: {// Initialization is empty source: ''},/*** upload image */uploadimg: function () {var that = this; wx. chooseImage ({// select an image from the local album or take a photo with the camera count: 1, // default 9 sizeType: ['original', 'compressed '], // you can specify whether the source image is an image or a compressed image. Both of them have sourceType: ['alipay', 'camera '] by default. // you can specify whether the source is an album or a camera, both have success by default: function (res) {// console. log (res) // the front-end displays that. setData ({source: res. tempFilePaths}) // returns the local file path list of the selected photo. The tempFilePath can be used as the src attribute of the img label to display the image var tempFilePaths = res. tempFilePaths wx. uploadFile ({url: 'http: // www.website.com/home/api/uploadimg', filePath: tempFilePaths [0], name: 'file', success: function (res) {// print the console. log (res. data )}})}})},)}

Iii. PHP back-end code

// Upload the image public function uploadimg () {$ file = request ()-> file ('file'); if ($ file) {$ info = $ file-> move ('Public/upload/weixin/'); if ($ info) {$ file = $ info-> getSaveName (); $ res = ['errcode' => 0, 'errmsg '=> 'image uploaded successfully', 'file' => $ file]; return json ($ res );}}}

Running result:

Console print result:

The upload is successful!

Summary

The above is all the content of this article. I hope the content of this article has some reference and learning value for everyone's learning or work. If you have any questions, please leave a message to us, thank you for your support.