upload文件
<template><view><view class="multiImgContainer"><view v-for="(item, index) in lists" :key="index"><view class="showImageContainer" v-if="item.filePath || item.url"><u-image width="85px" height="85px" class="showImageBox" :src="item.filePath || item.url"></u-image><u-icon name="close-circle-fill" class="deleteIconBox" @click="deleteImg(index)"></u-icon></view></view></view><u-upload :before-remove="beforeRemove" ref="uUpload" :show-upload-list="false" action="#" :auto-upload="false"max-count="100" @on-list-change="onListChange"></u-upload></view>
</template>
<script>export default {props: {lists: {type: Array,default: () => []},},methods: {deleteImg(index) {this.$emit("delete",index)},onListChange(list) {let filterHasPath = this.lists.filter(item=>item.filePath)let filterListHasPath = list.filter(item=>item.filePath)if(filterListHasPath.length===0&&filterHasPath.length>0){this.$emit("change", [...list,...filterHasPath])}else{this.$emit("change", list)}},beforeRemove(index, lists) {return true;}}}
</script><style>.showImageContainer {position: relative;width: 85px;height: 85px;border: 1px solid #ebecee;overflow: hidden;margin: 10rpx;background: #f4f5f6;position: relative;border-radius: 10rpx;display: flex;-webkit-box-align: center;align-items: center;-webkit-box-pack: center;justify-content: center;}.swiper {height: 90px;}.deleteIconBox {color: #fa3534;font-size: 18px;position: absolute;top: 10rpx;right: 10rpx;z-index: 10;border-radius: 100rpx;width: 44rpx;height: 44rpx;}.multiImgContainer {display: flex;flex-direction: row;flex-wrap: wrap;}
</style>
edit页面引入上面的upload
<template><view style="height: 100%;display: flex;flex-direction: column;"><upload-multi @change="onListChangeSC" @delete="deleteImgSC" :lists="listsSC" :fileList="fileListSC" /></view>
</template><script>import uploadMulti from '../../components/upload-multi/upload-multi.vue';const db = uniCloud.database();const dbCollectionName = 'purchase';export default {components: {uploadMulti},data() {let formData = {"PRODUCTION_CERTUFUCATE": [],}return {fileListSC: [],listsSC: [] // 组件内部的文件列表}},onLoad(e) {if (e.id) {const id = e.idthis.formDataId = idthis.getDetail(id)}},methods: {deleteImgSC(index) {this.listsSC.splice(index, 1);if (this.listsSC.length > 0) {let allList = [];for (let i = 0; i < this.listsSC.length; i++) {allList.push({filePath: this.listsSC[i].url || this.listsSC[i].filePath,uploadTime: new Date().getTime()})}this.formData.PRODUCTION_CERTUFUCATE = allList;} else {this.formData.PRODUCTION_CERTUFUCATE = []this.fileListSC = []this.listsSC = []}},onListChangeSC(lists) {console.log('onListChange', lists);this.listsSC = lists;this.fileListSC = lists;console.log('this.listsSC', this.listsSC);console.log('this.formData', this.formData);let allList = [];for (let i = 0; i < lists.length; i++) {allList.push({filePath: lists[i].url || lists[i].filePath,uploadTime: new Date().getTime()})}this.formData.PRODUCTION_CERTUFUCATE = allList;},/*** 触发表单提交*/submit(formData) {uni.showLoading({mask: true})this.$refs.form.validate().then((res) => {res.PRODUCTION_CERTUFUCATE = formData.PRODUCTION_CERTUFUCATEthis.submitForm(res)}).catch(() => {uni.hideLoading()})},/*** 获取表单数据* @param {Object} id*/getDetail(id) {uni.showLoading({mask: true})db.collection(dbCollectionName).doc(id).field("PRODUCTION_CERTUFUCATE").get().then((res) => {const data = res.result.data[0]if (data) {this.formData = datathis.listsSC = data.PRODUCTION_CERTUFUCATEthis.fileListSC = data.PRODUCTION_CERTUFUCATE}}).catch((err) => {uni.showModal({content: err.message || '请求服务失败',showCancel: false})}).finally(() => {uni.hideLoading()})}}}
</script><style></style>