Heim > WeChat-Applet > Mini-Programmentwicklung > Über den Code für das WeChat-Applet zum Hochladen von Bildern auf den Server

Über den Code für das WeChat-Applet zum Hochladen von Bildern auf den Server

不言
Freigeben: 2018-06-23 11:06:38
Original
3304 Leute haben es durchsucht

In diesem Artikel wird hauptsächlich der Beispielcode des WeChat-Applets zum Hochladen von Bildern auf den Server vorgestellt. In dem Artikel stellen wir auch das WeChat-Applet zum Hochladen eines oder mehrerer Bilder vor. Die Methode wird in diesem Artikel ausführlich vorgestellt. Freunde, die sie benötigen, können sich auf

Bilder auf den Server hochladen beziehen:

1. Schreiben Sie zunächst einen Bereich zum Auswählen von Bildern im Frontend, um die wx.chooseImage-Schnittstelle auszulösen, und verwenden Sie die wx.setStorage-Schnittstelle, um den Bildpfad zu speichern.

Über den Code für das WeChat-Applet zum Hochladen von Bildern auf den Server

-wxml
 <view class="shangchuan" bindtap="choose">
  <image style="width:100%;height:100%;" src="{{tempFilePaths}}"></image>
 </view>
 <button formType=&#39;submit&#39; class="fabu">发布项目</button>
 /**选择图片 */
 choose: function () {
  var that = this
  wx.chooseImage({
   count: 1,
   sizeType: [&#39;original&#39;, &#39;compressed&#39;], // 可以指定是原图还是压缩图,默认二者都有
   sourceType: [&#39;album&#39;, &#39;camera&#39;], // 可以指定来源是相册还是相机,默认二者都有
   success: function (res) {
    var tempFilePaths = res.tempFilePaths
    that.setData({
     tempFilePaths: res.tempFilePaths
    })
    console.log(res.tempFilePaths)
    wx.setStorage({ key: "card", data: tempFilePaths[0] })
   }
  })
 },
Nach dem Login kopieren

2. Verwenden Sie wx.uploadFile, um das gerade hochgeladene Bild auf den Server hochzuladen

 formSubmit2: function (e) {
    var that = this
    var card = wx.getStorageSync(&#39;card&#39;)
    wx.uploadFile({
     url: app.globalData.create_funds,
     filePath: card,
     name: &#39;card&#39;,
     formData: {
      &#39;user_id&#39;: app.globalData.user_id,
      &#39;person&#39;: e.detail.value.person,
      &#39;company&#39;: e.detail.value.company,
     },
     success: function (res) {
      console.log(res)
     }
    })
   }
  }
 },
Nach dem Login kopieren

PS: WeChat-Applet lädt ein oder mehrere Bilder hoch

1 🎜>

1. Wählen Sie ein Bild aus

wx.chooseImage({
   sizeType: [], // original 原图,compressed 压缩图,默认二者都有
   sourceType: [], // album 从相册选图,camera 使用相机,默认二者都有
   success: function (res) {
    console.log(res);
    var array = res.tempFilePaths, //图片的本地文件路径列表
   }
  })
Nach dem Login kopieren

2. Laden Sie ein Bild hoch

wx.uploadFile({
   url: &#39;&#39;, //开发者服务器的 url
   filePath: &#39;&#39;, // 要上传文件资源的路径 String类型!!!
   name: &#39;uploadFile&#39;, // 文件对应的 key ,(后台接口规定的关于图片的请求参数)
   header: {
    &#39;content-type&#39;: &#39;multipart/form-data&#39;
   }, // 设置请求的 header
   formData: { }, // HTTP 请求中其他额外的参数
   success: function (res) {
   },
   fail: function (res) {
   }
  })
Nach dem Login kopieren

2. Codebeispiel

// 点击上传图片
upShopLogo: function () {
  var that = this;
  wx.showActionSheet({
   itemList: [&#39;从相册中选择&#39;, &#39;拍照&#39;],
   itemColor: "#f7982a",
   success: function (res) {
    if (!res.cancel) {
     if (res.tapIndex == 0) {
      that.chooseWxImageShop(&#39;album&#39;)  
     } else if (res.tapIndex == 1) {
      that.chooseWxImageShop(&#39;camera&#39;)
     }
    }
   }
  })
 },
 chooseWxImageShop: function (type) {
  var that = this;
  wx.chooseImage({
   sizeType: [&#39;original&#39;, &#39;compressed&#39;],
   sourceType: [type],
   success: function (res) {
/*上传单张
    that.data.orderDetail.shopImage = res.tempFilePaths[0],
    that.upload_file(API_URL + &#39;shop/shopIcon&#39;, res.tempFilePaths[0])
*/
 /*上传多张(遍历数组,一次传一张)
    for (var index in res.tempFilePaths) {
       that.upload_file(API_URL + &#39;shop/shopImage&#39;, res.tempFilePaths[index])
    }
*/
   }
  })
 },
upload_file: function (url, filePath) {
  var that = this;
  wx.uploadFile({
   url: url,
   filePath: filePath,
   name: &#39;uploadFile&#39;,
   header: {
    &#39;content-type&#39;: &#39;multipart/form-data&#39;
   }, // 设置请求的 header
   formData: { &#39;shopId&#39;: wx.getStorageSync(&#39;shopId&#39;) }, // HTTP 请求中其他额外的 form data
   success: function (res) {
    wx.showToast({
       title: "图片修改成功",
       icon: &#39;success&#39;,
       duration: 700
      })
   },
   fail: function (res) {
   }
  })
 },
Nach dem Login kopieren

Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, er wird für das Studium aller hilfreich sein. Weitere verwandte Inhalte finden Sie auf der chinesischen PHP-Website.

Verwandte Empfehlungen

Das WeChat-Applet implementiert die Funktion zum Ändern der Schriftfarbe durch Klicken auf eine Schaltfläche

WeChat-Applet zu Erhalten Sie den aktuellen Standort, Längengrad, Breitengrad und Kartenanzeige

Ein einfaches Paket zum Herunterladen mehrerer Dateien im WeChat-Applet

Das obige ist der detaillierte Inhalt vonÜber den Code für das WeChat-Applet zum Hochladen von Bildern auf den Server. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage