ASP.net Ap 上傳圖檔 與 api 串接範例



前一陣子,一個專案中 使用了 Web 界面讓使用者上傳圖片,本來也沒啥好說的,但因為後來該專案還有衍生出 手機App及PC版桌面程式,而這些衍生的玩意也都要上傳圖片,所以紀錄一下囉


這裡所謂的上傳圖片,不是給使用者一個界面去選擇圖檔,而可能是 直接讀取一個圖檔,或者從 攝影機鏡頭 取得畫面,或者是擷取螢幕正在執行的畫面等,反正方法都一樣,用讀取圖檔直接可以說完上傳的部份,至於取得螢幕畫面的部份,那是另一件事情而已。

縮然這些PC版 及 App 不是我的專案範圍,但碰到合作廠商不知道該怎樣撰寫,所以就有了這個簡單的範例囉





1. 目標是 一個網址,要傳送資料及圖檔上去

2. 不是讓使用者選擇圖檔上傳,應該比較類似直接自拍後自動上傳圖檔


很顯然,表單會是 multipart/form-data 格式,得自己組合傳送的欄位及圖檔字串,最後POST資料出去接收回應即可。



'要傳送的圖檔,或改成其他來源
Dim filePath As String = "C:\A.png"
Dim fileName As String = System.IO.Path.GetFileName(filePath)
'接收端URL
Dim url As String = "http://xxx.xxx.xxx.xxx/receiver.aspx"
'編碼方式
Dim enc As System.Text.Encoding = _
System.Text.Encoding.GetEncoding("UTF-8")
'區隔分割字元
Dim boundary As String = System.Environment.TickCount.ToString()

然後建議使用HttpWebRequest

'使用HttpWebRequest
Dim req As System.Net.HttpWebRequest = _
CType(System.Net.WebRequest.Create(url), _
System.Net.HttpWebRequest)
'POST方式傳遞
req.Method = "POST"
'ContentType設定
req.ContentType = "multipart/form-data; boundary=" + boundary

接著要開始組合了


'POST 傳送的欄位組合
Dim postData As String = ""
postData = "--" + boundary + vbCrLf + _
"Content-Disposition: form-data; name=""欄位名稱1""" + _
vbCrLf + vbCrLf + "欄位名稱1的值" + vbCrLf + _
"--" + boundary + vbCrLf + _
"Content-Disposition: form-data; name=欄位名稱2" + _
vbCrLf + vbCrLf + "欄位名稱2的值" + vbCrLf + _
"--" + boundary + vbCrLf + _
"Content-Disposition: form-data; name=""圖檔欄位Photofile""; filename=""" + _
fileName + """" + vbCrLf + _
"Content-Type: image/png" + vbCrLf + _
"Content-Transfer-Encoding: binary" + vbCrLf + vbCrLf
' 組合成果就是 postData
'轉換為 Bytes 陣列
Dim startData As Byte() = enc.GetBytes(postData)
postData = vbCrLf + "--" + boundary + "--" + vbCrLf
Dim endData As Byte() = enc.GetBytes(postData)
後續:
http://bbs.flash2u.com.tw/dispbbs_58_870099_1_1.html