微信小程序实现上传图片小功能
短信预约 -IT技能 免费直播动态提醒
本文实例为大家分享了微信小程序实现上传图片的具体代码，供大家参考，具体内容如下
用到的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 ' class="lazy" data-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
})
}
})
},以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持编程网。
免责声明：
① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的，并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据，供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。
② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
