微信小程式實現上傳照片程式碼例項解析
阿新 • • 發佈:2020-08-05
紙上談坑
在我實現了這個功能之前,我講講我是怎麼在這個坑裡爬上來的:
我實現上傳檔案後端的介面的引數是String型別的
前臺傳的引數:http://tmp/wx忽略很多字母數字.png
但由於這張是本地照片url(外網無法訪問),我後臺拿到的是一個String型別,是沒有辦法是去識別這是一張圖片的,訪問不了這個資料,僅僅把它當做字串而已。(低階錯誤)
程式碼實現
前言:後端接受檔案有2種方式(引數): 1. MultipartFile 2.base64
微信上傳檔案的開發文件
小程式程式碼
<!-- index.wxml --> <view> <view>檔案上傳</view> <view> <input id="file" type="file" bindtap="uploader"></input> </view> </view> // index.js Page({ data: { },uploader: function () { wx.chooseImage({ count: 1,success: function(res) { let imgPath = res.tempFilePaths[0] wx.uploadFile({ url: 'http://localhost:8080/customerRegister/uploadPricture',filePath: imgPath,name: 'files',success:res=>{ console.log(res) } }) } }) },})
java後端程式碼
@RequestMapping(value = "/customerRegister",produces = "application/json;charset=utf-8") public class { @RequestMapping("/uploadPricture") @ResponseBody public String uploadPricture(@RequestParam("file") MultipartFile[] file) throws IOException { MultipartFile multipartFile = file[0]; System.out.println("圖片名稱:"+multipartFile.getOriginalFilename()); InputStream inputStream = multipartFile.getInputStream(); return "{"mas":"ok"}"; }
P.s. 注意:這是一個ssm專案,因此你需要在pom.xml中新增依賴和在springmvc.xml中新增以下程式碼(這個問題搞了我幾個小時,因為少了上傳檔案的配置,就會導致multipartfile這個類失效)
<!--pom.xml 檔案上傳所需要的依賴--> <dependency> <groupId>commons-fileupload</groupId> <artifactId>commons-fileupload</artifactId> <version>1.3.3</version> </dependency> <!--springmvc.xml--> <!-- SpringMVC上傳檔案時,需要配置MultipartResolver處理器 --> <bean id="multipartResolver" class="org.springframework.web.multipart.commons.CommonsMultipartResolver"> <property name="defaultEncoding" value="UTF-8"></property> <!-- 指定所上傳的總大小不能超過1T。注意maxUploadSize屬性的限制不是針對單個檔案,而是所有檔案 --> <property name="maxUploadSize" value="10485760000" /> <property name="maxInMemorySize" value="40960" /> </bean>
以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支援我們。