uniapp上传图片,调用后端接口

uni.chooseImage({
					count: 1, //默认9
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图,默认二者都有
					sourceType: ['album'], //从相册选择
					success: (res) => {
						uni.uploadFile({//将本地资源上传到开发者服务器
							url:'您的图片上传接口地址', //接口地址
							filePath: res.tempFilePaths[0],//图片地址
							name: 'file',
							header:{
								Authorization:uni.getStorageSync('App-Token'),//加入token
							},
							success: (uploadFileRes) => {
								let data = JSON.parse(uploadFileRes.data)
								console.log(data,"data")
								if(data.code ==200){
									this.fileName=data.fileName
									console.log(this.fileName,'this.fileName')
									this.imgList = this.imgList.concat(data.url)
								}
							}
						});
					}
				});

  • 11
    点赞
  • 13
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
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}` // 返回上传后的文件路径 } }; }); ```

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值