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


相关推荐

  • Android Studio获取开发版SHA1和发布版SHA1[通俗易懂]

    Android Studio获取开发版SHA1和发布版SHA1[通俗易懂]一、获取开发板SHA进入目录C:\Users\ad.android下,执行:keytool-list-v-keystoredebug.keystore,输入口令:android(默认密码)二、获取发布版SHAAndroidSudio工具栏,Build–GenerateSignedBundleorAPK–APK.1、选择新建一个KeyStore签名文件,如果已经有了签名…

    2022年8月10日
    4
  • Java分页显示(旅游线路)

    Java分页显示(旅游线路)

    2021年11月11日
    32
  • c语言位运算符的用法_c语言运算符大全

    c语言位运算符的用法_c语言运算符大全一、位运算符C语言提供了六种位运算符:&按位与|按位或^按位异或~取反>>右移1.按位与运算按位与运算符”&”是双目运算符。其功能是参与运算的两数各对应的二进位相与。只有对应的两个二进位均为1时,结果位才为1,否则为0。参与运算的数

    2022年10月5日
    0
  • LAN8720A网络模块关于时钟的使用问题「建议收藏」

    LAN8720A网络模块关于时钟的使用问题「建议收藏」微雪的LAN8720A驱动电路:正点原子LAN8720A驱动电路:1、nINTSELConfiguration从原理图中可以看出正点原子的LAN8720A模块所使用的晶振是25M,而微雪的LAN8720A模块使用的晶振是50M,根据数据手册和结合原理图可以看出,微雪的LAN8720A的nINTSEL没有接下拉,则是默认使用内部上拉到高电平,即nINTSEL=1,为REF_CLKInMode模式,所以选用50M的晶振。…

    2022年6月22日
    152
  • zabbix 监控介绍「建议收藏」

    zabbix 监控介绍「建议收藏」一、监控介绍你用过哪些监控软件?zabbix和nagios、cacti、ganglia有什么区别?zabbix有那些好处?zabbix的监控流程是什么?zabbix常见监控项有那些?1、CactiCacti是一套基于PHP、MySQL、SNMP及RRDTool开发的监测图形分析工具,Cacti是使用轮询的方式由主服务器向设备发送数据请求来获取设备上状态数据信息的,如果设备不断增多,这个轮询的过程就非常的耗时,轮询的结果就不能即时的反应设备的状态

    2022年4月28日
    77
  • c++并发编程实战 豆瓣_c++11并发编程

    c++并发编程实战 豆瓣_c++11并发编程一个简单的线程程序#include <iostream>#include <thread>using namespace std;void hello(){ std::cout << “Hello Concurrent World\n”;}int main(){ thread t(hello); t.join();}…

    2022年8月18日
    4

发表回复

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

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