위챗 미니 프로그램에서 사진 업로드 등 일련의 기능을 구현하는 방법

이 글에서는 주로 위챗 애플릿의 이미지 업로드, 삭제, 미리보기 기능을 구현하는 방법을 소개하며, 위챗 애플릿 인터페이스 레이아웃, 이벤트 응답, 이미지 운영 관련 구현 기술 등이 필요한 친구들이 참고할 수 있습니다.

이 글은 알려드립니다. WeChat Mini 프로그램의 예는 이미지 업로드, 삭제 및 미리보기 기능을 구현합니다. 참고를 위해 모든 사람과 공유하세요. 세부 사항은 다음과 같습니다.

여기에서는 WeChat 애플릿

레이아웃

<view class="img-v">
 <view class="img" wx:for="{{imgs}}" wx:for-item="item" wx:key="*this">
  <image src="{{item}}" data-index="{{index}}" mode="aspectFill" bindtap="previewImg"></image>
  <view class="delete-btn" data-index="{{index}}" catchtap="deleteImg"></view>
 </view>
 <view class="upload-img-btn" bindtap="chooseImg"></view>
</view>

JS 처리

 data: {
  imgs: []
 },
// 上传图片
 chooseImg: function (e) {
  var that = this;
  var imgs = this.data.imgs;
  if (imgs.length >= 9) {
   this.setData({
    lenMore: 1
   });
   setTimeout(function () {
    that.setData({
     lenMore: 0
    });
   }, 2500);
   return false;
  }
  wx.chooseImage({
   // count: 1, // 默认9
   sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
   sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
   success: function (res) {
    // 返回选定照片的本地文件路径列表，tempFilePath可以作为img标签的src属性显示图片
    var tempFilePaths = res.tempFilePaths;
    var imgs = that.data.imgs;
    // console.log(tempFilePaths + '----');
    for (var i = 0; i < tempFilePaths.length; i++) {
     if (imgs.length >= 9) {
      that.setData({
       imgs: imgs
      });
      return false;
     } else {
      imgs.push(tempFilePaths[i]);
     }
    }
    // console.log(imgs);
    that.setData({
     imgs: imgs
    });
   }
  });
 },
 // 删除图片
 deleteImg: function (e) {
  var imgs = this.data.imgs;
  var index = e.currentTarget.dataset.index;
  imgs.splice(index, 1);
  this.setData({
   imgs: imgs
  });
 },
 // 预览图片
 previewImg: function (e) {
   //获取当前图片的下标
  var index = e.currentTarget.dataset.index;
   //所有图片
  var imgs = this.data.imgs;
  wx.previewImage({
   //当前显示图片
   current: imgs[index],
   //所有图片
   urls: imgs
  })
 }

의 이미지 업로드, 이미지 삭제 및 이미지 미리보기를 주로 소개합니다. 제가 여러분을 위해 정리한 내용입니다. 앞으로 모든 사람에게 도움이 되기를 바랍니다.

관련 기사:

Vue에서 확장과 컴포넌트의 차이점은 무엇인가요?

vue.js를 사용하여 $refs 및 $emit 상위-하위 구성 요소 상호 작용을 구현하는 방법

axios를 사용하여 ajax 요청을 구현하는 방법(자세한 튜토리얼)

JavaScript에서 탄력적 효과를 얻는 방법

위 내용은 위챗 미니 프로그램에서 사진 업로드 등 일련의 기능을 구현하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!