uniapp 之使用 u-upload 组件来实现图片上传

最新推荐文章于 2025-07-28 09:32:13 发布

YZRHANYU

最新推荐文章于 2025-07-28 09:32:13 发布

阅读量2.2w

点赞数 8

CC 4.0 BY-SA版权

分类专栏： uniapp+微信小程序文章标签： uni-app 微信小程序前端

本文链接：https://blog.csdn.net/YZRHANYU/article/details/128183020

本文介绍如何使用uni-app中的u-upload组件实现图片上传功能，并详细解释了如何关闭自动上传、手动上传图片的方法，同时展示了如何配置请求头携带token。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

前言

在使用 uniapp 开发的微信小程序中使用了图片上传功能,使用了 uniapp 的图片上传组件
注意：我这里后端接口接收类型为form-data，参数名为files

一、官方示例用法

uview 1.0 u-upload 官方文档

<template>
	<view>
		<u-upload ref="uUpload" :action="action" :auto-upload="true" ></u-upload>
		<u-button @click="submit">提交</u-button>
	</view>
</template>

<script>
	export default {
   
   
		data() {
   
   
			return {
   
   
				action: 'http://www.example.com/upload',
				filesArr: []
			}
		},
		methods: {
   
   
			submit() {
   
   
				let files = [];
				// 通过filter，筛选出上传进度为100的文件(因为某些上传失败的文件，进度值不为100，这个是可选的操作)
				files = this.$refs.uUpload.lists.filter