PHP implementiert die Bildauswahl, das Hochladen auf den Server und die Vorschau im WeChat-Applet-PHP-Tutorial-php.cn

PHP implementiert die Bildauswahl, das Hochladen auf den Server und die Vorschau im WeChat-Applet

不言

Freigeben： 2023-04-01 16:24:01

Original

2720 Leute haben es durchsucht

In diesem Artikel werden hauptsächlich relevante Informationen zur Bildauswahl des WeChat-Miniprogramms, zum Hochladen auf den Server und zu Implementierungsbeispielen für die Vorschau (PHP) vorgestellt. Freunde in Not können sich auf

Bildauswahl des WeChat-Miniprogramms beziehen. Implementierungsbeispiel für Hochladen auf Server, Vorschau (PHP)

Miniprogramm implementiert Bildauswahl, Vorschau und Hochladen auf Entwicklerserver

TP3.2-Bild-Upload im Hintergrund verwendet

Der Header-Verweis bei der Anfrage kann entfernt werden (wird für Berechtigungen zur Überprüfung des persönlichen Hintergrunds verwendet)

Miniprogramm-Frontend-Code:

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

Nach dem Login kopieren

Miniprogramm-JS-Code:

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链接列表
  })
 }

Nach dem Login kopieren

PHP-Hintergrundcode

/ /Bild hochladen

public function upload(){
if(IS_POST){
$upload = new \Think\Upload();// 实例化上传类
$upload->maxSize  =   3145728 ;// 设置附件上传大小
$upload->exts   =   array(&#39;jpg&#39;, &#39;gif&#39;, &#39;png&#39;, &#39;jpeg&#39;);// 设置附件上传类型
$upload->rootPath =   &#39;./Uploads/&#39;; // 设置附件上传根目录
$upload->savePath =   &#39;&#39;; // 设置附件上传（子）目录
// 上传文件 
$info  =  $upload->upload();
if(!$info) {// 上传错误提示错误信息
  $this->error($upload->getError());
}else{// 上传成功 获取上传文件信息
//插入到数据库中
}
}
}

Nach dem Login kopieren

Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, dass er für das Studium aller hilfreich ist zur chinesischen PHP-Website!

Verwandte Empfehlungen:

So verwenden Sie PHP zum Exportieren von Daten in Taobao Assistant CSV

PHP implementiert die öffentliche WeChat-Plattform für Unternehmen Schnittstelle zur Kontobestätigung

Das obige ist der detaillierte Inhalt vonPHP implementiert die Bildauswahl, das Hochladen auf den Server und die Vorschau im WeChat-Applet. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!