小程序上传图片并展示
相信做过小程序的应该都知道上传图片基本是每个小程序都有的功能,我来简单总结一下:可单张上传,可多张上传:
首先是我们的样式;毕竟页面展示才是我们的门面,所以不能太差,代码如下:
代码里面包含 图片title以及样例图片的展示,副标题的展示
简单说一下TimeOut的重用,是让用户进行确认的,首次点击会提示确认信息,五秒之后可再次点击.根据需要进行去留.
<template>
<view class="ctn">
<view class="content" v-for="(item, index) in upload">
<view>
<view class="Sample">
<view class="title">{{ item.title }}</view><span @click="showImage" :id="index">查看样例</span>
</view>
<view v-if="item.subtitle.length > 0" class="subTitle">{{ item.subtitle }}</view>
</view>
<view class="img">
<view v-for="(itm,idx) in item.showUrl" class="havImg" style="position: relative;">
<u-icon @click="del(index,idx)" name="close" class="icon"></u-icon>
<image class="havImg1" @click="previewImg(index,idx)" :id="index" :src="itm.url">
</image>
</view>
<view class="Noimg" v-if="item.upd == false && item.count!=item.showUrl.length" @click="chooseImg" :id="index">
<image src="../static/icon_imageinfo.png"></image>
<view> 上传图片 </view>
</view>
<view class="Noimg" style="z-index: 999" v-if="item.upd == true">
<u-circle-progress active-color="#2979ff" :percent="item.percent">
<view class="u-progress-content">
<view class="u-progress-dot"></view>
<text class="u-progress-info">上传中</text>
</view>
</u-circle-progress>
</view>
</view>
<view class="count">已上传{{ item.showUrl.length}}/{{ item.count }}</view>
</view>
<view class="caozuo">
<view class="caozuol" @click="getstatus(status)">上一步</view>
<view class="caozuor" @click="dataSubmit" :style="{background:TimeOut?'#ccc':''}">提交</view>
</view>
</view>
</template>
下面是css展示:
<style lang="scss"> page { background: #fff; } .caozuo { position: fixed; z-index: 99; bottom: 0; left: 0; width: 100%; background: #fff; display: flex; justify-content: center; align-items: center; .caozuol { width: 40%; height: 88rpx; border-radius: 80rpx; background: #e3e3e3; text-align: center; line-height: 88rpx; font-size: 28rpx; font-family: PingFang; font-weight: bold; color: #666666; margin-right: 40rpx; } .caozuor { width: 40%; height: 88rpx; border-radius: 80rpx; background: #4293f4; text-align: center; line-height: 88rpx; font-size: 28rpx; font-family: PingFang; font-weight: bold; color: #ffffff; } } .u-progress-content { display: flex; align-items: center; justify-content: center; } .Sample { display: flex; justify-content: space-between; align-items: center; } .u-progress-dot { width: 16rpx; height: 16rpx; border-radius: 50%; background-color: #fb9126; } .u-progress-info { font-size: 28rpx; padding-left: 16rpx; letter-spacing: 2rpx; } .content { width: 100%; height: 320rpx; .title { font-size: 40rpx; font-weight: 600; color: #000; margin: 20rpx; } .subTitle { font-size: 24rpx; color: #777; padding-left: 20rpx; } .count { margin: 20rpx 0 0 50rpx; color: #b5b5b5; font-size: 24rpx; } .img { display: flex; justify-content: start; align-items: center; flex-wrap: wrap; background: #fff; border-radius: 25rpx; position: relative; padding-left: 20rpx; .icon { position: absolute; right: -10rpx; top: -10rpx; background: red; border-radius: 50%; color: #fff; padding: 5rpx; } .havImg { width: 200rpx; height: 200rpx; margin-right:30rpx; } .havImg1 { width: 200rpx; height: 200rpx; } .Noimg { width: 200rpx; height: 200rpx; display: flex; justify-content: center; align-items: center; flex-direction: column; background-color:#f9f9f9; image { width: 60rpx; height: 60rpx; } view { text-align: center; margin-top: 20rpx; color: #b5b5b5; } } } } </style>
最后就是js了
<script> export default { data() { return { upload: [], once:true, TimeOut:null } }, comments: { }, onShow() { this.once = true }, created() { this.upload = [{ title: '电池照片',//图片title upd: false,//上传中组件控制 count: 3,//可上传张数 showUrl:[],//展示图集合 percent: 70,//上传loading进度条 translation: 'https://www.XXXX.jpg',//样例图 formData: {//根据自己业务编写 title: '电池照片', photoType: '13', type: '7', id: '', url: '' } }] }, methods: { getstatus(e) { uni.navigateBack({ url: 1, }) }, dataSubmit() { const self =this; let next = Object.keys(self.upload).map((key) => { if (self.upload[key].formData.id == '') { return false } }) if (next.indexOf(false) != '-1') { uni.showToast({ title: '请上传完整图片!', icon: 'none', duration: 1000, }) return } if(self.TimeOut!=null){ return; } if(self.once){ uni.showModal({ title:'确认信息', content:'请确认页面资料信息正确,五秒之后可再次点击!', showCancel:false, success() { self.TimeOut = setTimeout(()=>{ clearTimeout(self.TimeOut) self.TimeOut=null },5000) self.once = false } }) return } self.$emit('dataSubmit', self.upload) }, //上传图片 chooseImg(e) { const self = this const glob = getApp().globalData const id = e.currentTarget.id uni.chooseImage({ count: 1, //默认9 sizeType: ['compressed'], sourceType: ['album', 'camera'], //从相册选择 success: function(res) { self.upload[id].upd = true uni.compressImage({ src: res.tempFilePaths[0], quality: 100, success: ress => { uni.uploadFile({ url: 'https://XXXXXXX', filePath: ress.tempFilePath, name: 'photoContent', header: { 'Content-Type': 'application/json', 'X-Access-Token': glob.token || '' }, formData: { photoType: self.upload[e.currentTarget.id] .formData.photoType, type: self.upload[e.currentTarget.id] .formData.type }, success: (uploadFileRes) => { let result = JSON.parse(uploadFileRes .data); if (result.result.code == 200 && result .result.photoId) { self.upload[id].showUrl.push({url:ress .tempFilePath,id:result .result.photoId}) console.log(self.upload) self.upload[id].formData.url = ress .tempFilePath self.upload[id].formData.id = result .result.photoId self.upload[id].upd = false self.upload[id].percent = 100 } else { uni.showToast({ title: '上传失败!', icon: 'none', duration: 1000 }) } }, fail: (err) => { uni.showToast({ title: '上传失败!', icon: 'none', duration: 1000 }) }, complete(ss) { self.upload[id].upd = false console.log(ss) } }); } }) } }) }, //预览图片 previewImg(value,idx) { uni.previewImage({ urls: [this.upload[value].showUrl[idx].url], }) }, //样例图片 showImage(e) { uni.previewImage({ urls: [this.upload[e.currentTarget.id].translation], }) }, del(value,idx) { console.log(value,idx) this.upload[value].showUrl.splice(idx,1) this.upload[value].percent = 70 }, }, } </script>
不想写了,简单记录一下吧,有需要进行删减,还有一次上传多张的,使用闭包原理进行多次调用,代码不记录了,有需要的把上面的改一下就行了.
