实现uniapp单个,多个文件上传的功能。 支持上传excel,word,pdf,excel等文件 。我这个文件上传分了两步,一步是选择文件, 第二步时提交文件的同时也把文件路径上传到服务器了,你们根据自己的需求修改
一 获取文件路径
我通过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
});
}
})
}
},