WeChat 애플릿을 사용하여 이미지 업로드 기능을 구현하는 방법-JS 튜토리얼-php.cn

WeChat 애플릿을 사용하여 이미지 업로드 기능을 구현하는 방법

亚连

풀어 주다： 2018-06-12 16:47:57

원래의

8051명이 탐색했습니다.

이 글은 주로 WeChat 애플릿의 이미지 업로드 기능에 대한 관련 내용을 소개합니다. 이 글에서는 프론트엔드 + PHP 백엔드의 샘플 코드를 자세히 소개합니다. 이는 모든 사람의 이해와 학습을 위한 특정 참고 학습 가치를 가지고 있습니다. 누가 필요로 하는지 함께 배워봅시다.

머리말

거의 모든 프로그램에서는 그림을 사용해야 합니다. 다음으로 이미지 업로드 기능을 구현하기 위한 WeChat 애플릿의 프런트엔드 + PHP 백엔드 구현을 소개하고 참고 및 학습을 위해 공유하겠습니다. 아래에서는 자세히 설명하지 않겠습니다. 자세한 소개.

방법은 다음과 같습니다.

1. wxml 파일

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

로그인 후 복사

2. 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)
   }
  })
  
  }
 })
 },)}

로그인 후 복사

3. 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);
   }
  }  
 }

로그인 후 복사

실행 결과: