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

这篇具有很好参考价值的文章主要介绍了uniapp 之使用 u-upload 组件来实现图片上传。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。


前言

在使用 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(val => {
					return val.progress == 100;
				})
				// 如果您不需要进行太多的处理,直接如下即可
				// files = this.$refs.uUpload.lists;
				console.log(files)
			}
		}
	}
</script>

分析

首先可以看到 <u-upload ref="uUpload" :action="action" :auto-upload="true" > 这里的 :auto-upload="true" ,这里是设置文件选中后自动上传,且上传路径为 data 当中定义的 action ,但是这里使用自动上传的时候,只能设置上传的 url 地址,如果业务当中有其他需求,比如请求头中需要携带 token … 将无法满足
因此可以选择将自动上传关掉 :auto-upload="false"
绑定选择完成后的回调函数,并在回调函数当中使用手动上传 @on-choose-complete="onChooseComplete"

二、关闭自动上传,使用手动上传的方式,代码

html 代码

<template>
	<u-form :model="deviceInfo" ref="uForm">
		<view class="top">
			<u-form-item prop="imgUrl" label-width="10" :border-bottom='false'>
				<u-upload @on-choose-complete="onChooseComplete" ref="uUpload" :custom-btn="true"
					:show-upload-list="true" :auto-upload="false" :file-list="fileList" :show-progress="true"
					:deletable="true" max-count="1" class="test2">
					<view slot="addBtn" class="slot-btn" hover-class="slot-btn__hover" hover-stay-time="150">
						<image src="../static/img/addDevice.jpg" mode="aspectFill"></image>
					</view>
				</u-upload>
			</u-form-item>
		</view>
	</u-form>
</template>

js 代码

<script>
	// 这里引入的 Config 中配置了整个项目的接口地址
	import Config from '@/core/config'
	// 这里引入 store 是为了获取 token
	import store from '@/store/index.js';
	// 后端api地址
	const uploadUrl = Config.get('apiUrl') + 'admin-api/infra/file/upload';
	export default {
		data() {
			return {
				// 预置上传列表
				fileList: [],
				deviceInfo: {
					photoUrl: '',
				}
			}
		},
		methods: {
			onChooseComplete(lists, name) {
				const app = this;
				uni.uploadFile({
					// 这里是你上传图片的地址
					// url: 'https://xxx.xx.xx.xx/admin-api/infra/file/upload',
					url: uploadUrl,
					filePath: lists[0].url,
					name: 'file',
					header: {
						"Authorization": `Bearer ${store.getters.token}`
					},
						//	这个res是后端返回给你上传成功的数据里边一般会有上传之后图片的在线路径
					success: (res) => {
						app.deviceInfo.photoUrl = JSON.parse(res.data).data;
						console.log(JSON.parse(res.data).data)
					},
				})
			},
		}
	}
</script>

css 代码

<style lang="scss" scoped>
	.top {
		width: 224rpx;
		height: 224rpx;
		margin: 0 auto;
		margin-bottom: 50rpx;
		margin-top: 50rpx;

		image {
			width: 224rpx;
			height: 224rpx;
			border-radius: 50%;
		}

		.tips {
			font-size: 28rpx;
			color: $u-type-primary;
		}
	}
</style>

当前实现的效果
u-upload,uniapp+微信小程序,uni-app,微信小程序,前端


总结分析

当前项目中提供的上传图片需要携带 token
所以采用了 uni.uploadFile 来上传文件,这里要求参数 url 在app 端写全(携带 http / https )
uni.uploadFile 是无法被统一的请求拦截器拦截到的,如果需要携带请求头,需要自己在 uni.uploadFile 中进行配置,

例如:以上就是今天要讲的内容,本文仅仅简单介绍了pandas的使用,而pandas提供了大量能使我们快速便捷地处理数据的函数和方法。文章来源地址https://www.toymoban.com/news/detail-786871.html

到了这里,关于uniapp 之使用 u-upload 组件来实现图片上传的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 【微信小程序】图片上传组件“mp-uploader“(weui)

       wxml    json    js    weui 是微信官方提供的一款小程序插件,是一套基于样式库 weui-wxss 开发的小程序扩展组件库,同微信原生视觉体验一致的UI组件库,由微信官方设计团队和小程序团队设计。官方文档:https://wechat-miniprogram.github.io/weui/docs/。   图片上传组件

    2024年02月11日
    浏览(53)
  • 【react + antd】antd如何自定义请求使用antd的upload组件实现图片上传且可预览可删除

    官网给出的案例无法使用封装好的请求方式上传图片,以及 无法满足上传图片后获取接口url、名称等信息的的业务需求 。这个时候需要用到customRequest这个api。 但是很遗憾,官网没有给出具体案例。 不过——博主自己试出来了( ̄︶ ̄) 要使用upload,特别重要的属性就是file

    2024年02月17日
    浏览(52)
  • 【uniapp】uview1.x使用upload上传图片

    和2.x不同的是,要用 action 来配置后端上传图片的接口地址; 再来一些配置项的命名有所不同,一般1.x的命名用 - ,2.x的命名使用小驼峰; 1.x 的上传会自带删除时的提示框,2.x 没有; 重要的几个配置项有: picList 初始化为一个空数组,是用来保存图片的列表 baseUrl 为后端上

    2024年02月07日
    浏览(38)
  • element-ui upload图片上传组件使用

    图片上传前端收集 数据 再调用接口发送到后端 组件标签内的参数: 参数 说明 类型 可选值 默认值 action 必选参数,上传的地址 string — — headers 设置上传的请求头部 object — — multiple 是否支持多选文件 boolean — — data 上传时附带的额外参数 object — — name 上传的文件字段

    2023年04月19日
    浏览(43)
  • 扩展element-ui el-upload组件,实现复制粘贴上传图片文件,带图片预览功能

    控件改造 在窗口的 el-form 控件参数中添加 @paste.native 事件,事件绑定方法名 handlePaste 也可以在其他控件中添加事件监听,看个人需求。 注意: 监听粘贴事件时,需要当前页面先获取焦点,否则无法正常监听, 可以在页面加载后调用 focus() 获取焦点 粘贴功能Js部分参考资料

    2023年04月08日
    浏览(100)
  • 【uniapp upload】 上传图片和视频

    2024年02月13日
    浏览(35)
  • 使用el-upload组件实现递归多文件上传

    一、需求描述:在页面上点击按钮弹出选择电脑文件的界面,可以一次性选择多个文件一起上传到服务器上,并把上传成功的文件展示在页面上。 · 二、 问题阐述:el-upload是支持多文件上传的,但是是同步进行的,你点击上传按钮,选择了多个文件后点击确定,会同时调用

    2023年04月08日
    浏览(40)
  • Element中Upload组件上传(图片和文件的默认上传以及自定义上传)

    适用于:文件上传接口只要求file二进制文件,无需其他参数。(或者配置data属性用于上传时附带的额外参数)。 该实现方式会在选择完图片后就根据配置好的action的接口上传地址自动上传图片。 重点就是配置好 action属性 ,以及限制类型和大小。 不需要配置action,使用http-r

    2024年01月21日
    浏览(51)
  • 【前端相关】elementui使用el-upload组件实现自定义上传

    elmentui 中的upload默认的提交行为是通过 action 属性中输入的 url 链接,提交到指定的服务器上。但是这种url提交文件的方式,在实际的项目环境中往往是不可取的。 我们的服务器会拦截所有的请求,进行权限控制,密钥检查,请求头分析等安全行为控制。写在这里的url无法实

    2024年02月08日
    浏览(61)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包