WeChat 미니 프로그램에서 여러 이미지 업로드를 구현하기 위한 예제 코드

이 글에서는 주로 WeChat 애플릿에서 여러 장의 사진을 업로드하는 기능을 자세히 소개합니다. 관심 있는 친구들이 참고할 수 있습니다.

WeChat 애플릿에서는 한 번에 한 장의 사진만 업로드할 수 있습니다. 여러 장의 사진을 업로드하려면 어떻게 해야 합니까?

먼저 wx.chooseImage(object)와 wx.uploadFile(OBJECT)

두 가지 API를 살펴보겠습니다. 샘플 코드는 다음과 같습니다.

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
   }
  })
 }
})

샘플 코드는 다음과 같습니다. 사진을 선택한 다음 선택한 사진 중 첫 번째 사진을 업로드하는 것입니다.

이제 여러 장의 사진을 업로드하는 예를 작성해 보겠습니다

먼저 사진을 선택해야 합니다

wx.chooseImage({
 success: function(res) {
  var tempFilePaths = res.tempFilePaths;//这里是选好的图片的地址，是一个数组
  
 }
})

그런 다음 앱에서 여러 장의 사진을 작성합니다. js 사진을 업로드하는 방법은 나중에 소개하겠습니다. JS 파일로 작성하여 나중에 소개할 수도 있습니다.

  //多张图片上传
  function uploadimg(data){
   var that=this,
     i=data.i?data.i:0,
     success=data.success?data.success:0,
     fail=data.fail?data.fail:0;
   wx.uploadFile({
      url: data.url, 
      filePath: data.path[i],
      name: 'fileData',
      formData:null,
      success: (resp) => {
        success++;
        console.log(resp)
        console.log(i);
        //这里可能有BUG，失败也会执行这里
      },
      fail: (res) => {
        fail++;
        console.log('fail:'+i+"fail:"+fail);
      },
      complete: () => {
        console.log(i);
        i++;
      if(i==data.path.length){  //当图片传完时，停止调用     
        console.log('执行完毕');
        console.log('成功：'+success+" 失败："+fail);
      }else{//若图片还没有传完，则继续调用函数
        console.log(i);
        data.i=i;
        data.success=success;
        data.fail=fail;
        that.uploadimg(data);
      }
        
      }
    });
  }

여러 장의 사진을 업로드하는 방법은 다음과 같습니다. 인용문:

var app=getApp();
Page({
  data:{
   pics:[]
  },
  choose:function(){//这里是选取图片的方法
   var that=this;
   wx.chooseImage({
      count: 9-pic.length, // 最多可以选择的图片张数，默认9
      sizeType: ['original', 'compressed'], // original 原图，compressed 压缩图，默认二者都有
      sourceType: ['album', 'camera'], // album 从相册选图，camera 使用相机，默认二者都有
      success: function(res){
      var imgsrc=res.tempFilePaths;  
      that.setData({
        pics:imgsrc
      });
   },
   fail: function() {
    // fail
   },
   complete: function() {
    // complete
   }
  })

  },
  uploadimg:function(){//这里触发图片上传的方法
    var pics=this.data.pics;
    app.uploadimg({
      url:'https://........',//这里是你图片上传的接口
      path:pics//这里是选取的图片的地址数组
    });
 },
  onLoad:function(options){

 }

})

.

위 내용은 WeChat 미니 프로그램에서 여러 이미지 업로드를 구현하기 위한 예제 코드의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!