思路: 實現(xiàn)圖片上傳我們需要使用chooseImg和uploadFile這兩個api。
1. 微信小程序中的chooseImg是一個API,用于在用戶相冊或相機中選擇圖片上傳。它可以讓用戶在小程序中選擇上傳圖片,以便進行下一步操作,例如將其發(fā)送給朋友或?qū)⑵渖蟼鞯椒?wù)器。
2. 使用chooseImg API,您可以通過以下步驟實現(xiàn)在小程序中選擇圖片上傳:
步驟:
1. 在wxml文件中添加一個按鈕或其他可觸摸元素,以觸發(fā)選擇圖片的操作。
2. 在js文件中使用wx.chooseImage(options)函數(shù)來觸發(fā)選擇圖片的操作。
3. 在options參數(shù)中,可以設(shè)置maximum選項以限制用戶選擇的圖片數(shù)量,可以設(shè)置sizeType選項以限制圖片的大小,可以設(shè)置sourceType選項以限制圖片源(相冊或相機)。
4. 選擇完成后,可以使用wx.uploadFile(options)函數(shù)將圖片上傳到服務(wù)器。文章來源:http://www.zghlxwxcb.cn/news/detail-845053.html
代碼:文章來源地址http://www.zghlxwxcb.cn/news/detail-845053.html
1. wxml文件:
<button bindtap="choose_UpImage">選擇圖片進行上傳</button>
1. js文件:
Page({
choose_UpImage: function () {
wx.chooseImage({
count: 1, //count參數(shù)設(shè)置為1,表示選擇一張圖片
sizeType: ['original', 'compressed'],//表示選擇原圖和壓縮圖兩種尺寸的圖片。
sourceType: ['album', 'camera'],//album表示選擇相冊來源的圖片、camera表示相機來源的圖片
success: function (res) {
//通過res.tempFilePaths獲取到選中圖片的臨時文件路徑
var tempFilePaths = res.tempFilePaths
wx.uploadFile({
url: 'https://網(wǎng)址.com/wave/upload/headImg',
//filePath參數(shù)設(shè)置為tempFilePaths[0],表示要上傳的文件路徑,使0用的是選中圖片的臨時文件路徑。
filePath: tempFilePaths[0],
//name參數(shù)設(shè)置為'file”,表示在服務(wù)器接收到的文件的name參數(shù)的值為file
name: 'file',
//表示在服務(wù)器接收到的文件的formData參數(shù)設(shè)置為user:test,formData參數(shù)的值為user:test
formData: {
'user': 'test'
},
success: function (res) {
var fanhui_data = res.data
// {"data":{"src":"statics/uploadfiles/1712036877769.jpg"},"code":0,"msg":""}
console.log('上傳成功,返回的整體數(shù)據(jù)========'+fanhui_data)
//接受的數(shù)據(jù) 需要轉(zhuǎn)化為json數(shù)據(jù)
let JsonSrc = JSON.parse(fanhui_data)
console.log("返回的整體數(shù)據(jù)進行json轉(zhuǎn)換:",JsonSrc)
console.log("上傳成功,返回圖片的路徑========"+JsonSrc.data.src)
},
fail: function (res) {
console.log('上傳失敗')
}
})
}
})
},
})
到了這里,關(guān)于微信小程序中選中手機相冊圖片上傳到服務(wù)器的方法的文章就介紹完了。如果您還想了解更多內(nèi)容,請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章,希望大家以后多多支持TOY模板網(wǎng)!