uniapp上传图片到后端
时间: 2023-10-23 14:15:23 浏览: 549
在uniapp中上传图片到后端,可以使用uni.uploadFile()方法。具体步骤如下:
1. 在前端页面中,使用uni.chooseImage()方法选择要上传的图片,并将选择的图片转换为base64格式或者临时文件路径。
2. 调用uni.uploadFile()方法,将图片上传到后端服务器。在上传时,需要设置url、filePath、name、header等参数。其中,url为后端接口地址,filePath为选择的图片路径,name为后端接口中接收图片的参数名,header为请求头信息。
3. 在后端接口中,接收前端传递的图片,并进行处理。
示例代码如下:
```
// 前端页面中
uni.chooseImage({
success: function (res) {
// 将选择的图片转换为base64格式或者临时文件路径
let tempFilePaths = res.tempFilePaths;
uni.uploadFile({
url: 'http://example.com/upload',
filePath: tempFilePaths[0],
name: 'file',
header: {
'content-type': 'multipart/form-data'
},
success: function (res) {
console.log(res.data);
}
});
}
});
// 后端接口中
router.post('/upload', async (ctx, next) => {
const file = ctx.request.files.file; // 获取上传文件
const reader = fs.createReadStream(file.path); // 创建可读流
const ext = file.name.split('.').pop(); // 获取上传文件扩展名
const fileName = `${uuidv4()}.${ext}`; // 生成新的文件名
const filePath = path.join(__dirname, '../public/uploads', fileName); // 生成新的文件路径
const upStream = fs.createWriteStream(filePath); // 创建可写流
reader.pipe(upStream); // 可读流通过管道写入可写流
ctx.body = {
code: 200,
message: '上传成功',
data: {
url: `http://example.com/uploads/${fileName}` // 返回上传后的文件路径
}
};
});
```
阅读全文