위챗 애플릿은 여러 장의 본지 사진을 서버와 그림에 업로드하여 미리 보기를 실현한다

1. 앞말

최근에 작은 프로그램을 쓰고 있는데 wx.uploadFile 방법을 썼는데 이 방법이 여러 개의 파일을 동시에 업로드하는 것을 지원하지 않는다는 것을 발견하고 스스로 여러 개의 파일을 업로드하는 방법을 썼다.
[이미지 업로드 실패...(image-c4d973-1610865751169)]

2, 요구 사항

블로거가 한 것은 사용자 고소 페이지이다.수요는 사용자가 최대 세 장의 사진을 올리고 마지막으로 사진과 문자, 사용자 정보 등을 서버에 제출하는 것이다.
[이미지 업로드 실패...(image-8e50b6-1610865751169)]

3. 사고방식 해결

블로거의 해결 사고방식은 귀속 함수를 정의하고 귀속 호출wx.uploadFile을 업로드하여 모두 완성한 후에 귀속을 끝내는 것이다.

4, 코드 표시

this.데이터의 데이터

/**
*  
*/
data: {
 imgs:[],// 
 imgPath:[],// 
},

그림 코드 업로드

//  
chooseImg (e) {
  const _this = this;
  let imgs = this.data.imgs;
  let imgNumber = this.data.imgs.length;// 
  if(imgNumber >= 3){
    FN.Toast(" ");
    return false;
  }else{
    imgNumber = 3 - imgNumber;
  };
  wx.chooseImage({// 
    count: imgNumber,
    sizeType: ['original', 'compressed'],
    sourceType: ['album', 'camera'],
    success (res) {
      const tempFilePaths = res.tempFilePaths;
      for(let i = 0;i < tempFilePaths.length; i++){
        imgs.push(tempFilePaths[i]);
      }
      _this.setData({// ， 
        imgs: imgs
      });
      let successUp = 0; // 
      let failUp = 0; // 
      let count = 0; // 
      let length = tempFilePaths.length; // 
      _this.recursionUploading(tempFilePaths, successUp, failUp, count, length);// 
    }
  })
},

반복 업로드 방법

// 
recursionUploading(imgPaths, successUp, failUp, count, length){
  var _this = this;
  wx.showLoading({
  title: ' ' + count + ' ',
  });
  wx.uploadFile({
    url: `${app.globalData.baseURL}/api `,
    filePath: imgPaths[count],
    formData:{
      userId:app.globalData.userMsg.userId
    },
    name: "uploadImage",
    header: {
      'content-type': 'multipart/form-data'
    }, 
    success (e) {
      console.log(e)
      let path = _this.data.imgPath;
      let obj = e.data;
      if(obj.status === "y"){
        path.push(obj.infoObject);
        _this.setData({
          imgPath:path
        });
      }
      successUp++;// +1
    },
    fail (e) {
      failUp++;// +1
    },
    complete (e) {
      count++;// 
      if(count == length){
        FN.Toast(` ${successUp}`)
      }else{
        // ， 
        _this.recursionUploading(imgPaths, successUp, failUp, count, length);
      }
    }
  })
},

큰 그림 미리 보기

//  
lookBigImg (e) {
  let index = e.currentTarget.dataset.index;// 
  let big = this.data.imgs[index];
  wx.previewImage({
    current: big, //  http 
    urls: this.data.imgs //  http 
  })
},

보시면 도움이 될 것 같으면 @붕도11997110103입니다. 좋아요와 댓글에 관심을 가져주시기 바랍니다.END

위챗 애플릿 API 상호 작용을 위한 사용자 정의 패키지

간단한 JS+CSS 웹 사용자 정의 스킨케어 실현

CSDN

GitHub

블로그원

굴금