跨平台应用开发进阶(四) ：uni-app 实现上传图片(2)

最新推荐文章于 2024-05-04 21:03:39 发布

2401_84447262

最新推荐文章于 2024-05-04 21:03:39 发布

阅读量188

点赞数 5

分类专栏：程序员文章标签： uni-app

本文链接：https://blog.csdn.net/2401_84447262/article/details/138431588

版权

本文介绍如何在uni-app中实现从本地相册选择或相机拍照上传图片，包括预览、删除和压缩功能。虽然uni-app官方推荐的图片上传组件不适用于本地服务器，但作者提供了详细的项目实战逻辑，包括视图渲染、图片上传、预览、删除和压缩的JS代码实现。

摘要由CSDN通过智能技术生成

本地相册选择图片或使用相机拍照上传图片；

可以预览选择上传的图片；

删除选错或不选的图片；

经过研读uni-app门户，官网推荐应用uni.chooseImage(OBJECT)接口从本地相册选择图片或使用相机拍照。

对于门户提到的

选择照片大多为了上传，uni ui封装了更完善的uni-file-picker组件，文件选择、上传到uniCloud的免费存储和cdn中，一站式集成。强烈推荐使用。

⚠️本人并不认可，经过实践可知，该接口只能实现客户端将图片资源上传到uniCloud后台服务器中，并不支持本地服务器，故并不满足功能需求，需谨慎使用。

项目实现页面大致逻辑如下，完整页面实现逻辑可移步《Uni-app 实现图片上传、删除、预览、压缩》下载。

视图渲染

<template>
	<view class="center">
		<!-- 上传图片 -->
		<view class="uploadClass">
			<view class="imgClass" v-for="(item, i) in imgLis

关注

专栏目录