1. 程式人生 > 程式設計 >微信小程式實現上傳照片程式碼例項解析

微信小程式實現上傳照片程式碼例項解析

紙上談坑

在我實現了這個功能之前,我講講我是怎麼在這個坑裡爬上來的:

我實現上傳檔案後端的介面的引數是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>

以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支援我們。