uni-app 实现 app 文件多类型多数量上传功能

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

uni-app 实现 app 文件多类型多数量上传功能

功能描述

插件需要支持app (android 和 ios )

简单的描述就是类似网盘那样的有个队列,去选择文件然后有进度和上传成功与否的状态

2 回复

可以做 专业插件开发 q 1196097915 主页 https://ask.dcloud.net.cn/question/91948


实现uni-app中的文件多类型多数量上传功能,通常需要使用<input type="file">元素结合JavaScript的事件处理来完成。以下是一个简单的代码示例,展示了如何实现这个功能。

首先,确保你的uni-app项目已经配置好并可以正常运行。

页面模板(pages/upload/upload.vue

<template>
  <view>
    <button @click="chooseFiles">选择文件</button>
    <view v-for="(file, index) in files" :key="index">
      <text>{{ file.name }}</text>
      <progress :percent="file.uploadProgress || 0"></progress>
    </view>
    <button @click="uploadFiles">上传文件</button>
  </view>
</template>

<script>
export default {
  data() {
    return {
      files: []
    };
  },
  methods: {
    chooseFiles() {
      uni.chooseMessageFile({
        count: 9, // 最多可以选择的文件个数
        type: 'file', // 可以指定为 'image'、'video' 或 'file'
        success: (res) => {
          res.tempFiles.forEach(file => {
            this.files.push({
              ...file,
              uploadProgress: 0
            });
          });
        }
      });
    },
    uploadFiles() {
      this.files.forEach((file, index) => {
        uni.uploadFile({
          url: 'https://your-server-upload-url.com', // 替换为你的上传接口
          filePath: file.path,
          name: 'file',
          success: (uploadRes) => {
            console.log(`文件 ${file.name} 上传成功`);
            this.$set(this.files, index, {
              ...this.files[index],
              uploadProgress: 100
            });
          },
          uploadProgress: (progressRes) => {
            this.$set(this.files, index, {
              ...this.files[index],
              uploadProgress: progressRes.progress
            });
          },
          fail: (err) => {
            console.error(`文件 ${file.name} 上传失败`, err);
          }
        });
      });
    }
  }
};
</script>

<style>
progress {
  width: 100%;
}
</style>

注意事项

  1. 文件选择数量uni.chooseMessageFilecount属性限制了选择文件的数量。
  2. 文件类型type属性可以指定为'image''video''file',根据需求选择。
  3. 上传进度:通过uploadProgress事件可以实时更新上传进度。
  4. 服务器接口:确保uni.uploadFileurl是你实际使用的服务器上传接口。

此示例代码展示了如何在uni-app中实现文件的多类型多数量上传功能,并实时显示上传进度。你可以根据实际需求进一步调整和优化代码。

回到顶部