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)
上一篇 2022年6月17日 下午11:18
下一篇 2022年6月17日 下午11:18


相关推荐

  • Vue调试工具安装(vue devtools)

    Vue调试工具安装(vue devtools)Vue调试工具安装(vuedevtools)第一步:下载源码第二步:执行命令第一步:下载源码在github下载devtools源码,地址:https://github.com/vuejs/vue-devtools。第二步:执行命令下载好后进入vue-devtools-master工程执行cnpminstall,下载依赖,然后执行npmrunbuild,编译源程序。cmd回车后进入到vuedevtools的安装目录下。执行命令:(1)…

    2025年6月9日
    11
  • mysql数据库同步工具_mysql同步工具_mysql数据库同步

    mysql数据库同步工具_mysql同步工具_mysql数据库同步 下载网站:www.SyncNavigator.CN  客服QQ1793040———————————————————-  关于HKROnlineSyncNavigator注册机价格的问题HKROnlineSyncNavigator 8.4.1企业版数据同步软件自2009年第一个版…

    2022年6月28日
    32
  • CWnd的派生类-3、CDialog类

    CWnd的派生类-3、CDialog类

    2021年8月11日
    72
  • 预测算法用java实现吗_java 数据结构与算法

    预测算法用java实现吗_java 数据结构与算法常见的预测算法有1.简易平均法,包括几何平均法、算术平均法及加权平均法;2.移动平均法,包括简单移动平均法和加权移动平均法;3,指数平滑法,包括一次指数平滑法和二次指数平滑法,三次指数平滑法;4,线性回归法,包括一元线性回归和二元线性回归,下面我一一的简单介绍一下各种方法。 4P5?.C(B4j”^5_2h  一,简易平均法,是一种简便的时间序列法。是以一定观察期的数据求得

    2025年6月18日
    4
  • xsync 脚本[通俗易懂]

    xsync 脚本[通俗易懂]xsync文件分发脚本#!/bin/bash#1获取输入参数个数,如果没有参数,直接退出pcount=$#if((pcount==0));thenechonoargs;exit;fi#2获取文件名称p1=$1fname=`basename$p1`echofname=$fname#3获取上级目录到绝对路径pdir=`cd-P$(dirname$p1…

    2022年6月2日
    50
  • db4o基础一[通俗易懂]

    db4o基础一[通俗易懂]1.打开数据库IObjectContainerdb=Db4oFactory.OpenFile(YapFileName);\\’c:\db4obasic.yap’//IObjectConta

    2022年7月1日
    26

发表回复

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

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