uni-app 多图上传示例
效果图
组件
<template>
<view class="container">
<view class="image-content">
<view class="list-item" v-for="(item,key) in Images">
<image class="imgs" :src="item" @click="refundPicPreView(item)" />
<image class="closePic" src="../static/close.png" @click="deleteImg(key)" />
</view>
<view class="list-item" @click="uploadImg">
<image class="imgs" :src="defaultImg" />
</view>
</view>
<view class="small">最多可以上传 {{Images.length}}/{{maxlenth}} 张图片</view>
</view>
</template>
<script>
import defaultImg from '../static/plus.png'
export default {
name: 'uploadImgs',
props: {
defaultImg: {
type: String,
default: defaultImg
}
},
data() {
return {
Images: [],
maxlenth: 6,
isChoose: false
}
},
methods: {
uploadImg() {
var that = this;
if (that.Images.length >= that.maxlenth) {
that.showToast("最多可以上传 " + that.maxlenth + " 张图片");
return;
}
if (that.isChoose === true) {
that.showToast("图片上传中...");
return ;
}
that.isChoose = true;
uni.chooseImage({
count: that.maxlenth - that.Images.length, // 选择数量限制
sizeType: ['original', 'compressed'], // 原图、压缩图
sourceType: ['album', 'camera'], // 相册、拍照选择
success: async (res) => {
const tempFilePaths = res.tempFiles;
uni.showLoading({
title: '图片上传中...'
});
for (var i = 0; i < tempFilePaths.length; i++) {
uni.uploadFile({
url: that.$host + 'api/common/upload',
filePath: tempFilePaths[i].path,
name: 'file',
header: {
'Content-Type': 'multipart/form-data',
'token': uni.getStorageSync('token')
},
success: function(res) {
const Upres = JSON.parse(res.data)
if (Upres.code == 1) {
that.Images.push(Upres.data.fullurl);
}
},
});
}
uni.hideLoading();
setTimeout(() => {
that.$emit('upload', {
images: that.Images
})
}, 200)
},
complete () {
that.isChoose = false;
}
})
},
//删除图片
deleteImg(key) {
var that = this;
uni.showModal({
title: '提示',
content: '您确定要删除这张图片吗',
success: (res) => {
if (res.confirm) {
that.Images.splice(key, 1);
setTimeout(() => {
that.$emit('upload', {
images: that.Images
})
}, 200)
}
}
})
},
// 预览图片
refundPicPreView(currentImage) {
uni.previewImage({
current: currentImage,
urls: this.Images
})
},
// showToast 提示框
showToast(msg) {
uni.showToast({
title: msg,
icon: 'none',
position: 'top'
})
}
},
}
</script>
<style>
.container{
border: 1px solid #EFEFEF;
border-radius: 10rpx;
}
.list-item {
position: relative;
padding: 10rpx;
}
.imgs,
.list-item {
width: 147rpx;
height: 147rpx;
}
.image-content {
display: flex;
justify-content: flex-start;
align-items: center;
flex-wrap: wrap;
}
.closePic {
width: 34rpx;
height: 34rpx;
position: absolute;
z-index: 99;
top: 0;
right: 0;
}
.small {
font-size: 24rpx;
color: rgb(0, 0, 0, 0.5);
/* color: #EFEFEF; */
text-align: right;
}
</style>
使用
<template>
<view class="container">
<view class="new-list-item">
<view class="title">
图片:
</view>
<view>
<uploadImgs @upload="upload"></uploadImgs>
</view>
</view>
</view>
</template>
<script>
import uploadImgs from '@/components/uploadImgs.vue'
export default {
components: {
uploadImgs,
},
data() {
return {
isLoad: false,
form: {
images: '',
},
}
},
methods: {
//获取子组件的图片url
upload(e) {
// console.log('e ==>',e);
this.form.images = e.images.join(',');
},
},
}
</script>
<style>
.container {
padding: 20rpx;
}
.new-list-item {
margin: 20rpx 0;
font-size: 34rpx;
padding-bottom: 20rpx;
}
.title {
text-align: left;
height: 70rpx;
line-height: 70rpx;
font-size: 34rpx !important;
}
</style>
仅作为使用记录
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 在鹅厂做java开发是什么体验
· 百万级群聊的设计实践
· WPF到Web的无缝过渡:英雄联盟客户端的OpenSilver迁移实战
· 永远不要相信用户的输入:从 SQL 注入攻防看输入验证的重要性
· 浏览器原生「磁吸」效果!Anchor Positioning 锚点定位神器解析