uni-app 上传文件分类功能需求

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

uni-app 上传文件分类功能需求

文件上传功能描述

安卓和iOS平台支持点击上传文件。对本地文件进行分类,包括视频、图片、Word、PDF和Excel文件,并允许用户根据分类选择文件进行上传。

2 回复

遇到了同样的问题,正在找如何上传word文档


针对您提出的uni-app上传文件并分类的功能需求,以下是一个简化的代码案例,展示了如何实现这一功能。假设我们要实现图片文件的上传,并根据上传的文件类型(例如:风景、人物)进行分类。

1. 前端部分(uni-app)

首先,在pages/upload/upload.vue文件中创建一个上传页面:

<template>
  <view>
    <button @click="chooseImage">选择图片</button>
    <view v-for="(image, index) in images" :key="index">
      <image :src="image.path" style="width: 100px; height: 100px;"></image>
      <picker mode="selector" :range="categories" @change="selectCategory(index, $event.detail.value)">
        <view>分类: {{ categories[image.category] }}</view>
      </picker>
    </view>
    <button @click="uploadImages">上传</button>
  </view>
</template>

<script>
export default {
  data() {
    return {
      images: [],
      categories: ['风景', '人物']
    };
  },
  methods: {
    chooseImage() {
      uni.chooseImage({
        count: 9,
        success: (res) => {
          res.tempFilePaths.forEach((path) => {
            this.images.push({ path, category: 0 }); // 默认分类为风景
          });
        }
      });
    },
    selectCategory(index, value) {
      this.images[index].category = value;
    },
    uploadImages() {
      this.images.forEach((image, index) => {
        uni.uploadFile({
          url: 'https://your-server-url/upload', // 替换为你的服务器上传接口
          filePath: image.path,
          name: 'file',
          formData: {
            category: this.categories[image.category]
          },
          success: (uploadFileRes) => {
            console.log('上传成功', uploadFileRes);
          },
          fail: (err) => {
            console.error('上传失败', err);
          }
        });
      });
    }
  }
};
</script>

2. 后端部分(示例)

后端接收文件及分类信息,并保存到服务器。以下是一个Node.js + Express的示例:

const express = require('express');
const multer = require('multer');
const app = express();
const port = 3000;

const storage = multer.diskStorage({
  destination: function (req, file, cb) {
    cb(null, 'uploads/');
  },
  filename: function (req, file, cb) {
    cb(null, Date.now() + '-' + file.originalname);
  }
});

const upload = multer({ storage: storage });

app.post('/upload', upload.single('file'), (req, res) => {
  const category = req.body.category;
  const filePath = req.file.path;
  // 在此处添加保存文件路径和分类信息的逻辑,例如保存到数据库
  res.send('文件上传成功');
});

app.listen(port, () => {
  console.log(`服务器运行在 http://localhost:${port}`);
});

此代码展示了前端如何选择图片、选择分类并上传,以及后端如何接收并处理上传的文件。请根据实际情况调整代码,特别是服务器地址、接口逻辑及存储方式。

回到顶部