Maison > Article > interface Web > Comment utiliser l'applet WeChat pour télécharger des images sur le serveur
Cette fois, je vais vous montrer comment télécharger des images sur le serveur à l'aide de l'applet WeChat. Quelles sont les précautions pour que l'applet WeChat télécharge des images sur le serveur. cas. Jetons un coup d’oeil.
-wxml <view class="shangchuan" bindtap="choose"> <image style="width:100%;height:100%;" src="{{tempFilePaths}}"></image> </view> <button formType='submit' class="fabu">发布项目</button> /**选择图片 */ choose: function () { var that = this wx.chooseImage({ count: 1, sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图,默认二者都有 sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机,默认二者都有 success: function (res) { var tempFilePaths = res.tempFilePaths that.setData({ tempFilePaths: res.tempFilePaths }) console.log(res.tempFilePaths) wx.setStorage({ key: "card", data: tempFilePaths[0] }) } }) },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('card') wx.uploadFile({ url: app.globalData.create_funds, filePath: card, name: 'card', formData: { 'user_id': app.globalData.user_id, 'person': e.detail.value.person, 'company': e.detail.value.company, }, success: function (res) { console.log(res) } }) } } },
PS : l'applet WeChat télécharge une ou plusieurs photos
1.Points clés
1. Sélectionnez des images
wx.chooseImage({ sizeType: [], // original 原图,compressed 压缩图,默认二者都有 sourceType: [], // album 从相册选图,camera 使用相机,默认二者都有 success: function (res) { console.log(res); var array = res.tempFilePaths, //图片的本地文件路径列表 } })
2. Téléchargez des photos
wx.uploadFile({ url: '', //开发者服务器的 url filePath: '', // 要上传文件资源的路径 String类型!!! name: 'uploadFile', // 文件对应的 key ,(后台接口规定的关于图片的请求参数) header: { 'content-type': 'multipart/form-data' }, // 设置请求的 header formData: { }, // HTTP 请求中其他额外的参数 success: function (res) { }, fail: function (res) { } })
2. Exemples de code
// 点击上传图片 upShopLogo: function () { var that = this; wx.showActionSheet({ itemList: ['从相册中选择', '拍照'], itemColor: "#f7982a", success: function (res) { if (!res.cancel) { if (res.tapIndex == 0) { that.chooseWxImageShop('album') } else if (res.tapIndex == 1) { that.chooseWxImageShop('camera') } } } }) }, chooseWxImageShop: function (type) { var that = this; wx.chooseImage({ sizeType: ['original', 'compressed'], sourceType: [type], success: function (res) { /*上传单张 that.data.orderDetail.shopImage = res.tempFilePaths[0], that.upload_file(API_URL + 'shop/shopIcon', res.tempFilePaths[0]) */ /*上传多张(遍历数组,一次传一张) for (var index in res.tempFilePaths) { that.upload_file(API_URL + 'shop/shopImage', res.tempFilePaths[index]) } */ } }) }, upload_file: function (url, filePath) { var that = this; wx.uploadFile({ url: url, filePath: filePath, name: 'uploadFile', header: { 'content-type': 'multipart/form-data' }, // 设置请求的 header formData: { 'shopId': wx.getStorageSync('shopId') }, // HTTP 请求中其他额外的 form data success: function (res) { wx.showToast({ title: "图片修改成功", icon: 'success', duration: 700 }) }, fail: function (res) { } }) },Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres. articles connexes sur le site Web PHP chinois ! Lecture recommandée :
Explication détaillée de l'utilisation de chaînes de modèles dans ES6
Comment utiliser la table dans Bootstrap
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!