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

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

用到的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({
? ? ? ? ? ? ? technicianAssessPicture: 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;
? ? //所有图片
? ? 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
? ? ? ? })
? ? ? }
? ? })
},

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

查看更多关于微信小程序实现上传图片小功能的详细内容...