微信小程序內實現上傳圖片附后端代碼

這次給大家帶來微信小程序內實現上傳圖片附后端代碼，微信小程序內實現上傳圖片的注意事項有哪些，下面就是實戰案例，一起來看一下。愛掏網 - it200.com

當然小程序也是可以上傳圖片的，微信小程序文檔也寫的很清楚。愛掏網 - it200.com

上傳圖片

首先選擇圖片

通過wx.chooseImage(OBJECT)實現

官方示例代碼

wx.chooseImage({
?count:?1,?//?默認9
?sizeType:?['original',?'compressed'],?//?可以指定是原圖還是壓縮圖，默認二者都有
?sourceType:?['album',?'camera'],?//?可以指定來源是相冊還是相機，默認二者都有
?success:?function?(res)?{
?//?返回選定照片的本地文件路徑列表，tempFilePath可以作為img標簽的src屬性顯示圖片
?var?tempFilePaths?=?res.tempFilePaths
?}
})

登錄后復制

圖片最多可以選擇9張, 也可以通過拍攝照片實現，當選擇完圖片之后會獲取到圖片路徑, 這個路徑在本次啟動期間有效。愛掏網 - it200.com
如果需要保存就需要用wx.saveFile(OBJECT)

上傳圖片

通過wx.uploadFile(OBJECT) 可以將本地資源文件上傳到服務器。愛掏網 - it200.com

原理就是客戶端發起一個 HTTPS POST 請求，其中 content-type為 multipart/form-data。愛掏網 - it200.com

官方示例代碼

wx.chooseImage({
?success:?function(res)?{
?var?tempFilePaths?=?res.tempFilePaths
?wx.uploadFile({
??url:?'http://example.weixin.qq.com/upload',?//僅為示例，非真實的接口地址
??filePath:?tempFilePaths[0],
??name:?'file',
??formData:{
??'user':?'test'
??},
??success:?function(res){
??var?data?=?res.data
??//do?something
??}
?})
?}
})

登錄后復制

示例代碼

看完了官方文檔, 寫一個上傳圖片就沒有那么麻煩了,下面是真實場景的代碼

import?constant?from?'../../common/constant';
Page({
?data:?{
?src:?"../../image/photo.png",?//綁定image組件的src
??//略...
?},
?onLoad:?function?(options)?{
??//略...?
?},
?uploadPhoto()?{
?var?that?=?this;?
?wx.chooseImage({
??count:?1,?//?默認9
??sizeType:?['compressed'],?//?可以指定是原圖還是壓縮圖，默認二者都有
??sourceType:?['album',?'camera'],?//?可以指定來源是相冊還是相機，默認二者都有
??success:?function?(res)?{
??//?返回選定照片的本地文件路徑列表，tempFilePath可以作為img標簽的src屬性顯示圖片
??var?tempFilePaths?=?res.tempFilePaths;
??upload(that,?tempFilePaths);
??}
?})
?}
})
function?upload(page,?path)?{
?wx.showToast({
?icon:?"loading",
?title:?"正在上傳"
?}),
?wx.uploadFile({
??url:?constant.SERVER_URL?+?"/FileUploadServlet",
??filePath:?path[0],?
??name:?'file',
??header:?{?"Content-Type":?"multipart/form-data"?},
??formData:?{
??//和服務器約定的token,?一般也可以放在header中
??'session_token':?wx.getStorageSync('session_token')
??},
??success:?function?(res)?{
??console.log(res);
??if?(res.statusCode?!=?200)?{?
???wx.showModal({
???title:?'提示',
???content:?'上傳失敗',
???showCancel:?false
???})
???return;
??}
??var?data?=?res.data
??page.setData({?//上傳成功修改顯示頭像
???src:?path[0]
??})
??},
??fail:?function?(e)?{
??console.log(e);
??wx.showModal({
???title:?'提示',
???content:?'上傳失敗',
???showCancel:?false
??})
??},
??complete:?function?()?{
??wx.hideToast();?//隱藏Toast
??}
?})
}

登錄后復制

后端代碼

后端是用java寫的，一開始的時候，后端開始用了一些框架接收上傳的圖片，出現了各種問題，后來使用了純粹的Servlet就沒有了問題, 把代碼貼出來省的以后麻煩了。愛掏網 - it200.com

注意: 代碼使用了公司內部的框架，建議修改后再使用

public?class?FileUploadServlet?extends?HttpServlet?{
?private?static?final?long?serialVersionUID?=?1L;
?private?static?Logger?logger?=?LoggerFactory.getLogger(FileUploadServlet.class);
?public?FileUploadServlet()?{
??super();
?}
?protected?void?doGet(HttpServletRequest?request,?HttpServletResponse?response)?throws?ServletException,?IOException?{
??JsonMessage

登錄后復制

相信看了本文案例你已經掌握了方法，更多精彩請關注愛掏網 - it200.com其它相關文章！

推薦閱讀：

關于js的三種使用方式案例詳解（附代碼）

如何使用微信小程序做出圖片上傳

以上就是微信小程序內實現上傳圖片附后端代碼的詳細內容，更多請關注愛掏網 - it200.com其它相關文章！