微信小程序前端调用一次后端接口实现批量上传图片和参数,前后端代码示例
时间: 2024-04-22 16:25:58 浏览: 134
好的,以下是一个简单的微信小程序前端调用一次后端接口实现批量上传图片和参数的示例代码。
前端代码:
```javascript
wx.chooseImage({
count: 9, // 最多可以选择的图片张数
sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图,默认二者都有
sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机,默认二者都有
success: function (res) {
// 将选择的图片上传到服务器
wx.uploadFile({
url: 'https://example.com/upload', // 后端接口地址
filePath: res.tempFilePaths, // 需要上传的文件列表
name: 'file', // 后端接口中接收文件的参数名
formData: {
'user': 'test' // 其他需要传递的参数
},
success: function (res) {
// 上传成功后的处理
console.log(res.data)
},
fail: function (res) {
// 上传失败后的处理
console.log(res.errMsg)
}
})
}
})
```
后端代码(使用 Node.js 和 Express 框架):
```javascript
const express = require('express')
const multer = require('multer')
const app = express()
// 设置文件上传的存储位置和文件名
const storage = multer.diskStorage({
destination: function (req, file, cb) {
cb(null, 'uploads/')
},
filename: function (req, file, cb) {
cb(null, file.originalname)
}
})
// 创建一个 multer 实例,用于处理文件上传
const upload = multer({ storage: storage })
// 处理文件上传的接口
app.post('/upload', upload.array('file'), function (req, res, next) {
// 打印上传的文件信息和其他参数
console.log(req.files)
console.log(req.body)
res.send('上传成功')
})
// 启动服务器并监听端口
app.listen(3000, function () {
console.log('服务器已启动,监听 3000 端口')
})
```
以上代码仅作为示例,具体实现应根据实际需求进行修改。