uni-app 小程序上传

在uni-app中实现小程序上传功能，通常涉及前端页面和后端接口的协同工作。以下是一个简单的代码案例，展示如何在uni-app中实现文件上传功能。

前端（uni-app）代码

首先，确保你的uni-app项目已经配置好基础环境，并且已经创建了一个页面用于文件上传。

1. 页面布局（index.vue）

<template>
  <view class="container">
    <button type="primary" @click="chooseImage">选择图片</button>
    <button type="primary" @click="uploadImage" :disabled="!fileList.length">上传图片</button>
    <view v-if="fileList.length">
      <image v-for="(file, index) in fileList" :src="file.path" :key="index" style="width: 100px; height: 100px; margin: 10px;"></image>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      fileList: []
    };
  },
  methods: {
    chooseImage() {
      uni.chooseImage({
        count: 1,
        success: (res) => {
          this.fileList = res.tempFiles;
        }
      });
    },
    uploadImage() {
      const file = this.fileList[0];
      uni.uploadFile({
        url: 'https://your-server-url/upload', // 后端接口地址
        filePath: file.path,
        name: 'file',
        formData: {
          user: 'test'
        },
        success: (uploadFileRes) => {
          console.log('上传成功', uploadFileRes.data);
        },
        fail: (err) => {
          console.error('上传失败', err);
        }
      });
    }
  }
};
</script>

后端代码示例（Node.js + Express）

这里提供一个简单的Node.js后端示例，用于处理文件上传。

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) => {
  console.log(req.file); // 上传的文件信息
  console.log(req.body); // 上传的额外信息
  res.send('文件上传成功');
});

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

说明

• 前端部分使用了uni.chooseImage选择图片，并使用uni.uploadFile上传图片到后端。
• 后端部分使用了Express框架和Multer中间件处理文件上传。
• 在实际项目中，请确保后端接口地址正确，并根据需求调整接口逻辑。
• 处理上传文件时，注意文件存储路径和文件名冲突问题，以及文件大小限制等安全措施。