Maison > Applet WeChat > Développement de mini-programmes > À propos du code de l'applet WeChat pour télécharger des images sur le serveur

À propos du code de l'applet WeChat pour télécharger des images sur le serveur

不言
Libérer: 2018-06-23 11:06:38
original
3304 Les gens l'ont consulté

Cet article présente principalement l'exemple de code de l'applet WeChat téléchargeant des images sur le serveur. Dans l'article, nous présenterons également l'applet WeChat pour télécharger une ou plusieurs images. Cet article vous présente la méthode en détail, avec le chargement des références. Les amis qui en ont besoin peuvent se référer à

Télécharger des images sur le serveur :

<.>1. Écrivez d'abord une zone de sélection d'images sur le front-end pour déclencher l'interface wx.chooseImage et utilisez l'interface wx.setStorage pour enregistrer le chemin de l'image.

À propos du code de lapplet WeChat pour télécharger des images sur le serveur

-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] })
   }
  })
 },
Copier après la connexion

2. Utilisez wx.uploadFile pour télécharger l'image que vous venez de télécharger sur le serveur

 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)
     }
    })
   }
  }
 },
Copier après la connexion

PS : l'applet WeChat télécharge une ou plusieurs photos

1 . Points clés

1. Sélectionnez les images

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

2. . Téléchargez des images

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) {
   }
  })
Copier après la connexion

2. Exemple de code

// 点击上传图片
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) {
   }
  })
 },
Copier après la connexion

Ce qui précède est l'intégralité du contenu de cet article. J'espère qu'il sera utile à l'étude de chacun. Pour plus de contenu connexe, veuillez faire attention au site Web PHP chinois !

Recommandations associées

L'applet WeChat implémente la fonction de changement de couleur de police en cliquant sur un bouton

Applet WeChat pour obtenir la position actuelle Longitude, latitude et affichage de la carte

Un package simple pour télécharger plusieurs fichiers dans l'applet WeChat

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal