前言:

记录自己的开发过程中使用uniapp上传图片功能

内容:

uniapp简单来说上传图片功能分为两步:

  1. uni.chooseImage
  2. uni.uploadFile

博主我啊,只是记录如何使用,原理就不就展开说了可以去uniapp官网查看


uni.chooseImage:

作用:选择图片

			uni.chooseImage({
				count: 1, //默认9
				sizeType: ['original', 'compressed'],
				sourceType: ['album', 'camera'],
				success: (res) => {
					console.log(res.tempFilePaths,'图片的本地文件路径列表');
				}
			});

参数解读:count----图片张数、sizeType----original 原图,compressed 压缩图、sourceType----设置图片从那哪儿去,是相册还拍照、success----上传成功的回调,一般可在这就使用uni.uploadFile来上传图片了,但是博主是表单的所以需要进行表单验证完成后才能上传提交图片。(输出的是图片的本地文件路径列表)

uni.uploadFile:

作用:上传图片

uni.uploadFile({
			url: url,//上传图片的地址
			filePath: ...,//这里是图片的本地文件路径列表(选择图片成功的时候可以拿到,在上边的success回调中res.tempFilePaths即可拿到)
			name: '',//上传的名字叫啥都行
			headers: {
					accessToken: //可以设置你的请求头的token噢
					},
			success(res) {
				//上传成功的回调
				这个res是后端返回给你上传成功的数据里边一般会有上传之后图片的在线路径
			}
	})

至此。

Logo

为开发者提供学习成长、分享交流、生态实践、资源工具等服务,帮助开发者快速成长。

更多推荐