wx.chooseMedia深入研究！

如何处理wx.chooseMedia选择的媒体文件？

当使用wx.chooseMedia选择媒体文件后，可以根据以下步骤进行处理：

一、获取媒体文件信息

1. 在成功回调函数中，可以通过res.tempFiles获取选择的媒体文件数组。每个元素包含了媒体文件的相关信息，如临时路径tempFilePath、文件大小size、文件类型type等。

   wx.chooseMedia({
     count: 1,
     mediaType: ['image'],
     sourceType: ['camera'],
     success: (res) => {
       if (res.tempFiles && res.tempFiles.length > 0) {
         const selectedFile = res.tempFiles[0];
         console.log('照片路径：', selectedFile.tempFilePath);
         console.log('文件大小：', selectedFile.size);
         console.log('文件类型：', selectedFile.type);
       } else {
         console.error('未获取到照片路径');
       }
     },
     fail: (err) => {
       console.error('选择媒体文件失败：', err);
     },
   });
   

二、显示媒体文件

1. 如果是图片文件，可以在页面上使用<image>标签显示。将获取到的临时路径设置为<image>的src属性。

   <view class="left-section">
     <image wx:if="{{ifphotosfzFront}}" class="section-image" src="/images/sfzFront.png" mode="" />
     <image wx:else src="{{photosfzFront}}"></image>
     <view>上传身份证正面</view>
   </view>
   

   Page({
     data: {
       ifphotosfzFront: true,
       photosfzFront: '',
     },
     takesfzFront() {
       // 调用系统相机或相册选择媒体文件
       wx.chooseMedia({
         count: 1,
         mediaType: ['image'],
         sourceType: ['camera'],
         success: (res) => {
           if (res.tempFiles && res.tempFiles.length > 0) {
             this.setData({
               ifphotosfzFront: false,
               photosfzFront: res.tempFiles[0].tempFilePath,
             });
           } else {
             console.error('未获取到照片路径');
           }
         },
         fail: (err) => {
           console.error('选择媒体文件失败：', err);
         },
       });
     },
   });
   

三、上传媒体文件

1. 如果需要将选择的媒体文件上传到服务器，可以使用wx.uploadFile。

   takesfzFront() {
     // 调用系统相机或相册选择媒体文件
     wx.chooseMedia({
       count: 1,
       mediaType: ['image'],
       sourceType: ['camera'],
       success: (res) => {
         if (res.tempFiles && res.tempFiles.length > 0) {
           const uploadTask = wx.uploadFile({
             url: 'your_server_url', // 服务器地址
             filePath: res.tempFiles[0].tempFilePath,
             name: 'file',
             success: (uploadRes) => {
               console.log('上传成功：', uploadRes.data);
             },
             fail: (err) => {
               console.error('上传失败：', err);
             },
           });
         } else {
           console.error('未获取到照片路径');
         }
       },
       fail: (err) => {
         console.error('选择媒体文件失败：', err);
       },
     });
   },
   

四、添加水印或其他处理

1. 可以对选择的图片文件进行进一步处理，如添加水印、裁剪、压缩等。可以使用小程序的画布功能或第三方库来实现这些处理。

   takesfzFront() {
     // 调用系统相机或相册选择媒体文件
     wx.chooseMedia({
       count: 1,
       mediaType: ['image'],
       sourceType: ['camera'],
       success: (res) => {
         if (res.tempFiles && res.tempFiles.length > 0) {
           const imagePath = res.tempFiles[0].tempFilePath;
           this.addWatermark(imagePath);
         } else {
           console.error('未获取到照片路径');
         }
       },
       fail: (err) => {
         console.error('选择媒体文件失败：', err);
       },
     });
   
     addWatermark(imagePath) {
       const now = new Date();
       const dateTime = `${now.getFullYear()}-${now.getMonth() + 1}-${now.getDate()} ${now.getHours()}:${now.getMinutes()}:${now.getSeconds()}`;
       wx.getImageInfo({
         src: imagePath,
         success: (imageInfo) => {
           const canvas = wx.createCanvasContext('myCanvas');
           canvas.drawImage(imagePath, 0, 0, imageInfo.width, imageInfo.height);
           canvas.setFontSize(20);
           canvas.setFillStyle('rgba(255, 255, 255, 0.7)');
           canvas.fillText(dateTime, 10, imageInfo.height - 30);
           canvas.draw(false, () => {
             wx.canvasToTempFilePath({
               canvasId: 'myCanvas',
               success: (res) => {
                 // 处理带水印的图片路径
                 console.log('带水印的照片路径：', res.tempFilePath);
               },
               fail: (err) => {
                 console.error('生成带水印图片失败', err);
               },
             });
           });
         },
         fail: (err) => {
           console.error('获取图片信息失败', err);
         },
       });
     }
   },
   

以上是一些常见的处理wx.chooseMedia选择的媒体文件的方法，可以根据实际需求进行调整和扩展。

如何预览选择的媒体文件？

在微信小程序中，可以使用wx.previewMedia方法来预览选择的媒体文件。以下是具体步骤：

一、获取选择的媒体文件路径

假设你已经通过wx.chooseMedia选择了媒体文件，并将其路径存储在一个变量中，例如：

wx.chooseMedia({
  count: 1,
  mediaType: ['image'],
  sourceType: ['camera'],
  success: (res) => {
    if (res.tempFiles && res.tempFiles.length > 0) {
      const selectedFile = res.tempFiles[0];
      this.setData({
        selectedMediaPath: selectedFile.tempFilePath,
      });
    } else {
      console.error('未获取到照片路径');
    }
  },
  fail: (err) => {
    console.error('选择媒体文件失败：', err);
  },
});

二、调用预览方法

在适当的时候，比如点击一个预览按钮，可以调用wx.previewMedia方法来预览选择的媒体文件：

<view>
  <button bindtap="previewMedia">预览媒体文件</button>
</view>

previewMedia() {
  const { selectedMediaPath } = this.data;
  if (selectedMediaPath) {
    wx.previewMedia({
      sources: [
        {
          url: selectedMediaPath,
          type: 'image', // 根据实际文件类型设置
        },
      ],
    });
  } else {
    console.error('没有选择媒体文件，无法预览');
  }
}

在上述代码中，首先通过wx.chooseMedia选择媒体文件并保存其路径。然后，当点击预览按钮时，调用previewMedia方法，通过wx.previewMedia方法传入包含媒体文件路径和类型的对象数组来进行预览。

注意，确保在调用wx.previewMedia之前已经选择了有效的媒体文件，否则会出现错误提示。

如何限制用户选择的媒体文件类型？

在微信小程序中，可以通过wx.chooseMedia的参数来限制用户选择的媒体文件类型。以下是具体方法：

一、设置mediaType参数

在调用wx.chooseMedia时，可以设置mediaType参数来指定允许选择的媒体类型。例如，如果你只想允许用户选择图片，可以这样设置：

wx.chooseMedia({
  count: 1,
  mediaType: ['image'], // 只允许选择图片
  sourceType: ['camera', 'album'], // 可以从相机或相册选择
  success: (res) => {
    // 处理选择的图片
  },
  fail: (err) => {
    console.error('选择媒体文件失败：', err);
  },
});

如果你只想允许选择视频，可以设置为['video']。如果同时允许图片和视频，可以设置为['image', 'video']。

二、自定义选择界面提示

为了更好地引导用户选择特定类型的媒体文件，可以在选择界面上提供一些提示信息。例如，在页面上显示一个提示文字，告诉用户只能选择图片或视频：

<view>
  <text>请选择图片或视频文件。</text>
  <button bindtap="chooseMedia">选择媒体文件</button>
</view>

这样，用户在打开选择界面时，就会看到提示信息，从而更好地理解可以选择的媒体文件类型。

通过以上方法，可以有效地限制用户选择的媒体文件类型，确保用户选择符合预期的文件。