uni-app 实现小红书图片视频上传的效果

发布于 1周前 作者 zlyuanteng 来自 Uni-App

uni-app 实现小红书图片视频上传的效果

插件需求描述

插件要求：

  1. 点击拍照，弹出插件，底部有tabbar，左边是选择相册的照片和视频，中间是录小视频，右边是拍照。
  2. 录视频和照片支持美颜，滤镜功能。

解决目的：

uniapp项目，有一个动态列表，需要上传图片和视频的需求。发布动态时，只有一个按钮。需要一个按钮实现弹出资源选择框。uniapp的组件实现不了这个效果。

文件名 下载链接
视频效果.zip 下载

图片1 图片2 图片3 图片4 图片5


Harmonyos Next教程
3 回复

样式可以类同即可，不用跟小红书一模一样，实现这些功能即可。


做过类似的,qq985062246

在 uni-app 中实现小红书图片和视频上传的效果，可以通过以下步骤来完成。这包括前端选择文件、预览文件以及通过 API 上传到服务器。以下是一个简化的代码示例，展示了如何实现这一功能。

1. 前端选择文件和预览

首先，我们需要一个页面来选择图片或视频文件，并展示预览。

<template>
  <view>
    <button @click="chooseFile">选择图片或视频</button>
    <view v-for="(file, index) in files" :key="index">
      <image v-if="isImage(file)" :src="file.path" style="width: 100px; height: 100px;"></image>
      <video v-else :src="file.path" style="width: 100px; height: 100px;" controls></video>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      files: []
    };
  },
  methods: {
    chooseFile() {
      uni.chooseMessageFile({
        count: 9,
        type: 'image,video',
        success: (res) => {
          this.files = res.tempFiles;
        }
      });
    },
    isImage(file) {
      return file.type.startsWith('image/');
    }
  }
};
</script>

2. 上传文件到服务器

接下来，我们需要编写上传文件的代码。这里假设你有一个后端 API 可以接受文件上传。

methods: {
  async uploadFiles() {
    for (const file of this.files) {
      const formData = new FormData();
      formData.append('file', {
        uri: file.path,
        name: file.name,
        type: file.type
      });

      try {
        const response = await uni.uploadFile({
          url: 'https://your-server.com/upload', // 替换为你的上传接口
          filePath: file.path,
          name: 'file',
          formData: formData,
          success: (uploadFileRes) => {
            console.log('上传成功', uploadFileRes);
          },
          fail: (err) => {
            console.error('上传失败', err);
          }
        });
      } catch (error) {
        console.error('上传错误', error);
      }
    }
  }
}

3. 调用上传方法

你可以在页面加载时、点击按钮时或其他合适的地方调用 uploadFiles 方法。

<template>
  <view>
    <button @click="chooseFile">选择图片或视频</button>
    <button @click="uploadFiles">上传</button>
    <view v-for="(file, index) in files" :key="index">
      <image v-if="isImage(file)" :src="file.path" style="width: 100px; height: 100px;"></image>
      <video v-else :src="file.path" style="width: 100px; height: 100px;" controls></video>
    </view>
  </view>
</template>

注意事项

  1. 文件大小限制：在实际应用中，你可能需要限制文件的大小。
  2. 进度条：为了用户体验，可以添加上传进度条。
  3. 错误处理：详细的错误处理可以提供更好的用户体验。

通过上述代码，你可以在 uni-app 中实现类似于小红书的图片和视频上传功能。

回到顶部