這篇文章主要介紹了微信小程序上傳圖片到服務(wù)器的實(shí)例代碼，在文章給大家補(bǔ)充介紹了微信小程序上傳一或多張圖片 的方法，本文給大家介紹的非常詳細(xì)，具有參考借鑒加載,需要的朋友可以參考下
上傳圖片到服務(wù)器：
1.先在前端寫一個(gè)選擇圖片的區(qū)域來(lái)觸發(fā)wx.chooseImage接口并用wx.setStorage接口把圖片路徑存起來(lái)。
-wxml
<view class="shangchuan" bindtap="choose">
<image style="width:100%;height:100%;" src="{{tempFilePaths}}"></image>
</view>
<button formType='submit' class="fabu">發(fā)布項(xiàng)目</button>
/**選擇圖片 */
choose: function () {
var that = this
wx.chooseImage({
count: 1,
sizeType: ['original', 'compressed'], // 可以指定是原圖還是壓縮圖，默認(rèn)二者都有
sourceType: ['album', 'camera'], // 可以指定來(lái)源是相冊(cè)還是相機(jī)，默認(rèn)二者都有
success: function (res) {
var tempFilePaths = res.tempFilePaths
that.setData({
tempFilePaths: res.tempFilePaths
})
console.log(res.tempFilePaths)
wx.setStorage({ key: "card", data: tempFilePaths[0] })
}
})
},
登錄后復(fù)制
2.使用wx.uploadFile將剛才上傳的圖片上傳到服務(wù)器上
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)
}
})
}
}
},
登錄后復(fù)制
PS： 微信小程序上傳一或多張圖片
一.要點(diǎn)
1.選取圖片
wx.chooseImage({
sizeType: [], // original 原圖，compressed 壓縮圖，默認(rèn)二者都有
sourceType: [], // album 從相冊(cè)選圖，camera 使用相機(jī)，默認(rèn)二者都有
success: function (res) {
console.log(res);
var array = res.tempFilePaths, //圖片的本地文件路徑列表
}
})
登錄后復(fù)制
2.上傳圖片
wx.uploadFile({
url: '', //開發(fā)者服務(wù)器的 url
filePath: '', // 要上傳文件資源的路徑 String類型?。?！
name: 'uploadFile', // 文件對(duì)應(yīng)的 key ,(后臺(tái)接口規(guī)定的關(guān)于圖片的請(qǐng)求參數(shù))
header: {
'content-type': 'multipart/form-data'
}, // 設(shè)置請(qǐng)求的 header
formData: { }, // HTTP 請(qǐng)求中其他額外的參數(shù)
success: function (res) {
},
fail: function (res) {
}
})
登錄后復(fù)制
二.代碼示例
// 點(diǎn)擊上傳圖片
upShopLogo: function () {
var that = this;
wx.showActionSheet({
itemList: ['從相冊(cè)中選擇', '拍照'],
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])
*/
/*上傳多張（遍歷數(shù)組，一次傳一張）
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'
}, // 設(shè)置請(qǐng)求的 header
formData: { 'shopId': wx.getStorageSync('shopId') }, // HTTP 請(qǐng)求中其他額外的 form data
success: function (res) {
wx.showToast({
title: "圖片修改成功",
icon: 'success',
duration: 700
})
},
fail: function (res) {
}
})
},
登錄后復(fù)制
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，更多相關(guān)內(nèi)容請(qǐng)關(guān)注PHP中文網(wǎng)！
相關(guān)推薦
以上就是關(guān)于微信小程序上傳圖片到服務(wù)器的代碼的詳細(xì)內(nèi)容，更多請(qǐng)關(guān)注有卡有網(wǎng)。
