uniapp 小程序上传图片

uniapp 小程序上传图片本文使用了u-view框架<u-upload :fileList=”fileList1″ accept=’image’ width=’60’ height=”60″ :capture=’capture’ @afterRead=”afterRead” @delete=”deletePic” name=”1″ multiple :maxCount=”10″></u-upload>data(){ return{ capture:[‘album’,’c

大家好,又见面了,我是你们的朋友全栈君。

本文使用了u-view框架

<u-upload
	:fileList="fileList1"
	accept='image'
	width='60'
	height="60"
	:capture='capture'
	@afterRead="afterRead"
	@delete="deletePic"
	name="1"
	multiple
	:maxCount="10"
></u-upload>
data() {
	return {
		capture:['album', 'camera'],
		fileList1:[],
	}
}
afterRead(file) {
	this.fileList1 = [...this.fileList1,...file.file]
},
deletePic(item){
	this.fileList1.splice(item.index,1)
},

点击保存时上传图片


uploadFilePromise(url) {
	return new Promise((resolve, reject) => {
		let a = uni.uploadFile({
			url: `${config.baseUrl}/你的上传接口`, // config.baseUrl为当前域名
			filePath: url,
			name: 'files[]', //根据自己业务场景调整,不是固定的
			formData: {
				user: 'test'
			},
			success: (res) => {
				resolve(res.data)
			}
		});
	})
},
async save(){
	//异步改成同步,因为保存时要拿到图片地址
	//上传图片,拿到图片地址
	let arr = []
	//因为接口不支持多张同时上传,所有循环调接口拿到图片地址
	for (var i = 0; i < this.fileList1.length; i++) {
		let res = await this.uploadFilePromise(this.fileList1[i].url)
		let resImg = JSON.parse(res)
		arr.push(resImg.data)
	}
	let data = {
		data:{
			content:this.info.content,//描述
			pictures:arr.length==0?'':arr.join(','),
			orderType:3,
			"parentId":0,
			"status":0,
			"state":1
		}
	}
	//保存接口
	addStationWorkOrder(data).then(res=>{
    
    })
}
版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请联系我们举报,一经查实,本站将立刻删除。

发布者:全栈程序员-站长,转载请注明出处:https://javaforall.net/150136.html原文链接:https://javaforall.net

(0)
全栈程序员-站长的头像全栈程序员-站长


相关推荐

  • 动态规划之最长回文子串

    动态规划之最长回文子串问题:给出一个字符串S,求S的最长回文子串的长度。样例字符串”PATZJUJZTACCBCC”的最长回文子串为”ATZJUJZTA”,长度为9。        还是先看暴力解法:枚举子串的两个端点i和j,判断在[i,j]区间内的子串是否回文。从复杂度上来看,枚举端点需要0(n2),判断回文需要0(n),因…

    2022年4月26日
    39
  • 万字长文告诉新手如何学习Python图像处理(上篇完结 四十四) | 「Python」有奖征文

    万字长文告诉新手如何学习Python图像处理(上篇完结 四十四) | 「Python」有奖征文这篇文章是图像处理的最后一篇文章,后面我们将进入新的章节。图像处理文章主要讲解的图像处理方法包括图像几何运算、图像量化采样、图像点运算、图像形态学处理、图像增强、图像平滑、图像锐化、图像特效、图像分割、傅里叶变换与霍夫变换、图像分类等。个人感觉如果你是编程初学者、Python初学者或图像处理爱好者,这个系列真心适合你学习,并且这篇文章算是Python图像处理的学习路线,希望您喜欢。

    2022年10月14日
    1
  • Docker 容器网络访问原理,SNAT和DNAT

    Docker 容器网络访问原理,SNAT和DNAT1 容器网络访问原理图 2 网络访问的过程图 4 DOCKERSNAT 与 DNAT5 容器访问外部实现 6 外部访问容器实现

    2025年6月28日
    3
  • BIEE-1 初始化块和变量[通俗易懂]

    BIEE-1 初始化块和变量[通俗易懂]一、初始化块biee初始化块分为资料库、会话两类资料库初始化块:可批量同事定义变量的值配置:1.“编辑数据源”写入sql并分配地址池;2.“编辑数据目标”配置变量,变量的值和初始化sql结果是按顺序匹配的,一对一关系;3.“刷新时间间隔”默认是1小时,即每个一小时系统就会自动执行一遍此初始化块语句,并把结果存在缓冲池中,用户登录系统时,从缓冲池中

    2025年5月24日
    2
  • 格雷码与二进制的转换[通俗易懂]

    格雷码与二进制的转换[通俗易懂]一、什么是格雷码?格雷码,又叫循环二进制码或反射二进制码,格雷码是我们在工程中常会遇到的一种编码方式,它的基本的特点就是任意两个相邻的代码只有一位二进制数不同,这点在下面会详细讲解到。格雷码的基本特点就是任意两个相邻的代码只有一位二进制数不同,这点很重要。常用的二进制数与格雷码间的转换关系如下表:二、二进制格雷码与自然二进制码的互换1、二进制码转换成二进制格雷码  二进制码转换成二进制格雷码,

    2022年10月17日
    2
  • 智能生活 “视”不可挡——首届TCL杯HTML5智能电视开发大赛等你来挑战

    智能生活 “视”不可挡——首届TCL杯HTML5智能电视开发大赛等你来挑战

    2021年12月14日
    48

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

关注全栈程序员社区公众号