移动端上传文件封装

移动端上传文件封装

<template>
	<view class="">
		<view class="uploadbox" @click="upload">
			<view class="addfont">
				+
			</view>
		</view>
		<view ref="input" class="" style="opacity: 0;height: 0;">

		</view>
		<view class="fileList">
			<view class="fileitem" v-for="(item,index) in fileList" :key="index">
				<view class="fonts">{{item.originalFileName}}</view>
				<u-button shape="square" size="mini" class="btns" @click="delBtn(index)">删除</u-button>
			</view>
		</view>
		<!-- 进度条 -->
		<view class="linebox" v-if="ispercentage">
			<u-line-progress active-color="#2979ff" :percentage="percentage" :striped-active="true"></u-line-progress>
		</view>
	</view>
</template>

<script>
	import {
		removFile,
	} from "../service/index.js"
	export default {
		props: {
			type: {
				type: String,
				default: ''
			}
		},
		data() {
			return {
				percentage: 0,
				ispercentage: false,
				fileList: [],
				videoList: ['']
			}
		},
		methods: {
			getSuffix(fileName) { // suffix后缀名，fileName文件名
				var suffix = "";
				var i = fileName.lastIndexOf("."); // 如果不是-1表示该字符串中存在.
				if (i != -1) {
					suffix = fileName.substring(i + 1); // 截取到了后缀名
				}
				return suffix;
			},
			upload() {
				if (this.type == '') {
					uni.showToast({
						icon: 'none',
						title: '请选择类型'
					})
					return false
				}
				var input = document.createElement('input');
				input.type = 'file';
				if (this.type == '1') {
					input.accept = '*'
				} else if (this.type == '2') {
					input.accept = 'video/*'
				}
				this.$refs.input.$el.appendChild(input);
				input.onchange = () => {
					const file = input.files[0];

					if (file.size > (1024 * 1024 * 200)) {
						uni.showToast({
							title: '单个文件请勿超过200M,请重新上传',
							icon: 'none'
						})
					}
					let formData = new FormData();
					formData.append('file', file);
					let xhr = new XMLHttpRequest();
					xhr.open("POST", '请求地址', true);
					xhr.setRequestHeader('Token', uni.getStorageSync("token"));
					xhr.upload.addEventListener("progress", function(event) {
						let percents = Math.ceil(event.loaded * 100 / event.total) + "%";
						if (event.lengthComputable) {
							let percent = Math.ceil(event.loaded * 100 / event.total) + "%";
							uni.showLoading({
								title: `努力上传中..${percent}`
							})
							this.percentage = percent
						}
					}, false);
					xhr.ontimeout = function() {
						// xhr请求超时事件处理
						uni.showToast({
							title: '请求超时'
						})
					};
					this.ispercentage = true
					this.percentage = 0
					xhr.onreadystatechange = () => {
						if (xhr.readyState == 4) {
							console.log('status：' + xhr.status);

							if (xhr.status == 200) {
								uni.hideLoading();
								uni.showToast({
									title: '上传成功',
									icon: 'none'
								})
								const response = JSON.parse(xhr.responseText);
								console.log(response)
								this.fileList.push(response.fileAttribute)
								this.$emit('uploadchange', this.fileList)
								this.percentage = 100
								setTimeout(() => {
									this.hideper()
								}, 1000);
							} else {
								this.hideper()
								uni.hideLoading();
								uni.showToast({
									title: '上传失败',
									icon: 'none'
								})
							}

						}
					};
					xhr.send(formData);



				}
				input.click()
			},
			hideper() {
				this.ispercentage = false
			},
			delBtn(index) {
				uni.showLoading({
					title: `删除中...`
				})
				removFile(this.fileList[index].name).then((res) => {
					if (res && res.success) {
						this.fileList.splice(index, 1);
						this.$emit('uploadchange', this.fileList)
						uni.hideLoading();
						uni.showToast({
							title: '删除成功',
							icon: 'none'
						})
					}
				}).catch((err) => {
					console.log("错误信息：", err);

					uni.hideLoading();
					uni.showToast({
						title: '删除失败',
						icon: 'none'
					})
				})

			}

		}
	}
</script>

<style lang="scss" scoped>
	.uploadbox {
		width: 160rpx;
		height: 160rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		background-color: #f4f5f7;
		border-radius: 2px;
		margin: 0 8px 8px 0;
		box-sizing: border-box;

	}

	.addfont {
		font-size: 60rpx;
	}

	.fileList {
		.fileitem {
			display: flex;
			justify-content: space-between;
			align-items: center;
			border: 1px solid #eee;
			box-sizing: border-box;
			border-radius: 5px;
			margin-bottom: 10px;
			padding: 10px 5px;
			width: 100%;

			.fonts {
				width: 40vw;
				text-overflow: -o-ellipsis-lastline;
				overflow: hidden;
				text-overflow: ellipsis;
				display: -webkit-box;
				-webkit-line-clamp: 3;
				line-clamp: 3;
				-webkit-box-orient: vertical;
				word-break: break-all;
				color: #1275d7;
			}

			.btns {
				width: 80px;
				height: 30px;
				border-radius: 15px;
				color: white;
				background-color: #1275d7a1;

			}
		}
	}

	.linebox {
		width: 100%;
	}
</style>