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

阿里云国内75折回扣微信号：monov8

阿里云国际，腾讯云国际，低至75折。AWS 93折免费开户实名账号代冲值优惠多多微信号：monov8 飞机：@monov6

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

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

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

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'
                       })
                   }
               })
           }