위챗 애플릿 사진 코드 업로드 실례 분석 실현

종이에 구덩이를 담다
내가 이 기능을 실현하기 전에 나는 어떻게 이 구덩이에서 기어올랐는지 말했다.
파일 백엔드의 인터페이스를 업로드하는 매개 변수는 String 형식입니다.
프론트 데스크톱의 매개 변수:http://tmp/wx많은 알파벳 숫자를 무시하다.png
그러나 이것은 로컬 사진 URL(외부 네트워크에 접근할 수 없음)이기 때문에 제가 백그라운드에서 받은 것은 String 유형입니다. 이것은 그림이라는 것을 식별할 방법이 없습니다. 이 데이터에 접근할 수 없고 문자열로만 간주할 뿐입니다.(저급 오류)
코드 구현
선언: 백엔드에서 파일을 받아들이는 방법은 두 가지가 있습니다(매개 변수): 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>

이상은 본문의 전체 내용입니다. 여러분의 학습에 도움이 되고 저희를 많이 응원해 주십시오.