本篇内容介绍了“微信小程序如何实现上传图片小功能”的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处理这些情况吧！希望大家仔细阅读，能够学有所成！
用到的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
})
}
})
},