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() 进行图片预览