So verwenden Sie das WeChat-Applet, um die Funktion zum Hochladen von Bildern zu implementieren

Dieser Artikel stellt Ihnen hauptsächlich den relevanten Inhalt des WeChat-Applets zur Implementierung der Bild-Upload-Funktion vor. Der Artikel stellt den Beispielcode des Front-Ends und des PHP-Back-Ends im Detail vor. Er hat einen gewissen Referenz-Lernwert für jedermanns Verständnis und Lernen ist nötig. Freunde, lasst uns gemeinsam lernen.

Vorwort

Fast jedes Programm muss Bilder verwenden. Als nächstes werde ich Ihnen die Front-End- und PHP-Back-End-Implementierung des WeChat-Applets vorstellen, um die Bild-Upload-Funktion zu realisieren, und sie als Referenz und zum Studium weitergeben. Ich werde im Folgenden nicht viel sagen, werfen wir einen Blick darauf die ausführliche Einleitung.

Die Methode ist wie folgt:

1. WXML-Datei

<text>上传图片</text>
<view>
<button bindtap="uploadimg">点击选择上传图</button>
</view>
<image src=&#39;{{source}}&#39; style=&#39;width:600rpx; height:600rpx&#39; />

2. js-Datei

Page({
 /**
 * 页面的初始数据
 */
 data: {　　//初始化为空
 source:''
 },
/**
 * 上传图片
 */
 uploadimg:function(){
 var that = this;
 wx.chooseImage({ //从本地相册选择图片或使用相机拍照
  count: 1, // 默认9
  sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
  sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
  success:function(res){
  //console.log(res)
  //前台显示
  that.setData({
   source: res.tempFilePaths
  })
  // 返回选定照片的本地文件路径列表，tempFilePath可以作为img标签的src属性显示图片
  var tempFilePaths = res.tempFilePaths
   wx.uploadFile({
   url: 'http://www.website.com/home/api/uploadimg',
   filePath: tempFilePaths[0],
   name: 'file',
   
   success:function(res){
   //打印
   console.log(res.data)
   }
  })
  
  }
 })
 },)}

3. PHP-Backend-Code

// 上传图片
 public function uploadimg()
 {
   $file = request()->file('file');
  if ($file) {
   $info = $file->move('public/upload/weixin/');
   if ($info) {
    $file = $info->getSaveName();
    $res = ['errCode'=>0,'errMsg'=>'图片上传成功','file'=>$file];
    return json($res);
   }
  }  
 }

Ergebnisse ausführen:

Konsolendruck Ergebnis:

Das bedeutet, dass der Upload erfolgreich war!

Ich habe das Obige für Sie zusammengestellt und hoffe, dass es Ihnen in Zukunft hilfreich sein wird.

Verwandte Artikel:

So lösen Sie das Problem der Verhinderung von Blasenfehlern gebundener Ereignisse im VUE-Framework

Wie erstellt man JS? Parabelanimation (Detailliertes Tutorial)

So lösen Sie das Problem von Änderungsereignissen im VUE-Abhörfenster

Beobachten Sie, ob sich Routingänderungen ergeben, und beobachten Sie Abhörobjekte (ausführliches Tutorial)

So implementieren Sie Änderungen an Überwachungsobjekten und entsprechenden Werten in Vue

Das obige ist der detaillierte Inhalt vonSo verwenden Sie das WeChat-Applet, um die Funktion zum Hochladen von Bildern zu implementieren. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!