之前写过一篇上传的文章📕，但是那篇文章仅仅只能实现上传图片的功能，而且代码写的比较乱，看起来很繁杂，最近有幸又遇到了上传图片和文件的需求，在完成这个功能后，整理一下，希望能给需要做上传功能的人提供一些参考😊。
首先我先展示一下我的效果图，方便需求跟我差不多的人快速决定是否继续预览本文章。
需求是：点击上传后，弹出弹框选择要传的文件类型（图片或者文件），前提是每次只能选择一个不能多选，接着就将选好的文件名、路径放在定义好的空数组里面，点击完成后调接口讲数据保存到数据库。
html部分本文不提供，只提供上传文件部分的js代码。代码如下：
//点击弹出框类型后的方法
selectClick(e) {
let that = this
if (e.name == '相册') {//上传图片
uni.chooseImage({
count: 3,
sourceType: ['album', 'camera'],
success(res) {
that.upLoadFileByUni(res)
}
})
} else if (e.name == '文件') { //上传文件
uni.chooseFile({
count: 3, //默认100
extension: ['.zip', '.doc','.docx','.xlsx','.xls','.txt','.ppt','.pptx','.pdf'],//想要上传的文件类型
success(res) {
that.upLoadFileByUni(res)
}
});
} else {
this.showSheet = false //关闭弹出框
}
},//上传文件
upLoadFileByUni(res){
let that = this
uni.uploadFile({
url: 'http://xxxxxx/upload',
filePath: res.tempFilePaths[0],
name: 'files',
formData: {//调用上传接口需要的参数
type:xxx,
name:res.tempFiles[0].name,
xxx:'xx'
},
header:{
token:that.t0ken
},
success: (uploadFileRes) => {
that.showSheet = false
that.fileList.push(JSON.parse(uploadFileRes.data).data)
that.$refs.uToast.show({
message: '上传成功',
position: 'top',
type: 'success'
})
}
})
}
使用的是uni.app官方提供的方法uni.chooseFile、uni.chooseImage、uni.uploadFile,有不懂的可以直接看光网文档：uni.chooseImage(OBJECT) | uni-app官网 uni.chooseFile(OBJECT) | uni-app官网
uni.uploadFile(OBJECT) | uni-app官网
