<template> <view> <view class="upload"> <block v-for="(upload,index) in uploads" :key="index"> <view class="uplode-file"> <image v-if="types == 'image'" class="uploade-img" :src="upload" :data-src="upload" @tap="previewImage"></image> <image v-if="types == 'image'" class="clear-one-icon" :src="clearIcon" @tap="delImage(index)"></image> <video v-if="types == 'video'" class="uploade-img" :src="upload" controls> <cover-image v-if="types == 'video'" class="clear-one-icon" :src="clearIcon" @tap="delImage(index)"></cover-image> </video> </view> </block> <view class="uploader-input-box" v-if="uploads.length < uploadCount"> <view class="uploader-input" @tap="chooseUploads"></view> </view> </view> <button type="primary" v-if="types == 'image'" @tap="upload">上传</button> </view> </template> <script> export default{ props: { types: { type: String, default: 'image' }, dataList: { type: Array, default: function() { return [] } }, clearIcon: { type: String, default: 'http://img1.imgtn.bdimg.com/it/u=451604666,2295832001&fm=26&gp=0.jpg' }, uploadUrl: { type: String, default: '' }, deleteUrl: { type: String, default: '' }, uploadCount: { type: Number, default: 1 }, //上传图片大小 默认3M upload_max: { type: Number, default: 3 } }, data(){ return { //上传的图片地址 uploadImages: [], //展示的图片地址 uploads: [], // 超出限制数组 exceeded_list: [], } }, watch:{ dataList() { this.uploads = this.dataList } }, methods:{ previewImage (e) { var current = e.target.dataset.src uni.previewImage({ current: current, urls: this.dataList }) }, chooseUploads(){ switch (this.types){ case 'image': uni.chooseImage({ count: this.uploadCount - this.uploads.length, //默认9 sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图,默认二者都有 sourceType: ['album', 'camera'], //从相册选择 success: (res) => { for(let i = 0; i< res.tempFiles.length; i++){ if(Math.ceil(res.tempFiles[i].size / 1024) < this.upload_max * 1024){ this.uploads.push(res.tempFiles[i].path) this.uploadImages.push(res.tempFiles[i].path) }else { this.exceeded_list.push(i === 0 ? 1 : i + 1); uni.showModal({ title: '提示', content: `第${[...new Set(this.exceeded_list)].join(',')}张图片超出限制${this.upload_max}MB,已过滤` }); } } }, fail: (err) => { uni.showModal({ content: JSON.stringify(err) }); } }); break; case 'video' : uni.chooseVideo({ sourceType: ['camera', 'album'], success: (res) => { if(Math.ceil(res.size / 1024) < this.upload_max * 1024){ this.uploads.push(res.tempFilePath) uni.uploadFile({ url: this.uploadUrl, //仅为示例,非真实的接口地址 filePath: res.tempFilePath, name: 'file', //请求参数 formData: { 'user': 'test' }, success: (uploadFileRes) => { this.$emit('successVideo',uploadFileRes) } }); }else { uni.showModal({ title: '提示', content: `第${[...new Set(this.exceeded_list)].join(',')}张视频超出限制${this.upload_max}MB,已过滤` }); } }, fail: (err) => { uni.showModal({ content: JSON.stringify(err) }); } }); break; } }, delImage(index){ if(this.uploads[index].substring(0,4) !== 'http'){ this.uploads.splice(index,1) return; }; if(!this.deleteUrl) { uni.showModal({ content: '请填写删除接口' }); return; }; uni.request({ url: this.deleteUrl, method: 'DELETE', data: { image: this.dataList[index] }, success: res => { this.uploads.splice(index,1) }, }); }, upload(){ if(!this.uploadUrl) { uni.showModal({ content: '请填写上传接口' }); return; }; for (let i of this.uploadImages) { uni.uploadFile({ url: this.uploadUrl, //仅为示例,非真实的接口地址 filePath: i, name: 'file', //请求参数 formData: { 'user': 'test' }, success: (uploadFileRes) => { this.$emit('successImage',uploadFileRes) } }); } } } } </script> <style scoped> .upload { display: flex; flex-direction: row; flex-wrap: wrap; } .uplode-file { margin: 10upx; width: 210upx; height: 210upx; position: relative; } .uploade-img { display: block; width: 210upx; height: 210upx; } .clear-one{ position: absolute; top: -10rpx; right: 0; } .clear-one-icon{ position: absolute; width: 20px; height: 20px; top: 0; right: 0; z-index: 9; } .uploader-input-box { position: relative; margin:10upx; width: 208upx; height: 208upx; border: 2upx solid #D9D9D9; } .uploader-input-box:before, .uploader-input-box:after { content: " "; position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); background-color: #D9D9D9; } .uploader-input-box:before { width: 4upx; height: 79upx; } .uploader-input-box:after { width: 79upx; height: 4upx; } .uploader-input-box:active { border-color: #999999; } .uploader-input-box:active:before, .uploader-input-box:active:after { background-color: #999999; } .uploader-input { position: absolute; z-index: 1; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; } </style>