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)
全栈程序员-站长的头像全栈程序员-站长


相关推荐

  • linux端口占用清除[通俗易懂]

    查看端口占用:lsof-i:端口号清除占用该端口的所有进程:sudokill-9$(lsof-i:端口号-t)

    2022年4月13日
    110
  • enum和int、string的转换操作

    enumCountries{中国=5,美国,俄罗斯,英国,法国}enum和intenum->intintnum=(int)Countries.中国; 

    2021年12月25日
    62
  • MyBatis快速入门(19)Mybatis分页插件[通俗易懂]

    下面讨论mybatis中经典的分页插件的使用方法。1.引入分页插件2.配置拦截器插件helperDialect:分页插件会自动检测当前的数据库链接,自动选择合适的分页方式。你可以配置helperDialect属性来指定分页插件使用哪种方言。配置时,可以使用下面的缩写值:oracle,mysql,mariadb,sqlite,hsqldb,postgresql,db2,sqlserver,informix,h2,sqlserver2012,derby特别注…

    2022年4月5日
    60
  • CSS之创意hover效果

    CSS之创意hover效果

    2020年11月19日
    219
  • 项目范围管理:项目范围管理的概念是什么_项目范围管理规划案例

    项目范围管理:项目范围管理的概念是什么_项目范围管理规划案例项目范围管理包括确保项目做且只做所需的全部工作,以成功完成项目的各个过程。 项目范围管理关注的焦点是:什么是包括在项目之内的,什么是不包括在项目之内的,即为项目工作明确划定边界。 对项目范围管理和控制的有效性,是衡量项目是否达到成功的一个必要标准,项目范围的管理不仅仅是项目整体管理的一个主要部分,同时在项目中不断地重申项目工作范围,有利于项目不偏离轨道,是项目中实施控制管理的一个主要手段。 项目范围是项目其他各方面管理的基础。如果范围都弄不清楚,成本、进度和质量等就无从谈起。确认项目范围对项目管理有如

    2022年9月22日
    4
  • iframe 透明兼容,设置iframe透明背景的方法

    iframe 透明兼容,设置iframe透明背景的方法从IE5.5+就支持iframe框架的背景透明。通过使用allowtransparency和background-color来设置iframe框架的透明效果,代码如下:1<iframesr

    2022年7月2日
    27

发表回复

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

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