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

이 글은 주로 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:''
 },
/**
 * 上传图片
 */
 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 백엔드 코드

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

실행 결과:

콘솔 인쇄 결과:

업로드가 성공했음을 의미합니다!

위 내용은 모두를 위해 제가 정리한 내용입니다. 앞으로 모든 사람에게 도움이 되기를 바랍니다.

관련 기사:

VUE 프레임워크에서 바인딩 이벤트 버블링 방지 문제를 해결하는 방법

JS 포물선 애니메이션을 만드는 방법(자세한 튜토리얼)

에서 변경 이벤트를 해결하는 방법 VUE 청취 창 질문

모니터링 라우팅 변경을 관찰하고 모니터링 개체를 관찰합니다(자세한 튜토리얼)

vue에서 감시 개체 및 해당 값의 변경 사항을 구현하는 방법

위 내용은 WeChat 애플릿을 사용하여 이미지 업로드 기능을 구현하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!