uni-app 中实现文件和图片的上传-H5

        之前写过一篇上传的文章，但是那篇文章仅仅只能实现上传图片的功能，而且代码写的比较乱，看起来很繁杂，最近有幸又遇到了上传图片和文件的需求，在完成这个功能后，整理一下，希望能给需要做上传功能的人提供一些参考。

        首先我先展示一下我的效果图，方便需求跟我差不多的人快速决定是否继续预览本文章。

需求是：点击上传后，弹出弹框选择要传的文件类型（图片或者文件），前提是每次只能选择一个不能多选，接着就将选好的文件名、路径放在定义好的空数组里面，点击完成后调接口讲数据保存到数据库。

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.token
                    },
                    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官网