hire-wx-houxuanren/pagesD/upload.vue

<template>
	<view class="index-page">
		<view class="top">
			微信聊天文件上传
		</view>
		<view class="min">
			支持PDF文件格式，文件大小不超过20M
		</view>
		<view class="left">
			将文件发送至微信(文件传输助手、自己或好友),在本页面点击上传按钮，选择刚才发送文件的聊天对象，选择文件，点击确定即可上传
		</view>
		<view class="back1 " v-if="flielist.length">
			<view class="u-flex u-row-between" v-for="(item,index) in flielist" :key="index" @click="yulan">
				<view class="u-flex">
					<image src="../static/images/pdf.png" style="width: 60rpx;height: 60rpx;" mode=""></image>
					<text>{{name}}</text>
					<text style="margin-left: 20rpx;">点击预览</text>
				</view>
				<u-icon @click="trash(index)" name="trash" size='30'></u-icon>
			</view>
		</view>
		<view v-else class="back u-flex u-row-center" @click="upload1()">
			<u-icon name="plus" size="60"></u-icon>
		</view>
		<view class="button" @click="touserinfo" v-if="flielist.length">
			立即上传
		</view>
		<u-popup :show="show" mode="center" round="20" customStyle="width:80vw;padding:20rpx">
			<view class="font">提示</view>
			<view class="u-flex" style="margin-top: 40rpx;">
				<u-icon name="error" color="#E6A23C" size="24"></u-icon>
				<text>删除后不可恢复，确定删除吗?</text>
			</view>
			<view class="u-flex u-row-between" style="margin-top: 60rpx;">
				<view class="btn1" @click="cancel">取消</view>
				<view class="btn2" @click="end">确定</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import {
		upload,
		update,
	} from "@/units/inquire.js"
	export default {
		data() {
			return {
				show: false,
				name: "",
				path: "",
				flielist: [],
				index: "",
				fill: "",
				path1: ''
			}
		},
		onLoad(options) {
			this.type = options.type
		},
		methods: {
			touserinfo() {
				console.log(this.path);
				update({
					source_type: "file",
					file: this.path,
					title: this.name.slice(0, -4)
				}).then(res => {
					uni.setStorageSync("path1", this.path1)
					const eventChannel = this.getOpenerEventChannel();
					eventChannel.emit('up', this.path1);
					uni.navigateBack()
				})
			},
			yulan() {
				console.log(1111);
				uni.openDocument({
					filePath: this.path1,
					showMenu: true,
					success: function(res) {
						console.log('打开文档成功');
					},
					fail: function() {
						console.log("打开文件失败");
					}
				});
			},
			upload1() {
				let that = this;
				wx.chooseMessageFile({
					count: 1, //限制选择的文件数量
					type: 'file', //非图片和视频的文件,不选默认为all
					extension: [".pdf", 'pdf'], //此处限制文件类型
					success(res) {
						var tempFilePaths = res.tempFiles
						console.log('临时路径', tempFilePaths)
						that.name = tempFilePaths[0].name
						that.path1 = tempFilePaths[0].path
						that.upload(tempFilePaths[0].path)
					}
				})
			},
			upload(file) {
				uni.uploadFile({
					url: 'https://hire.hdlkeji.com/api/common/upload', //仅为示例，非真实的接口地址
					filePath: file,
					name: 'file',
					formData: {
						'user': 'test'
					},
					success: (res) => {
						console.log('uploadImage success, res is:', res)
						uni.hideLoading();
						uni.showToast({
							title: '上传成功',
							icon: 'success',
							duration: 1000
						})
						var obj = JSON.parse(res.data)
						this.flielist.push(obj.data.fullurl)
						this.path = JSON.parse(res.data).data.fullurl
					},
					fail: (err) => {
						console.log('uploadImage fail', err);
						uni.hideLoading();
						uni.showModal({
							content: err.errMsg,
							showCancel: false
						});
					},
				});
			},
			// 取消
			cancel() {
				this.show = false
			},
			end() {
				this.flielist.splice(this.index, 1)
				this.show = false
			},
			trash(index) {
				this.show = true
				this.index = index
			}
		},
	}
</script>

<style lang="scss" scoped>
	.font {
		font-size: 38rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
	}

	.btn1 {
		height: 88rpx;
		line-height: 88rpx;
		text-align: center;
		color: #000;
		width: 30vw;
		border-radius: 12rpx;
		font-size: 34rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		background-color: #e4e4e4;
	}

	.btn2 {
		height: 88rpx;
		line-height: 88rpx;
		text-align: center;
		background-color: #0C66C2;
		color: #fff;
		width: 30vw;
		border-radius: 12rpx;
		font-size: 34rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
	}

	.back1 {
		padding: 10rpx 20rpx;
		border: 2rpx dashed #555555;
		margin-top: 28rpx;
	}

	.index-page {
		overflow: hidden;
		padding: 32rpx;
	}

	.back {
		background-color: rgba(85, 85, 85, 0.5);
		width: 100%;
		height: 628rpx;
		margin-top: 28rpx;
	}

	.left {
		font-size: 28rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #555555;
		margin-top: 60rpx;
	}

	.min {
		font-size: 24rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #777777;
		margin-top: 20rpx;
	}

	.top {
		font-size: 48rpx;
		font-family: PingFangSC-Medium, PingFang SC;
		font-weight: 500;
		color: #222222;
		margin-top: 58rpx;
	}

	.button {
		height: 88rpx;
		background: #0C66C2;
		border-radius: 12rpx;
		font-size: 34rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #FFFFFF;
		line-height: 88rpx;
		text-align: center;
		margin-top: 36rpx;
	}
</style>