Comment utiliser l'applet WeChat pour implémenter la fonction de téléchargement d'images-js tutoriel-php.cn

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

亚连

Libérer： 2018-06-12 16:47:57

original

8064 Les gens l'ont consulté

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; />

Copier après la connexion

2, fichier js

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

Copier après la connexion

3. Code backend PHP

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

Copier après la connexion

Résultats en cours d'exécution :