当前位置:   article > 正文

uniapp 上传附件_uniapp上传附件

uniapp上传附件

附件上传


一、uni附件上传

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>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20

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();
							}
				 	});
					}
				});
			},

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20

在这里插入图片描述

	// 预览图片多张
			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';
				}
				
			},


  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/我家小花儿/article/detail/613875
推荐阅读
相关标签
  

闽ICP备14008679号