<template> <view class="index"> <u-upload :fileList="fileList1" name="1" @afterRead="afterRead" @delete="deletePic" :multiple="multiple" :maxCount="maxCount" :width="afterWidth" :height="afterHeight" :accept="acceptType" :compressed="false"> <view class="index-upload d-flex j-center a-center"> <image v-if="imgType === 'camera'" src="@/static/icon/camera.png" mode="widthFix"></image> <view class="index-upload-tlo d-flex flex-wrap j-center" v-else-if="imgType === 'cross'"> <image :class="crossTextShow ? 'index-upload-tlo-lp' : ''" src="@/static/icon/cross.png" mode=""> </image> <view class="" v-if="crossTextShow">上传</view> </view> </view> </u-upload> </view> </template> <script> import apiBaseConfig from '@/config/index.js'; export default { props: { imgType: { type: String, default: 'cross' //camera cross }, acceptType: { type: String, default: 'image' }, crossTextShow: { type: Boolean, default: true }, multiple: { type: Boolean, default: true }, value: { typr: Array, default: () => [] }, maxCount:{ type: Number, default: 9 }, afterWidth:{ type: Number, default: 210 }, afterHeight:{ type: Number, default: 210 } }, data() { return { uploadUrl: apiBaseConfig.upload, fileList1: [], }; }, watch: { value: { handler(val) { console.log(val, '单') if(val && val.length){ this.fileList1 = val }else{ this.fileList1 = [] } }, immediate: true, deep: true }, }, onLoad() {}, methods: { deletePic(event) { this[`fileList${event.name}`].splice(event.index, 1) this.$emit('delVal', event.index); }, // 新增图片 async afterRead(event) { // 当设置 multiple 为 true 时, file 为数组格式,否则为对象格式 let lists = [].concat(event.file) console.log(lists,'点九三') let fileListLen = this[`fileList${event.name}`].length lists.map((item) => { this[`fileList${event.name}`].push({ ...item, status: 'uploading', message: '上传中' }) }) for (let i = 0; i < lists.length; i++) { const result = await this.uploadFilePromise(lists[i].url) let item = this[`fileList${event.name}`][fileListLen] this[`fileList${event.name}`].splice(fileListLen, 1, Object.assign(item, { status: 'success', message: '', url: result })) fileListLen++ } }, uploadFilePromise(url) { return new Promise((resolve, reject) => { let a = uni.uploadFile({ url: this.uploadUrl, // 仅为示例,非真实的接口地址 filePath: url, name: 'file', header: { 'Authorization': `Bearer ${uni.getStorageSync('token')}` }, success: (res) => { console.log(res.data, '单价') const { data } = JSON.parse(res.data); console.log(data, '大街上可能') this.$emit('getVal', data); setTimeout(() => { resolve(data.url) // resolve(res.data.data) }, 1000) } }); }) }, } }; </script> <style lang="scss" scoped> .index { &-upload { // width: 170rpx; // height: 170rpx; width: 210rpx; height: 210rpx; background-color: #f3f3f3; >image { width: 52rpx; height: 52rpx; } &-tlo { width: 100%; height: 100%; image { width: 40rpx; height: 40rpx; } view { width: 100%; text-align: center; font-size: 24rpx; font-weight: 400; color: #000000; margin-top: -45rpx; } &-lp { margin-top: 43rpx; } } } } .index-upload-tlo-lp { margin-bottom: 30rpx; } </style>