uniapp 多文件上传

实现uniapp单个，多个文件上传的功能。 支持上传excel，word，pdf，excel等文件 。我这个文件上传分了两步，一步是选择文件， 第二步时提交文件的同时也把文件路径上传到服务器了，你们根据自己的需求修改

一 获取文件路径

安卓选择文件获取上传路径 - DCloud 插件市场

我通过uniapp官网市场插件首先获取到上传的文件路径

如果文件下载不了，上面那个是压缩包

二 选择文件

代码部分

<view @click="chooseFile">选择附件</view>
//这个是市场插件的代码
<ysh-file-manager ref="filemanager" @result="resultPath"></ysh-file-manager>
// 提交文件
<view @click="submitFile">提交文件</view>

// 点击选择文件后执行下面这两个方法
chooseFile() {
			this.$refs.filemanager._openFile();
},
resultPath(e) {
            // e.path 就是你选择文件的路径
             // 筛选你文件的格式，看个人需求
			let arr = ['jpg', 'JPG', 'png', 'PNG', 'pdf', 'PDF', 'doc', 'DOC', 'docx', 
                   'DOCX', 'jpeg', 'JPEG', 'gif', 'GIF', 'bmp', 'BMP']
 
            // 判断文件是否重复选择，如何重复选择，则给提示，将文件的路径存储到一个空数组中
			if (this.fileList.indexOf(e.path) == -1) {
				this.fileList.push(e.path)
			} else {
				uni.showModal({
					content: '附件已经选择,请勿重复选择',
					showCancel: false,
				})
			}
 
		},
// 提交文件
async uploadFile() {
			uni.showLoading({
				title: '文件上传中,请稍后',
				mask: true
			});
            // 通过for循环和 uni.uploadFile 将你存储到数组中的文件依次到服务器，获取文件的下载地址
			for (let i = 0; i < this.fileList.length; i++) {
				await uni.uploadFile({
                    // url 是你接口前面的公共部分
					url: url + '上传文件路径',
					methods: 'post',
					filePath: this.fileList[i],
					name: 'file',
					formData: {
						// 上传是带的参数在这里面放着
					},
					success: async (uploadFileRes) => {
						let route = JSON.parse(uploadFileRes.data);
						let files = route.content.rows
                        // 将服务器返回的文件地址存储到数组中
						this.list.push(...files)
						if (route.state == 1) {
                            // 这个是判断文件路径是否全部上传到服务器中--文件全部上传到服务器后开始提交文件
							if (this.list.length == this.fileList.length) {
                               // 提交文件
								const { data } = await this.$http({
									url: '文件提交路径',
									method: 'post',
									data: {
                                    // 提交文件的参数
                                    }
								})
								if (data.state == 1) {
									uni.hideLoading()
									uni.showModal({
										content: "文件上传成功",
										showCancel: false,
									})
								} else {
									uni.hideLoading()
									uni.showModal({
										content: data.message,
										showCancel: false
									})
								}
							}
 
						} else {
							uni.hideLoading()
							uni.showModal({
								content: route.message,
								showCancel: false
							});
						}
					},
					fail: (err) => {
						uni.hideLoading();
						uni.showModal({
							content: '附件选择失败,请重试',
							showCancel: false
						});
					}
				})
			}
 
 
 
		},