hwnc/pagesA/components/upload/pretty-uploadFile.vue

<template>
	<view>
		<!-- 上传文件 begin -->
		<view class="display_flex">
			<view class="img_list" v-for="(item, index) in fileList" :key="index">
				<image class="img_item" :src="item.url" @click="preview(item.url)" mode="aspectFill" v-if="item.book == 'img'"></image>
				<view class="upload" @click="prePdf(item.id)" v-else><text class="iconfont iconpdf" style="color:#FF6969;font-size:44px"></text></view>
				<view class="iconfont deleteicon iconshanchu2" @click.stop="delteFile(index)"></view>
			</view>
			<view class="upload img_list" @click="upload('img')">
				<view class="iconfont iconziyuan" style="font-size:20px;"></view>
				上传照片
			</view>
		</view>
		<!-- 上传文件 end -->
	</view>
</template>

<script>
	import { pathToBase64, base64ToPath } from '@/js/pathto64.js'
export default {
	name: 'upload',
	model: {
		prop: 'showPop',
		event: 'change'
	},
	props: {
		limitnumber: {
			type: Number,
			default: 10
		},
	},
	data() {
		return {
			primary:this.$theme.primary,
			settingFile:getApp().globalData.siteinfo,
			fileList: []
		};
	},
	methods: {
		/**
		 * @description 上传文件
		 */
		upload(book) {
			let that = this;
			if (this.fileList.length == this.$props.limitnumber) {
				uni.showToast({
					title: '文件上传已上限',
					icon: 'none'
				});
				return;
			}
			if (book == 'img') {
				uni.chooseImage({
					count: 1,
					sizeType: ['compressed'],
					success: function(res) {
						
						
						pathToBase64(res.tempFilePaths[0]).then(base64=>{
							// console.log(base64)
							// let base64 = 'data:image/jpeg;base64,' + v.data; // 返回的是没有 'data:image/jpeg;base64,'头的数据, 有需要可自行追加上
									that.$emit('upload', base64,);
										that.fileList.push({
											url: base64,
											id: res.uploadId,
											book: 'img'
										});
						})
						//   .then(v => {
						    
						// 	let base64 = 'data:image/jpeg;base64,' + v; // 返回的是没有 'data:image/jpeg;base64,'头的数据, 有需要可自行追加上
						// 	console.log(base64)
						// 	that.$emit('upload', base64,);
						// 				that.fileList.push({
						// 					url: base64,
						// 					id: res.uploadId,
						// 					book: 'img'
						// 				});
						// 				console.log(that.fileList);
						//   })
						//   .catch(error => {
						//     console.error(error)
						//   })
						
						
						// const arrayBuffer = new Uint8Array(res.tempFilePaths[0]); //先将本地图片路径转换成array类型 
						// const base64Img = uni.arrayBufferToBase64(arrayBuffer);  //再转换成base64类型
						
						
						
						// uni.getFileSystemManager().readFile({
						// 	filePath: res.tempFilePaths[0], //选择图片返回的相对路径
						// 	encoding: 'base64', //编码格式
						// 	success: v => {
						// 		//成功的回调
						// 		let base64 = 'data:image/jpeg;base64,' + v.data; // 返回的是没有 'data:image/jpeg;base64,'头的数据, 有需要可自行追加上
						// 		that.$emit('upload', base64,);
						// 			that.fileList.push({
						// 				url: base64,
						// 				id: res.uploadId,
						// 				book: 'img'
						// 			});
						// 	}
						// });
					}
					//   count: 6, //默认9
					//   sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					//   sourceType: ['album'], //从相册选择
					//   success: function (res) {

					// // console.log(res)
					//       console.log(JSON.stringify(res.tempFilePaths));
					//   }
				});
				return;
			}
		},

		/**
		 * @description 预览图片
		 */
		preview(url) {
			uni.previewImage({
				urls: [url],
				current: url
			});
		},
		/**
		 * @description 预览pdf
		 */

		prePdf(e) {
			let id = `/api/v1/consumer/download/${e}`; // 下载pdf文件的借口地址
			previepdf(id);
		},
		/**
		 * @description 删除上传的文件
		 */
		delteFile(index) {  
			this.fileList.splice(index, 1); 
			this.$emit('delteFile', index);
		}
	}
};
</script>

<style>
@import './pretty-uploadFile.css';

.display_flex {
	margin-left: 36rpx;
	display: flex;
	flex-wrap: wrap;
	width: 100%;
}

.fileicon {
	font-size: 25px;
}

/* 上传图片 */
.img_list {
	width: 70px;
	height: 70px;
	border-radius: 5px;
	margin: 10px 5px;
	position: relative;
}

.img > image {
	width: 70px;
	height: 70px;
	border-radius: 5px;
}

.img_item {
	width: 70px;
	height: 70px;
	border-radius: 5px;
}

.upload {
	height: 70px;
	width: 70px;
	background-color: #f7f7f7;
	border: 1px dashed rgb(224, 223, 223);
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	font-size: 14px;
	color: #aaa;
	word-break: break-all;
	overflow: hidden;
}

.deleteicon {
	position: absolute;
	font-size: 20px;
	color: #f93313;
	top: -10px;
	right: -6px;
	background-color: #fff;
	border-radius: 50%;
}
</style>