<template> <view class="imgs"> <view class="photo" v-for="(item, index) in list" :key="index" @click="preview(item)"> <image :src="ip + item" mode="aspectFill"></image> <text class="del" @click.stop="del(item)" v-if="!read">删除</text> </view> <view class="uploads" v-if="list.length < 3 && !read" @click="chooseImage()"> <view class="bw"> <view class="icon"></view> <view class="text" style="color: rgb(145 154 179)">选择图片</view> </view> </view> <view class="clear"></view> </view> </template> <script> export default { name: 'images', props: { value: { type: Array }, read: { type: Boolean, default: false } }, data() { return { ip: this.http.ip, list: [] }; }, watch: { value: { handler(newValue, oldValue) { this.list = newValue; }, immediate: true } }, methods: { chooseImage() { //照片选择 uni.chooseImage({ count: 3, //默认9 sizeType: ['compressed'], //可以指定是原图还是压缩图,默认二者都有 success: (res) => { res.tempFilePaths.forEach((path) => { uni.showLoading({ title: '正在上传图片', mask: true }); uni.uploadFile({ url: this.ip + '/app/common/upload', filePath: path, name: 'file', header: { Authorization: this.getUser().token }, success: (res) => { let data = JSON.parse(res.data); if (data.code == 200) { console.log('asd:' + data.fileName); if (this.list.length < 3) { this.list.push(data.fileName); } this.$emit('input', this.list); } uni.hideLoading(); }, fail: (res) => { uni.hideLoading(); uni.showModal({ content: '图片上传失败', showCancel: false }); } }); }); } }); }, preview(item) { let urls = []; this.value.forEach((item) => { urls.push(this.ip + item); }); // 预览图片 uni.previewImage({ urls: urls, current: this.ip + item, success: (res) => {} }); }, del(item) { this.value.splice(this.value.indexOf(item), 1); this.$emit('input', this.value); this.$forceUpdate(); } } }; </script> <style lang="scss" scoped> .imgs { margin-top: 10px; .uploads { float: left; width: 80px; height: 80px; text-align: center; border-radius: 5px; margin: 5px 5px 0px 0px; overflow: hidden; background-color: white; border: 1px solid #e2e2e2; .bw { padding-top: 10px; .icon { font-size: 30px; display: block; float: none; } .text { font-size: 14px; color: #6c6c6c; } } } .photo { float: left; margin: 5px 10px 0px 0px; position: relative; overflow: hidden; border-radius: 5px; width: 80px; height: 80px; box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.2); image { width: 80px; height: 80px; border-radius: 5px; } .del { position: absolute; top: 0px; right: 0px; background-color: #f44336; color: white; padding: 2px 6px; font-size: 12px; } } } </style>