快捷導(dǎo)航

微信小程序中選中手機相冊圖片上傳到服務(wù)器的步驟

更新時間：2024年04月03日 10:00:42 作者：曦月合一

這篇文章主要介紹了微信小程序中選中手機相冊圖片上傳到服務(wù)器的步驟,現(xiàn)圖片上傳我們需要使用chooseImg和uploadFile這兩個api,本文通過實例代碼給大家介紹的非常詳細(xì),需要的朋友參考下吧

思路：

實現(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ù)器。

代碼：

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ù)器的方法的文章就介紹到這了,更多相關(guān)小程序選中圖片上傳服務(wù)器內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: