집 >백엔드 개발 >PHP 튜토리얼 >PHP는 이미지 선택, 서버에 업로드 및 WeChat 애플릿에서 미리보기를 구현합니다.

PHP는 이미지 선택, 서버에 업로드 및 WeChat 애플릿에서 미리보기를 구현합니다.

不言원래의: 2018-06-21 13:47:142776검색

이 글에서는 주로 WeChat 미니 프로그램 이미지 선택, 서버 업로드, 미리보기(PHP) 구현 예시에 대한 정보를 소개합니다. 도움이 필요한 친구들은 참고하세요

WeChat 미니 프로그램 이미지 선택, 서버 업로드, 미리보기( PHP) 구현예

애플릿은 이미지 선택, 이미지 미리보기, 개발자 서버 업로드를 구현합니다

백그라운드에서 사용되는 tp3.2 이미지 업로드

요청 시 헤더 참조를 제거할 수 있습니다(개인용으로 사용). 백그라운드 확인 권한)

미니 프로그램 프론트엔드 코드:

<view class="section">
 <form bindsubmit="bindFormSubmit">
  <textarea placeholder="请输入问题内容" name="content"/>
  <view class="">
   选择提问图片:  <label bindtap="checkimg">点击选择图片</label>
  </view>
  <view class="">
    <image wx:for="{{imglist}}" mode="aspectFit" bindtap="ylimg" src="{{item}}" style="width:75px;height:75px;" src="{{item}}"></image>
  </view>
  <button form-type="submit"> 提交 </button>
 </form>
</view>

미니 프로그램 js 코드:

data: {
  imglist:[]
 },
/**
  * form提交事件
  */
 bindFormSubmit:function(e){
   self=this
   //图片
   var imglist = self.data.imglist
   //提问内容
   var content=e.detail.value.content;
   if(content==&#39;&#39;){
    wx.showToast({
     title: &#39;内容不能为空&#39;,
     icon: &#39;loading&#39;,
     duration: 1000,
     mask:true
    })
   }
   wx.showLoading({
    title: &#39;正在提交...&#39;,
    mask:true
   })
   //添加问题
   wx.request({
    url: &#39;https://xxxxxxxxxx/index.PHP?g=user&m=center&a=createwt&#39;,
    data: {
     content:content
    },
    method: &#39;GET&#39;, // OPTIONS, GET, HEAD, POST, PUT, DELETE, TRACE, CONNECT
    header: app.globalData.header, // 设置请求的 header
    success: function (res) {
     // success
     if(typeof(res.data)==&#39;number&#39;){
      if (imglist != &#39;&#39;) {
       //开始插入图片
       for(var i=0;i<imglist.length;i++){
        //上传至服务器
        wx.uploadFile({
         url: &#39;https://xxxxxxxx/index.php?g=user&m=center&a=upload&#39;, //仅为示例，非真实的接口地址
         filePath: imglist[0],
         name: &#39;files&#39;,
         formData: {
          &#39;wtid&#39;: res.data
         },
         header: app.globalData.header,
         success: function (res) {
          if(i>=imglist.length){
           self.setData({
            imglist:[]
           })
           wx.hideLoading();
           wx.showToast({
            title: &#39;提问成功&#39;,
            icon: &#39;success&#39;,
            duration: 2000,
            mask: true
           })
           wx.navigateBack({
            delta: 1
           })
          }
         }
        })
       }
       console.log(imglist);
      }else{
       wx.hideLoading();
       wx.showToast({
        title: &#39;提问成功&#39;,
        icon: &#39;success&#39;,
        duration: 2000,
        mask: true
       })
       wx.navigateBack({
        delta: 1
       })
      }
     }else{
      wx.hideLoading();
      wx.showToast({
       title: res.data,
       icon: &#39;loading&#39;,
       duration: 1000,
       mask: true
      })
     }
    },
    fail: function (res) {
     self.onLoad();
    }
   })
 },
 //点击选择图片
 checkimg:function(){
   console.log(&#39;点击选择图片&#39;);
   self=this
   wx.chooseImage({
    count: 9, // 默认9
    sizeType: [&#39;original&#39;, &#39;compressed&#39;], // 可以指定是原图还是压缩图，默认二者都有
    sourceType: [&#39;album&#39;, &#39;camera&#39;], // 可以指定来源是相册还是相机，默认二者都有
    success: function (res) {
     // 返回选定照片的本地文件路径列表，tempFilePath可以作为img标签的src属性显示图片
     var tempFilePaths = res.tempFilePaths
     self.setData({
      imglist:tempFilePaths
     })
    }
   })
 },
 //点击预览图片
 ylimg:function(e){
  wx.previewImage({
   current: e.target.dataset.src,
   urls: this.data.imglist // 需要预览的图片http链接列表
  })
 }

php 백엔드 코드

//이미지 업로드

rreee

위 내용은 이 글의 전체 내용입니다. 모든 분들의 학습에 도움이 되었으면 좋겠습니다. 더 많은 관련 내용은 PHP 중국어 홈페이지를 주목해주세요!

PHP는 이미지 선택, 서버에 업로드 및 WeChat 애플릿에서 미리보기를 구현합니다.

관련 기사