uni-app导入文档文件

最新推荐文章于 2025-10-13 16:42:35 发布

原创最新推荐文章于 2025-10-13 16:42:35 发布 · 1.5k 阅读

6 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #uni-app

uni-app 专栏收录该内容

1 篇文章

订阅专栏

本文档详细介绍了如何在uni-app中导入并使用文档文件。首先，你需要从指定地址下载插件，然后选择合适版本进行导入。接着，在项目中正确引入插件，将<file-l ref="lFile" @up-success="onSuccess">放置在页面最前面，以便实现文档上传成功后的处理方法。

准备

下载插件

插件地址 https://ext.dcloud.net.cn/plugin?id=1015
选择版本导入插件
在这里插入图片描述

引入

import lFile from '@/components/l-file/l-file.vue'


components: {
			lFile
		},

使用

<l-file ref=“lFile” @up-success=“onSuccess”>放在最前面

<template>
	<view class="fz">
		<l-file ref="lFile" @up-success="onSuccess"></l-file>
		<view class="item">
			<view class="tit"><text class="write">*</text>文档名称
			</view>
			<view class="content">
				<input placeholder="请输入文档名称" placeholder-class="placeholderclass" v-model="form.fileName" class="val" />
				<span class="iconfont icon-shanchu del" v-show="form.fileName.length>0"
					@click="delm('fileName')"></span>
			</view>
		</view>

		<view class="item">
			<view class="tit"><text class="write">*</text>档案文件</view>
			<button type="primary" size="mini" @tap="onUpload">上传文件</button>

		</view>
		

		<!-- <button class="submit blueBtn" hover-class="btnBlueHoverclass" @click="submit">确定</button> -->

	</view>
</template>

方法

/* 上传 */
			onUpload() {
				var token = uni.getStorageSync('token')
				this.$refs.lFile.upload({
					// #ifdef APP-PLUS
					currentWebview: this.$mp.page.$getAppWebview(),
					// #endif
					url: 'http://8.135.112.236/prod-api/gk/file/uploadArchivesFile?archivesDataId=' + this.archivesDataId +
					 "&archivesId=" + this.archivesId + "&archivesStatus="
					 + this.form.archivesStatus + "&fileName=" + this.form.fileName 
					 + "&isShare=" +this.form.isShare,
					 name: 'file',
					header: {'Authorization':'Bearer ' + token},
				});
			},
			onSuccess(res) {
				//console.log('上传成功回调=====33====', JSON.stringify(res.data),res.data.statusCode)
				if(res.data.statusCode==200){
					uni.showToast({
						title: '上传成功!',
					})
					this.form={
					fileName: '',
					archivesStatus: 1,
					isShare: 1,
					}
				}else{
					uni.showToast({
						title: '上传失败!',
						icon:'none'
					})
				}
				
			},