Uniapp上传文件pdf/word各种格式

需求：定义一个上传文件的框，点击框上传文件后进行按钮点击上传调接口。当上传成功后，显示在页面上上传的文件名称

第一步：本地上传，使用*uni.chooseMessageFile()*方法，上传成功后给data赋值以便调接口时使用（赋的是上传成功后的返回值，可以拿到上传文件的名称，路径等）

第二步：调用接口，在data中获取刚才本地上传成功的数据，返回给后端

代码如下：

注意：样式可能不完整，仅供参考

html:

<!-- 上传文件 -->
			<view class="uploadContent">
				<view class="uploadText">
					请上传文件
				</view>
				<!-- 上传文件展示 -->
				<view class="uploadFileBox" v-if="fileList.length!=0">
					<view class="iconFile">
						<image class="uploadIcon" src="../../static/images/public/file.png" mode=""></image>
					</view>
					<view class="uploadTexts">
						{{fileList[0].name}}
					</view>
					<view class="iconFile">
						<image class="uploadIcon" src="../../static/images/public/success.png" mode=""></image>
					</view>
				</view>
				<view class="uploadChoose" @click="uploadFile()">
					<view class="pop-cont flex-column-center">
						<image src="../../static/images/home/file.png" mode=""></image>
						<span>支持pdf/word格式，大小不超过50MB</span>
					</view>
				</view>
			</view>
			<!-- 上传文件按钮 -->
			<view class="uploadButton" @click="submitAll()">
				<view class="buttonSubmit">
					上传
				</view>
			</view>

js

data() {
			return {
				fileList: [], //点击上传后，在 本地 保留的文件地址及其他的文件信息
			}
		},
methods:{
	// 本地上传文件
			uploadFile() {
				let that = this
				uni.chooseMessageFile({
					count: 1, //一次可以上传多少个
					// type: 'file', 
					extension: ['.doc', '.pdf', '.docx'], //文件类型
					success(res) {
						that.fileList = res.tempFiles;
						that.$forceUpdate() //有时候页面渲染不上，这里强制刷新
					},
					fail: (err) => {
						console.log(err, 'err');
						that.$forceUpdate()
					}
				});
			},
			async submitAll() { //点击按钮调用接口
				if (this.fileList.length != 0) { //判断是否上传文件
					let params = {
						"fileName": this.fileList[0].name, //名称
						"fileUrl": this.fileList[0].path //路径
					}
					let data = await insertFile(params)
					if (data.data.code == 200) { //如果成功，则弹窗成功
						uni.showToast({
							title: data.data.msg,
							icon: 'none',
							duration: 3000
						})
					}
				} else {
				//检验是否上传文件
					uni.showToast({
						title: '请检查是否上传文件',
						icon: 'none',
						duration: 2000
					})
				}
			}
}

css

			.uploadContent {
				width: calc(100% - 10vw);
				height: 35vh;
				border-radius: 5px;
				box-shadow: 0 4px 10px 0 rgba(0, 0, 0, 0.1), 0 6px 20px 0 rgba(0, 0, 0, 0.1);
				background: #fff;
				margin-top: 3vh;
				padding-top: 2.8vh;

				.uploadText {
					width: 100%;
					height: 3vh;
					font-size: 5vw;
					font-weight: 600;
					text-align: center;
					letter-spacing: 1vw;
					padding-bottom: 2vh;
				}

				.uploadFileBox {
					width: calc(100% - 10vw);
					height: 2vh;
					color: #999;
					padding: 0px 5vw;
					display: flex;

					.iconFile {
						width: 10%;
						height: 100%;

						.uploadIcon {
							width: 20px;
							height: 20px;
						}
					}

					.uploadTexts {
						width: 80%;
						height: 100%;
						line-height: 100%;
						white-space: nowrap;
						overflow: hidden;
						text-overflow: ellipsis;
						font-size: 4vw;
					}
				}

				.uploadChoose {
					width: 100%;
					height: calc(100% - 4vh);

					.pop-cont {
						width: 75%;
						height: calc(100% - 18vh);
						margin: 20px auto;
						padding: 5vh 5vw;
						border: 1px dashed #5895ff;
						border-radius: 10px;

						image {
							width: 56px;
							height: 56px;
						}

						span {
							font-size: 14px;
							color: #999;
							margin-top: 10px;
						}
					}
				}
			}

			.uploadButton {
				width: calc(100% - 10vw);
				height: 7vh;
				background: #1677FF;
				border-radius: 5px;
				margin-top: 3.5vh;

				.buttonSubmit {
					width: 100%;
					height: 100%;
					font-size: 4vw;
					color: #fff;
					display: flex;
					justify-content: center;
					align-items: center;
				}
			}