upload.vue 5.1 KB
<template>
	<view style="display: flex; flex-wrap: wrap; justify-content: space-evenly; margin-top: 40rpx;">
		<view class="box" v-for="(item,index) in fileList">
			<u-upload :fileList="item.url" @afterRead="(event) => afterRead(event,item,index)" @delete="deletePic"
				name="1" multiple :maxCount="1"></u-upload>
			<!-- <u-upload ref="uUpload" :action="action" :auto-upload="true" ></u-upload> -->
			<!-- <u-upload
				:action="action" :auto-upload="true" :fileList="item.url"
				></u-upload> -->
			<p>{{item.title}}</p>
		</view>

		<view class="" style="width: 90%;margin-top: 50rpx;display: flex;justify-content: center;">
			<u-button shape="circle" text="确认发布" style="color: white;"
				color="linear-gradient(to right, #46BAEC,#2F67D3)" @click="submit"></u-button>
		</view>
	</view>
</template>

<script>
	import config from '@/common/config'
	export default {
		data() {
			return {
				action: config.baseUrl + '/api/common/upload',
				fileList1: [],
				info: {},
				flag: null,
				fileList: [
					{
						id:3,
						title: '整机左前45°',
						url: [
						]
					},
					{
							id:3,
						title: '整机右后45°',
						url: [
						]
					},
					{
							id:3,
						title: '发动机左侧',
						url: []
					},
					{
							id:3,
						title: '发动机右侧',
						url: []
					},
					{
							id:3,
						title: '变速箱°',
						url: []
					},
					{
							id:3,
						title: '驾驶室工作台',
						url: []
					},
					{
							id:3,
						title: '工作装置整体',
						url: []
					},
					{
							id:3,
						title: '整机铭牌',
						url: []
					},
					{
							id:3,
						title: '环保信息铭牌',
						url: []
					}
				],
			}
		},
		onLoad(option) {
			console.log(option.val);
			this.flag = option.val
			if(option.info){
				this.info = JSON.parse(option.info)
				this.fileList = JSON.parse(this.info.images_json)
				console.log(this.fileList);
			}
			uni.$u.http.get('/api/equip/equip_image').then(res => {
				console.log(res);
			})
			// this.fileList = JSON.parse(this.info.images_json) 
			// console.log(this.fileList);
			// let arr
			// this.fileList.forEach((item,index) => {
			//   this.fileList[index] = Object.keys(item).map(val => ({
			// 	        title: val,
			// 	        url: item[val]
			// 	    }))
			// })
			// this.fileList = this.fileList.flat(Infinity)
			// console.log(this.fileList);
		},
		methods: {
			submit() {
				let p = this.info
				delete p.name
				delete p.brand_name
				delete p.xh_name
				console.log(this.info);
				console.log(this.fileList);
				// let images_json = this.fileList.map(item => {
				// 	return{
				// 		[item.title]: item.url && item.url[0] && item.url[0].thumb || ''
				// 	}
				// });
				p.province = p.region.slice(0,3)
				p.city = p.region.slice(3,6)
				p.address = p.region
				console.log('sdadasds', this.flag);
				uni.$u.http.post( this.flag === "sale" ?'/api/equip/add_equip_sale' : '/api/equip/add_equip_hire' , {
					...p,
					images_json: JSON.stringify(this.fileList)
				}).then(res => {
					
						uni.showToast({
							title:res.msg,
							icon:'none'
						})
					
					if(res.code == 1){
						
						let pagearr = getCurrentPages(); //获取应用页面栈
						let currentPage = pagearr[pagearr.length - 2]; //获取当前页面信息
						console.log('option:', currentPage) //获取页面传递的信息
						currentPage.$vm.category_id = ''
						currentPage.$vm.name = ''
						setTimeout(()=> {
							uni.navigateBack({
								delta:2
							})
						},1500)
					}
					
					
				}).catch(err => {
					uni.showToast({
						title:err.msg,
						icon:'none'
					})
					uni.reLaunch({
						url:'pages/index/buy'
					})
				})
			},
			// 删除图片
			deletePic(event) {
				this[`fileList${event.name}`].splice(event.index, 1)
			},
			// 新增图片
			async afterRead(event, item, index) {
				// 当设置 multiple 为 true 时, file 为数组格式,否则为对象格式
				let lists = [].concat(event.file)
				let fileListLen = this.fileList[index].url.length
				lists.map((item) => {
					this.fileList[index].url.push({
						...item,
						status: 'uploading',
						message: '上传中'
					})
				})
				for (let i = 0; i < lists.length; i++) {
					const result = await this.uploadFilePromise(lists[i].url)
					console.log(result);
					let item = this.fileList[index].url[fileListLen]
					this.fileList[index].url.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.action, 
						filePath: url,
						name: 'file',
						formData: {
							user: 'test'
						},
						header: {
							token: uni.getStorageSync('token')
						},
						success: (res) => {
							console.log('是是撒',res);
							setTimeout(() => {
								resolve(JSON.parse(res.data).data.fullurl)
							}, 1000)
						}
					});
				})
			},
		}
	}
</script>

<style>
	.box {
		display: flex;
		flex-direction: column;
		align-items: center;
		margin-right: 18rpx;
	}
</style>