微信小程序实现上传图片小功能

本文实例为大家分享了微信小程序实现上传图片的具体代码，供大家参考，具体内容如下用到的apiwx.chooseMedia();用于拍摄或从手机相册中选择图片或视频功能：点击上传图片，可多选，或者拍照上...

本文实例为大家分享了微信小程序实现上传图片的具体代码，供大家参考，具体内容如下

用到的api
wx.chooseMedia(); 用于拍摄或从手机相册中选择图片或视频

功能：点击上传图片，可多选，或者拍照上传；点击图片放大查看；长按图片删除

效果图

json里面引用weui的组件uploader

{
 "navigationBarTitleText": "评价工单",
 "usingComponents": {
  "mp-uploader": "weui-miniprogram/uploader/uploader",
  "mp-cells": "weui-miniprogram/cells/cells",
  "mp-cell": "weui-miniprogram/cell/cell"
 }
}

wXML

<view class="weui-uploader">
  <view class="img-v weui-uploader__bd">
    <view class='pic' wx:for="{{technicianAssessPicture}}" wx:for-item="item" wx:key="*this">
      <image class='weui-uploader__img ' src="{{item}}" data-index="{{index}}" mode="ASPectFill" bindlongpress="deleteTechnician" bindtap="previewTechnician">
      </image>
    </view>
    <view class="weui-uploader__input-box pic" bindtap="technicianImg"> </view>
  </view>
</view>

js

data:(){
 technicianAssessPicture: [], // 技师图片
}
// 上传技师图片
 technicianImg: function (e) {
  var that = this;
 编程 var technicianAssessPicture = this.data.technicianAssessPicture;
  if (technicianAssessPicture.length >= 9) {
   this.setData({
    lenMore: 1
   });
   setTimeout(function () {
    that.setData({
     lenMore: 0
    });
   }, 2500);
   return false;
  }
  wx.chooseMedia({
   count: 9,  // 默认9
   mediaType: ['image','video'],  // 文件类型
   // image 只能拍摄图片或从相册选择图片 
   // video 只能拍摄视频或从相册选择视频
  
   // sizeType: ['original', 'compressed'], //所选的图片的尺寸 original原图，compressed压缩图
   // 仅对 mediaType 为 image 时有效，是否压缩所选文件
  
   sourceType: ['album', 'camera'], //图片和视频选择的来源
   maxDuration: 30,  // 拍摄视频最长拍摄时间，单位秒。时间范围为 3s 至 60s 之间。不限制相册。
   camera: 'back',  // 仅在 sourceType 为 camera 时生效，使用前置或后置摄像头
   // back 使用后置摄像头;front 使用前置摄像头
   success: function (res) {
    var tempFilePaths = res.tempFiles;
    var technicianAssessPicture = that.data.technicianAssessPicture;
    for (var i = 0; i < tempFilePaths.length; i++) {
     if (technicianAssessPicture.length >= 9) {
      that.setData({
       technicianAsspythonessPicture: technicianAssessPicture
      });
      return false;
     } else {
      const tempFilePaths1 = tempFilePaths.map(v=>v.tempFilePath)
      //  tempFilePaths数据是json数组，我们需要的是普通数组需要处理一下
      technicianAssessPicture.push(tempFilePaths1[i]);
     }
    }
    that.setData({
     technicianAssessPicture: technicianAssessPicture
    });
    console.log(that.data.technicianAssessPicture, 'hhhhhhhhhhhhhhhhhhhhh');
   }
  });
 },

处理后打印出来的数据

预览，删除

// 预览图片
previewTechnician: function (e) {
  //获取当前图片的下标
  var index = e.currentTarget.dataset.index;
  //所有图片
php  var technicianAssessPicture = this.data.technicianAssessPicture;
  wx.previewImage({
   //当前显示图片
   current: technicianAssessPicture[index],
   //所有图片
   urls: technicianAssessPicture
  })
 },

 // 长按删除
 deleteTechnician: function (e) {
  var that = this;
  var technicianAssessPicture = that.data.technicianAssessPicture;
  var index = e.currentTarget.dataset.index;  //  获取当前长按图片下标
  wx.showModal({
   // cancelColor: 'cancelColor',
   title: '提示',
   content: '确定要删除此图片吗？',
   success: function (res) {
    if (res.confirm) {
     console.log('确定');
     technicianAssessPicture.splice(index, 1);
    } else if (res.cancel) {
     console.log('取消');
     return false;
    }
    that.setData({
     technicianAssessPicture
    })
   }
  })
},

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。