uView UI框架中u-upload组件实现多平台图片上传

10 次阅读

uView UI是一款基于Vue生态开发的跨平台UI组件库，广泛应用于Uni-app项目开发中。对于移动端应用而言，图片上传是非常常见的业务需求，例如用户头像修改、商品图片上传、动态发布、资料提交等场景。uView UI提供的u-upload组件封装了文件选择、图片预览、上传状态管理等功能，可以帮助开发者快速实现稳定、高效的图片上传功能。

结合Uni-app多端运行特性，u-upload组件能够同时适配微信小程序、H5、App等平台。通过合理配置上传接口、文件数量限制、图片格式验证以及上传回调，可以构建满足实际项目需求的图片上传模块。

u-upload组件基本介绍

u-upload是uView UI提供的上传组件，主要用于处理本地图片选择以及文件上传操作。组件内部集成了图片选择API，可以调用不同平台对应的文件选择能力。

常用功能包括：

  • 单张或多张图片上传

  • 图片预览

  • 删除已选择图片

  • 限制上传数量

  • 限制图片大小

  • 自定义上传请求

  • 上传状态显示

  • 支持拍照上传

相比传统手动调用uni.chooseImage和uni.uploadFile方法，u-upload减少了大量重复代码，提高了开发效率。

安装与引入uView UI

如果项目中还未安装uView UI，需要先完成组件库配置。

通过npm安装：

Bash
npm install uview-ui

安装完成后，在项目入口文件中引入：

JavaScript
import uView from "uview-ui";

Vue.use(uView);

然后根据项目版本配置对应的主题文件和样式。

在页面中即可使用u-upload组件：

vue

基础图片上传实现

最简单的图片上传，只需要配置上传地址和相关参数。

示例代码：

vue

	
		
			:fileList="fileList"
			@afterRead="afterRead"
			@delete="deletePic"
			name="1"
			multiple
		>
	



export default {
	data() {
		return {
			fileList: []
		}
	},
	methods: {
		afterRead(event) {
			console.log(event);
		},

		deletePic(event) {
			this.fileList.splice(event.index, 1);
		}
	}
}

用户选择图片后，u-upload会触发afterRead事件，开发者可以在该方法中处理文件上传逻辑。

调用接口上传图片

实际项目中，图片通常需要上传到服务器，而不是只保存在本地。

可以通过uni.uploadFile完成服务器上传：

JavaScript
afterRead(event) {

	let file = event.file;

	uni.uploadFile({
		url: "https://example.com/upload",
		filePath: file.url,
		name: "file",
		header: {
			token: uni.getStorageSync("token")
		},
		success: (res) => {

			let data = JSON.parse(res.data);

			this.fileList.push({
				url: data.url
			});
		}
	});
}

上传流程如下：

  1. 用户选择图片。

  2. u-upload返回本地临时路径。

  3. 调用uni.uploadFile发送文件。

  4. 后端接收文件并保存。

  5. 返回图片访问地址。

  6. 更新fileList显示上传结果。

这种方式能够兼容多个运行平台，是Uni-app项目中比较常见的实现方案。

多图片上传处理

很多业务需要一次上传多张图片，例如商品发布、朋友圈动态等。

可以开启multiple属性：

vue

	:fileList="fileList"
	multiple
	:maxCount="9"
	@afterRead="afterRead"
>

其中：

  • multiple表示支持多选图片。

  • maxCount限制最大上传数量。

  • fileList用于保存已上传图片数据。

上传完成后，可以循环处理多个文件：

JavaScript
afterRead(event) {

	event.file.forEach(item => {

		this.uploadImage(item);

	});

}

封装上传方法：

JavaScript
uploadImage(file){

	uni.uploadFile({
		url:"https://example.com/upload",
		filePath:file.url,
		name:"file",
		success:(res)=>{

			console.log("上传成功",res);

		}
	});

}

通过方法封装，可以避免重复代码，提高项目维护性。

图片上传参数配置

u-upload提供多个常用配置项，可以满足不同业务需求。

限制图片数量

vue

	:maxCount="5"
>

表示最多上传5张图片。

限制文件大小

可以在上传前进行判断：

JavaScript
afterRead(event){

	let file = event.file;

	if(file.size > 1024 * 1024 * 5){

		uni.showToast({
			title:"图片不能超过5MB",
			icon:"none"
		});

		return;
	}

}

限制图片格式

例如只允许上传jpg和png：

JavaScript
let allowType = [
	"image/jpeg",
	"image/png"
];

if(!allowType.includes(file.type)){

	uni.showToast({
		title:"图片格式不支持",
		icon:"none"
	});

	return;

}

多平台适配注意事项

由于Uni-app需要运行在不同环境中，图片上传时需要注意平台差异。

微信小程序

微信小程序上传需要注意：

  • 域名必须配置合法服务器地址。

  • 接口必须使用HTTPS。

  • 需要在微信公众平台配置request合法域名。

H5端

H5运行环境受到浏览器限制：

  • 文件大小可能受到浏览器影响。

  • 跨域问题需要服务器支持CORS。

  • 上传接口需要允许OPTIONS请求。

App端

App上传通常权限更加宽松，但需要注意：

  • Android需要申请存储权限。

  • iOS需要配置访问相册权限描述。

通过u-upload配合uni-app接口，可以有效屏蔽大部分平台差异。

上传失败处理机制

实际开发中，需要考虑网络异常、服务器错误等情况。

可以增加失败提示：

JavaScript
uni.uploadFile({

	url:"https://example.com/upload",

	filePath:file.url,

	name:"file",

	success(res){

		console.log(res);

	},

	fail(){

		uni.showToast({

			title:"上传失败，请重试",

			icon:"none"

		});

	}

});

同时建议：

  • 上传按钮增加loading状态。

  • 失败后支持重新上传。

  • 对服务器返回结果进行校验。

删除图片功能实现

用户选择错误图片时，需要支持删除。

示例：

JavaScript
deletePic(event){

	this.fileList.splice(
		event.index,
		1
	);

}

如果服务器已经保存图片，还需要调用后台删除接口：

JavaScript
deleteImage(id){

	uni.request({

		url:"https://example.com/delete",

		method:"POST",

		data:{
			id:id
		}

	});

}

这样可以避免服务器产生无效文件。

图片上传性能优化建议

为了提升用户体验，图片上传过程中可以进行优化：

图片压缩

移动端拍摄照片通常较大，可以上传前压缩：

JavaScript
uni.compressImage({

	src:file.url,

	success(res){

		console.log(res.tempFilePath);

	}

});

压缩后能够减少上传时间，降低服务器压力。

分批上传

大量图片同时上传可能造成网络拥堵，可以采用队列方式：

JavaScript
async uploadList(list){

	for(let item of list){

		await this.uploadImage(item);

	}

}

添加上传进度

对于大文件，可以监听上传进度：

JavaScript
let uploadTask = uni.uploadFile({

	url:"接口地址",

	filePath:path,

	name:"file"

});

uploadTask.onProgressUpdate((res)=>{

	console.log(res.progress);

});

常见问题及解决方案

上传成功但页面不显示图片

原因通常是fileList格式错误。

u-upload需要：

JavaScript
[
	{
		url:"图片地址"
	}
]

而不是直接保存字符串。

小程序上传失败

检查：

  • request合法域名。

  • HTTPS配置。

  • 后端接口是否允许上传。

图片上传接口无法接收文件

检查name参数：

JavaScript
name:"file"

必须和后端接收字段保持一致。

token验证失败

上传接口通常需要登录认证，可以添加请求头：

JavaScript
header:{
	token:uni.getStorageSync("token")
}

总结

uView UI中的u-upload组件为Uni-app项目提供了一套简单高效的图片上传方案。通过结合uni.uploadFile接口，可以实现微信小程序、H5以及App多平台兼容的图片上传功能。

在实际开发过程中，需要重点关注文件格式验证、上传数量控制、异常处理、图片压缩以及权限配置等问题。合理封装上传逻辑，不仅能够提高代码复用性，也能让图片上传模块更加稳定可靠。

文章标签
uView UI Uni-app u-upload组件 图片上传 多平台开发