uniapp+node.js+mysql上传图片加表单数据，代码很粗糙将就着看适用于新手

前端这里图片限制了暂时是一张，没有做太多的条件约束

<template>
	<view class="form_list">
		<u-form :model="form" ref="uForm">
			<u-form-item label="标题">
				<u-input v-model="form.title" />
			</u-form-item>
			<u-form-item label="内容">
				<u-input v-model="form.intro" />
			</u-form-item>
			<u-form-item label="图片">
				<u-button @click="checkimg">上传</u-button>
				<img class="img_one" :src="filesArr" alt="" />
			</u-form-item>
			<u-button @click="submit">提交</u-button>
		</u-form>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				form: {
					title: '',
					intro: '',
				},
				filesArr: '',
			};
		},

		methods: {
			checkimg() {
				uni.chooseImage({
					count: 1,
					success: (res) => {
						console.log(res, '返回临时路径');
						this.filesArr = res.tempFilePaths[0];
					}
				});
			},

			submit() {
				if (this.filesArr) {
					uni.uploadFile({
						url: 'http://127.0.0.1:3000/chat',
						filePath: this.filesArr,
						name: 'pic',
						formData: {
							'title': this.form.title,
							'info': this.form.intro,
						},
						success: (res) => {
							console.log('Chat submitted successfully:', res.data);

						},
						fail: (err) => {
							console.error('Chat submission failed:', err);

						},
					});
				} else {
					console.error('No file selected');
				}
			},

		},
	};
</script>

<style scoped>
	.form_list {
		width: 95%;
		margin: 0 auto;
	}

	.img_one {
		width: 50px;
		height: 50px;
	}
</style>

后端

记得托管静态文件

还有配置一下multer

const multer = require('multer');
// 配置multer用于处理文件上传
const storage = multer.diskStorage({
  destination: (req, file, cb) => {
    cb(null, 'uploads/'); // 设置文件存储路径
  },
  filename: (req, file, cb) => {
    cb(null, Date.now() + '-' + file.originalname); // 设置文件名
  },
});

const upload = multer({ storage });
//托管静态文件
app.use('/uploads', express.static('uploads'));

app.post('/chat', upload.single('pic'), (req, res) => {
  const { title, info } = req.body;

  // Assuming you want to store the uploaded picture in the database
  const pic = req.file ? req.file.filename : null;
  const picUrl = pic ? `http://127.0.0.1:3000/uploads/${pic}` : null;

  if (!title || !info) {
      return res.status(400).json({ error: 'Incomplete data for adding a chat' });
  }

  const sql = 'INSERT INTO chat (title, info, pic) VALUES (?, ?, ?)';
  db.query(sql, [title, info, picUrl], (err, results) => {
      if (err) throw err;

      res.json({ message: 'Chat added successfully', chatId: results.insertId });
  });
});

数据库字段

数据名chat列名id，title，info