uniapp 上传附件

附件上传

  • 一、uni附件上传


一、uni附件上传

1、模板部分
uniapp 上传附件_第1张图片

	<!-- 附件 -->
			<view class="">
				<view class="content-title"><span></span>附件:</view>
				<view class="content-main" style="border: 0;">
					<span v-show="form.filedList&&form.filedList.length==0" style="color:#727A89">{{'暂无数据'}}</span>
					<view>
						<view v-for="(item,index) in form.filedList" :key="index"
							style="display: flex;justify-content: space-between;align-items: center;">
							<view style="display: flex;align-items: center;flex: 1;">
								<image style="width: 70rpx;height: 70rpx;margin-right: 3px;" :src="getFileIcon(item)"
									mode="widthFix" @click="previewImg(item,index)">
								</image>
								<text class="">{{item.oldName}}</text>
							</view>
							<view class="btn" @click="openDoc(item)">预览</view>
						</view>
					</view>
				</view>

			</view>

2、方法

uniapp 上传附件_第2张图片

// 预览文件
			openDoc(item) {
				uni.showLoading({
					title: '加载中'
				});
				uni.downloadFile({
					url: item.path,
					success: function(res) {
						var filePath = res.tempFilePath;
						uni.openDocument({
							filePath: filePath,
							showMenu: true,
							success: function(res) {
								uni.hideLoading();
							}
				 	});
					}
				});
			},

uniapp 上传附件_第3张图片

	// 预览图片多张
			previewImg(logourl) {
				//是图片则全屏放大
				let arr = ['.gif', '.jpg', '.jpeg', '.png']
				if (arr.indexOf(logourl.suffix.toLowerCase()) == -1) return
				let imgsArray = [];
				imgsArray[0] = logourl.path
				uni.previewImage({
					current: 0,
					urls: imgsArray
				});
			},
			getFileIcon(item) {
				let type = item.suffix
				console.log(type,"type")
				if (type.indexOf('.xls') != -1 || type.indexOf('.xlsx') != -1) {
					return '../../../static/fontIcon/excel2x.png';
				} else if (type.indexOf('.docx') != -1 || type.indexOf('.doc') != -1) {
					return '../../../static/fontIcon/word2x.png';
				} else if (type.indexOf('.pdf') != -1) {
					return '../../../static/fontIcon/pdf2x.png';
				} else if (type.indexOf('.ppt') != -1 || type.indexOf('.pptx') != -1) {
					return '../../../static/fontIcon/ppt2x.png';
				} else if (type.indexOf('.txt') != -1 ) {
					return '../../../static/fontIcon/txt.png';
				}else if (type.indexOf('.zip') != -1) {
					return '../../../static/fontIcon/zip.png';
				}else if (type.indexOf('.video') != -1 ) {
					return '../../../static/fontIcon/video.png';
				}else if (type.indexOf('.music') != -1) {
					return '../../../static/fontIcon/music.png';
				}else {
					return '../../../static/fontIcon/otherWen.png';
				}
				
			},


你可能感兴趣的:(uniapp,前端,javascript,vue.js)