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

Stitch_xiao

已于 2023-03-31 15:30:07 修改

阅读量6.4k

点赞数 7

分类专栏： uni-app h5 文章标签： uni-app

于 2023-01-18 18:11:11 首次发布

本文链接：https://blog.csdn.net/stitch_xiao/article/details/128728765

版权

uni-app 同时被 2 个专栏收录

16 篇文章 1 订阅

订阅专栏

1 篇文章 0 订阅

订阅专栏

文章介绍了如何使用uni-app的uni.chooseImage和uni.chooseFile方法实现单个图片和文件的上传功能，包括限制文件类型和上传后的处理。代码经过整理，更清晰易懂，成功后会将文件信息保存到数组并显示上传成功提示。

摘要由CSDN通过智能技术生成

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

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

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

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