uniapp实现上传图片及图片预览

在 UniApp 中使用uni.chooseImage API实现从相册选择图片上传,该方法可以指定图片的选择来源、数量和大小等属性。

1.上传图片

//获取焦点 上传文件
uploadFilePromise() {
const that = this
//从相册选择图片
  uni.chooseImage({
    count: 1, // 选择一张图片 不设置可以选多张
    sizeType: ["original", "compressed"], // 可以选择原图或压缩图
    sourceType: ["album"], // 从相册选择 不设置可以从相册选或者拍照上传
	success(res) {			
	that.tempFilePaths = res.tempFiles
	const formdata = res.tempFiles
    //获取到图片路径
    console.log(formdata, 'formdata')
	formdata.forEach(item => {
    //上传
	uni.uploadFile({
		url: VUE_APP_API + '/uploadFile', //环境变量 + 腾讯云上传服务的接口
		filePath: item.path, //图片路径
		name: 'file', 
		header: {
				"Authorization": ""  //请求头内容
				},
		success: (uploadFileRes) => {
		console.log(uploadFileRes, 'uploadFileRes')
		const responseData = JSON.parse(uploadFileRes.data)
       //解析上传成功后的图片id
		that.form.fileIds.push(responseData.data)
        that.pathList.push(item.path)						
			}
		});
	})
}
	});
	},

2.图片预览

lookImg(index) {
	console.log(index, "indexx")
	uni.previewImage({
		current: index,
		urls: this.pathList,  //图片路径
		longPressActions: {
			itemList: ['发送给朋友', '保存图片', '收藏'],
			success: function(data) {
		      console.log('选中了第' + (data.tapIndex + 1) + '个按钮,第' + (data.index + 1) + '张图片');
			},
			fail: function(err) {
			  console.log(err.errMsg);
						}
					}
				});
			},

总结
通过上面的步骤可以实现在uniapp中从相册批量上传图片,并进行图片预览的功能


1.通过uni.chooseimage() 从相册上传图片

2.通过uni.uploadFile() 上传到服务器 获取id (如果页面需要增删改查 需要id)

3.使用uni.previewImage() 进行图片预览

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值