Comment utiliser l'applet WeChat pour implémenter la fonction de téléchargement d'images

Cet article vous présente principalement le contenu pertinent sur l'applet WeChat pour implémenter la fonction de téléchargement d'images. L'article présente en détail l'exemple de code du front-end + du back-end PHP. Il a une certaine valeur d'apprentissage de référence pour la compréhension de tous. et apprendre. C’est nécessaire. Amis, étudions ensemble.

Préface

Presque tous les programmes doivent utiliser des images. Ensuite, je vais vous présenter l'implémentation front-end + PHP back-end de l'applet WeChat pour réaliser la fonction de téléchargement d'images, et la partager pour votre référence et votre étude. Je ne dirai pas grand-chose ci-dessous, jetons un coup d'œil à. l'introduction détaillée.

La méthode est la suivante :

1. fichier wxml

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

2, fichier js

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. Code backend PHP

// 上传图片
 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);
   }
  }  
 }

Résultats en cours d'exécution :

Résultat de l'impression de la console :

Cela signifie que le téléchargement est réussi !

Ce qui précède est ce que j'ai compilé pour vous. J'espère que cela vous sera utile à l'avenir.

Articles connexes :

Comment résoudre le problème de la prévention de l'échec bouillonnant des événements liés dans le framework VUE

Comment créer du JS animation parabole (Tutoriel détaillé)

Comment résoudre le problème des événements de changement dans la fenêtre d'écoute VUE

regarder écoute les changements de routage et regarde objets d'écoute (tutoriel détaillé)

Comment implémenter les modifications dans les objets de surveillance de la montre et les valeurs correspondantes dans vue

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!