jcyjdt_applet/components/upload/index.vue

<template>
	<view class="upload">
		<view class="upload_1">
			<view class="list" v-for="(item,index) in list" :key="index">
				<view class="name">
					<text @tap="toView(index,item)" class="text">{{item.name}}</text>
					<uni-icons @tap="uplDel(index,item)" type="close" size="20"></uni-icons>
				</view>
			</view>
			<view class="list" v-if="list&&list.length<count">
				<button size="mini" class="button" @tap="uplSuc()">文件上传</button>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			list: {
				type: Array,
			},
			name: {
				type: String,
			},
			count: {
				type: Number,
				default: 1
			}
		},
		data() {
			return {

			};
		},
		methods: {
			uplSuc() {
				const that = this;
				let serverFile = that.$config.serverFile;
				uni.chooseFile({
					count: 1,
					extension: ['.doc', '.xls', '.ppt', '.pdf', '.docx', '.xlsx', '.pptx'],
					success: async function(res) {
						let tempFile = JSON.parse(JSON.stringify(res.tempFilePaths));
						const arr = await that.$apifile(`/jcyjdt/basic/upload`, 'file', tempFile[0],
							'file');
						that.$emit('uplSuc', {
							data: {
								name: arr.name,
								uri: arr.uri,
								url: serverFile + arr.uri
							},
							name: that.name
						})
					}
				});
			},
			// 删除图片
			uplDel(index, e) {
				const that = this;
				that.$emit('uplDel', {
					data: {
						file: e,
						index: index
					},
					name: that.name
				})
			},
			// 文件预览
			toView(index, item) {
				const that = this;
				let serverUrl = that.$config.serverFile;
				let url = item[0].url
				// 判断前面是否有http
				const http = url.lastIndexOf("http");
				if (http == -1) url = serverUrl + url
				//获取最后一个.的位置
				const arr = url.lastIndexOf(".");
				//获取后缀
				const typeName = url.substr(arr + 1);
				//支持预览的文件类型
				//微信小程序
				let fileType = ['doc', 'xls', 'ppt', 'pdf', 'docx', 'xlsx', 'pptx'];
				uni.showLoading({
					title: '加载中',
					mask: true
				})
				//下载文件资源到本地
				uni.downloadFile({
					url: url,
					success: function(res) {
						uni.hideLoading();
						var filePath = res.tempFilePath;
						if (!fileType.includes(typeName)) {
							return false;
						}
						uni.showLoading({
							title: '正在打开',
							mask: true
						})
						// 新开页面打开文档，支持格式：doc, xls, ppt, pdf, docx, xlsx, pptx。
						uni.openDocument({
							filePath: filePath,
							fileType: typeName, // 文件类型，指定文件类型打开文件，有效值 doc, xls, ppt, pdf, docx, xlsx, pptx 
							success: res => {
								uni.hideLoading();
								console.log('打开文档成功', res);
							},
							fail: openError => {
								uni.hideLoading();
								console.log('fail:' + JSON.stringify(openError));
							}
						});
					},
					fail: function(err) {
						uni.hideLoading();
						console.log('fail:' + JSON.stringify(err));
					}
				});
			}
		}
	}
</script>

<style lang="scss">
	.upload {
		padding: 0 2vw;

		.upload_1 {
			.list {
				.name {
					display: flex;
					justify-content: space-between;
					margin: 0 0 1vw 0;

					.text {
						font-size: var(--font14Size);
						color: var(--f85Color);
					}
				}

				.button {
					color: var(--mainColor);
					background-color: var(--f07CColor);
				}
			}
		}
	}
</style>