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

這次給大家帶來如何使用微信小程序做出圖片上傳，使用微信小程序做出圖片上傳的注意事項有哪些，下面就是實戰案例，一起來看一下。愛掏網 - it200.com

先來看一下微信小程序的api

來看一下頁面效果

查看大圖

wxml文件代碼：

?
?????
??????
???????
???????營業執照?
???????{{imageList.length}}/{{count[countIndex]}}?
???????
???????
????????
?????????
??????????
???????????
??????????
?????????
????????
????????
?????????
????????
???????
??????
???

登錄后復制

js文件代碼

chooseImage:?function?()?{?
??var?that?=?this;?
??console.log('aaaaaaaaaaaaaaaaaaaa')?
??
??wx.chooseImage({?
???count:?this.data.count[this.data.countIndex],?
???success:?function?(res)?{?
????console.log('ssssssssssssssssssssssssss')?
????//緩存下?
????wx.showToast({?
?????title:?'正在上傳...',?
?????icon:?'loading',?
?????mask:?true,?
?????duration:?2000,?
?????success:?function?(ress)?{?
??????console.log('成功加載動畫');?
?????}?
????})?
?
????console.log(res)?
????that.setData({?
?????imageList:?res.tempFilePaths?
????})?
????//獲取第一張圖片地址?
????var?filep?=?res.tempFilePaths[0]?
????//向服務器端上傳圖片?
????//?getApp().data.servsers,這是在app.js文件里定義的后端服務器地址?
????wx.uploadFile({?
?????url:?getApp().data.servsers?+?'/weixin/wx_upload.do',?
?????filePath:?filep,?
?????name:?'file',?
?????formData:?{?
??????'user':?'test'?
?????},?
?????success:?function?(res)?{?
??????console.log(res)?
??????console.log(res.data)?
??????var?sss=?JSON.parse(res.data)?
??????var?dizhi?=?sss.dizhi;?
??????//輸出圖片地址?
??????console.log(dizhi);?
??????that.setData({?
???????"dizhi":?dizhi?
??????})?
?
??????//do?something??
?????},?fail:?function?(err)?{?
??????console.log(err)?
?????}??
??????});?
???}?
??})?
?},?
?previewImage:?function?(e)?{?
??var?current?=?e.target.dataset.src?
?
??wx.previewImage({?
?
???current:?current,?
???urls:?this.data.imageList?
??})?
?}

登錄后復制

java 后端代碼：

//獲取當前日期時間的string類型用于文件名防重復?
??public?String?dates(){?
?????Date?currentTime?=?new?Date();?
?????SimpleDateFormat?formatter?=?new?SimpleDateFormat("yyyyMMddHHmmss");?
?????String?dateString?=?formatter.format(currentTime);?
?????return?dateString;?
??}?
??@RequestMapping("wx_upload.do")?
??public?void?uploadPicture(HttpServletRequest?request,?HttpServletResponse?response,PrintWriter?writer)?throws?Exception?{?
????System.out.println("進入get方法！");?
??//獲取從前臺傳過來得圖片?
????MultipartHttpServletRequest?req?=(MultipartHttpServletRequest)request;?
????MultipartFile?multipartFile?=?req.getFile("file");?
??//獲取圖片的文件類型?
????String?houzhu=multipartFile.getContentType();?
????int?one?=?houzhu.lastIndexOf("/");?
????System.out.println(houzhu.substring((one+1),houzhu.length()));?
????System.out.println(multipartFile.getName());?
??//根據獲取到的文件類型截取出圖片后綴?
????String?type=houzhu.substring((one+1),houzhu.length());?
????System.out.println(multipartFile.getContentType());?
?
????String?filename;?
??//?request.getRealPath獲取我們項目的根地址在加上我們要保存的地址?
????String?realPath?=?request.getRealPath("/upload/wximg/");?
????try?{?
??????File?dir?=?new?File(realPath);?
??????if?(!dir.exists())?{?
????????dir.mkdir();?
??????}?
??????//獲取到當前的日期時間用戶生成文件名防止文件名重復?
??????String?filedata=this.dates();?
????//生成一個隨機數來防止文件名重復?
??????int?x=(int)(Math.random()*1000);?
??????filename="zhongshang"+x+filedata;?
??????System.out.println(x);?
????將文件的地址和生成的文件名拼在一起?
??????File?file?=?new?File(realPath,filename+"."+type);?
??????multipartFile.transferTo(file);?
????//將圖片在項目中的地址和isok狀態儲存為json格式返回給前臺，由于公司項目中沒有fastjson只能用這個?
??????JSONObject?jsonObject=new?JSONObject();?
??????jsonObject.put("isok",1);?
??????jsonObject.put("dizhi","/upload/wximg/"+filename+"."+type);?
?
??????writer.write(jsonObject.toString());?
????}?catch?(IOException?e)?{?
??????e.printStackTrace();?
????}?catch?(IllegalStateException?e)?{?
??????e.printStackTrace();?
????}?
}

登錄后復制

來看一下之前在前端js輸出的內容：

打開瀏覽器用我們的服務器的地址加上后臺返回json的dizhi字段去訪問這張圖片

我們可以看到圖片已經填入我們的服務器端里了，然后在打開我們服務器端項目根地址下面的/upload/wximg

到這里就大功告成了如果是多張圖片上傳可以在js里面根據要上傳的數量循環上傳。愛掏網 - it200.com

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

推薦閱讀：

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

JS加載方式使用匯總

以上就是如何使用微信小程序做出圖片上傳的詳細內容，更多請關注愛掏網 - it200.com其它相關文章！