微信小程序图片&视频上传以及图片预览

方法一： 使用uni.chooseMedia 推荐，可使用

优点： 可在小程序中正确打开选择文件范围

缺点： 不显示文件名

<button type="primary" form-type="reset" @click="uploadFile" size="mini">选择文件</button>

uploadFile(){
    uni.chooseMedia({
        count: 1, // 默认为9，设置图片或视频的最大选择数量
        mediaType: ['image', 'video'], // 选择媒体类型
        sourceType: ['album', 'camera'], // 选择源类型
        success: (res) => {
          const media = res.tempFiles[0]; // 获取选中的文件
          if (media) {
            // 创建上传任务
              const uploadTask = uni.uploadFile({
                  url: this.apiUrl + '/common/upload', // 替换为你的上传API地址
                  filePath: media.tempFilePath,
                  name: 'file', // 这里根据API的要求来定义
                  formData: {
                        // 这里可以添加其他要上传的参数
                  },
                  success: (uploadRes) => {
                    console.log('upload success:', uploadRes);
                    const res = JSON.parse(uploadRes.data);
                    this.formData.filePath = res.fileName;
                    // this.fileName = res.originalFileName;
                  },
                  fail: (uploadErr) => {
                    console.log('upload fail:', uploadErr);
                  }
             });
        fail: (err) => {
          console.log('选择媒体失败:', err);
        }
     });
}

方式二：使用 uni-file-picker 插件

优点：默认提交到微信的服务区，有选择文件后的文件列表，还有进度条以及删除功能

缺点： 选择文件目前只支持 H5 和 微信小程序平台 ，且 微信小程序平台 使用 wx.chooseMessageFile()，并且微信小程序平台使用其推荐方法后只能从微信聊天记录中选择文件，与想要从手机存储图片和视频的地方选择的预期不符

<uni-file-picker 
       ref="filePicker"
        v-model="filePathsList"  
        file-mediatype="image,video"
        mode="grid"
        file-extname="png,jpg,gif,bmp,mp4,mov"
        :limit="9"
        :auto-upload="false"
        @delete="handleDelete"
        @progress="progress" 
        @click="wxChoose"       
        @select="handleSelect"
   />
   
   // 获取上传状态
    handleSelect(res) {
        console.log('res-uniapp',res);
        this.gloablFile=res.tempFiles;
        // this.uploadImg(res.tempFilePaths, 1);
        const fails = res.tempFiles.map(f => f.file);
        this.uploadImg(fails)
    },
    uploadImg(fails) {
                if (!fails.length) return;  //如果没有选择图片就退出
                uni.showLoading({
                    title: '文件上传中'
                });
                //循环选择图片的张数
                let mapNumber = 0;
                fails.map((file, i) => {
                    const path = file.tempFilePath;
                    const uploadTask = uni.uploadFile({
                      url: this.apiUrl + '/common/upload', // 替换为你的上传API地址
                      // files: file,
                      filePath: path,
                      name: 'file', // 这里根据API的要求来定义
                      formData: {
                        // 这里可以添加其他要上传的参数
                      },
                      onProgressUpdate: (progress) => {
                          console.log('res',res);
                          file.progress = progress.progress;
                          this.updateFileProgress(file);
                      },
                      success: (uploadRes) => {
                        console.log('upload success:', uploadRes);
                        
                        const res = JSON.parse(uploadRes.data);
                        if(uploadRes.statusCode == 200){
                            if(res.code == 200){
                                this.gloablFile[i].filePath = res.fileName;
                                this.gloablFile[i].originalFilename = res.originalFilename;
                            }else{
                                // this.gloablFile.splice(i,1);
                            }
                        }
                        mapNumber ++;
                        if(mapNumber == fails.length){
                            uni.hideLoading();
                            uni.showToast({
                                title: `文件上传成功`,
                                icon: 'none',
                            })
                            this.showFile = true;
                        }
                      },
                      fail: (uploadErr) => {
                        console.log('upload fail:', uploadErr);
                      }
                    });
                })
            },

方式三：使用 wx.chooseMessageFile()

优点： 可显示出选择的文件名

缺点： 小程序中选择的是聊天记录里面的文件，而非手机存储照片视频的地方

wx.chooseMessageFile({
      count: 9, // 允许选择的文件数量，默认为1
      type: 'file', // 可以是 'image', 'video', 'file'     //注意：type类型为 all 时，真机中的小程序会打不开文件选择，失效报错  type类型不符
      extension: ['png', 'jpg', 'mp4'],
      success(res) {
        const chosenFiles = res.tempFiles; // 返回选择的文件列表
        console.log('选择的文件:', chosenFiles);
    
        that.gloablFile = chosenFiles;
        // const fails = res.tempFiles.map(f => f.file);
        that.uploadImg(chosenFiles)
      },
      fail(err) {
        console.error('选择文件失败:', err);
      },
});

方法四： 使用 wx.chooseMedia 推荐，最终选择

优点： 能够正确打开手机选择文件，并可带拍照功能

缺点：不能显示出文件名，但可以显示 文件类型，大小

wx.chooseMedia({
        count: 9,
        mediaType: ['image','video'],
        sourceType: ['album', 'camera'],
        maxDuration: 30,
        camera: 'back',
        success(res) {
          console.log('res',res);
          const chosenFiles = res.tempFiles; // 返回选择的文件列表
          console.log('选择的文件:', chosenFiles);
          that.gloablFile = that.gloablFile.concat(chosenFiles);     // 可多次选择
          that.uploadImg(that.gloablFile);
        },
          fail(err) {
            console.error('选择文件失败:', err);
          },
    });

图片缩略图和图片放大预览（多个图片可全屏滑动查看）

wx.previewImage({
        urls: this.gloablFile.map(g => g.tempFilePath),
        current: this.gloablFile[i].tempFilePath,      // 可直接查看图片选中时返回的带有http链接的临时地址
})