Upload 上传:图片上传_upload上传并显示图片-程序员宅基地

技术标签: 前端  uView1.0  javascript  开发语言  

需要用到的API

action:服务器上传地址
max-count:最大选择图片的数量
form-data:上传额外携带的参数
name:上传文件的字段名,供后端获取使用

第一种:选择图片后,直接上传

<template>
	<view class="index">
		<u-upload 
		:show-progress="false"
		:action="action" 
		:form-data="formData" 
		max-count="3" 
		name="file"
		@on-uploaded="onUploaded"  
		@on-change="onChange"></u-upload>
	</view>
</template>
<script>
	export default {
      
		data() {
      
			return {
      
				// 演示地址,请勿直接使用
				action: 'https://api.diandianhg.com/api/common/upload',
				formData: {
      
					access_token:uni.getStorageSync('access_token')
				},
				fileList: []
			}
		},
		methods:{
      
			// 上传成功
			onUploaded(res) {
      
				this.fileList = res;
				console.log(this.fileList);
			},
			// 无论成功失败都会触发
			onChange(res){
      
				let data = JSON.parse(res.data)
				if(data.code == 0){
      
					console.log(data)
					uni.showToast({
      
						icon:'none',
						title: data.msg,
					});
				}
			}
		}
	}
</script>

url: 图片地址
error:组件内部使用,不应根据此值判断上传是否成功,而应根据progress属性
progress:如果值为100,表示图片上传成功
response:上传成功后,服务器返回的数据,这是最有用的了
在这里插入图片描述

上传失败的情况提示,

在这里插入图片描述

碰到的BUG:
1、发布文章,需要上传图片(最多三张)
2、发布成功后,可以进行修改,需要把之前上传的的图片显示出来,这里用 fileList 数组存。

官方描述:

可以通过设置file-list参数(数组,元素为对象),显示预置的图片。其中元素的url属性为图片路径
<u-upload 
	:show-progress="false" 
	:action="action" 
	:form-data="formData" max-count="3"
	name="file" 
	:file-list="fileList" 
	@on-uploaded="onUploaded" 
	@on-remove="onRemove">
</u-upload>

<script>
// data中定义的两个数组:
fileList:[], // 显示默认的图片,以及修改后的图片集合
imgArr:[], // 未修改的图片集合
// 把之前上传过的图片,分别存入fileList和imgArr。
item.attaches.forEach((item, index) => {
      
	this.fileList.push({
      
		path:item.path
	})
	this.imgArr.push({
      
		url:this.$imgUrl+item.path,
		path:item.path
	})
})
onUploaded(res) {
      
	this.fileList = res;
},
// 删除
onRemove(e) {
      
	this.imgArr.splice(e, 1)
},

let str = [];
let medias = [];
// 编辑内容
if(this.edit == 1){
      
	// 如果item.response && item.response.code == 1,说明已经进行了修改,把修改后的 重新上传的图片url 存入str。
	this.fileList.forEach(item=>{
      
		if(item.response && item.response.code == 1){
      
			str.push(item.response.data.url)
		}
	})
	
	// 如果未修改的图片没有删除完,就把未删除的图片也存入 str 。
	if(this.imgArr.length>0){
      
		this.imgArr.forEach(item=>{
      
			if(item.path){
      
				str.push(item.path)
			}
		})
	}
}
</script>

这里说下为什么不能直接要用两个数组存。
这是默认一进来,自己组合数据后的fileList
在这里插入图片描述
如果你修改了其中一张图片,数据格式会出现错误。
在这里插入图片描述

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/qq_40745143/article/details/121203318

智能推荐

L1-014. 简单题_输出事实this-程序员宅基地

文章浏览阅读3.1w次。https://www.patest.cn/contests/gplt/L1-014这次真的没骗你 —— 这道超级简单的题目没有任何输入。你只需要在一行中输出事实:“This is a simple problem.”就可以了。#include &lt;iostream&gt;#include &lt;cstdio&gt;using namespace std;int main(){..._输出事实this

Multipathd Daemon was Unable to Set Options "fast_io_fail_tmo" or "dev_loss_tmo" Under UEK1 or RHCK_multipath rport failed to read dev_loss_tmo value -程序员宅基地

文章浏览阅读421次。Multipathd Daemon was Unable to Set Options "fast_io_fail_tmo" or "dev_loss_tmo" Under UEK1 or RHCK (文档 ID 1678794.1) APPLIES TO:Linux OS - Version Oracle Linux 5.7 with Unbreakable Enterprise Ker..._multipath rport failed to read dev_loss_tmo value error 2

Jython_Jython Development Tools (JyDT) for Eclipse_jythontools-程序员宅基地

文章浏览阅读729次。Installing JyDTThis section describes how to install JyDT by connecting to the JyDT update siteon the internet. If you have downloaded an update site to a computer on your network, please follow the_jythontools

验证结构中IMonitor的作用_验证 monitor组件的主要功能-程序员宅基地

文章浏览阅读922次。DUT 的 input 端口采用的monitor 是干嘛的呢?根据白书: 一,大型项目中,driver 根据协议发送数据,而monitor根据协议接收数据。如果driver和monitor由不同人实现,那么可以大大减少其中任意一方对协议理解的错误。二,便于复用???另外,我的一点理解是:用于判断是否真的将输入,打入了DUT。????就一般环境,IF与dri_验证 monitor组件的主要功能

kubernetes apiserver 报错 service-account-issuer is a required flag-程序员宅基地

文章浏览阅读1.8k次。k8s kube-apiserver 启动报错k8s 版本 1.24根据报错提示说的是是一个必须的参数我们来看一下这个参数是干啥的服务帐号令牌颁发者的标识符。 颁发者将在已办法令牌的 “iss” 声明中检查此标识符。 此值为字符串或 URI。 如果根据 OpenID Discovery 1.0 规范检查此选项不是有效的 URI,则即使特性门控设置为 true, ServiceAccountIssuerDiscovery 功能也将保持禁用状态。 强烈建议该值符合 OpenID 规范: https://_service-account-issuer

【CodeForces - 988C 】Equal Sums (思维,STLmap,STLset,tricks)_草莓^app^【755c.top】最新版-程序员宅基地

文章浏览阅读288次。题干:You are given kk sequences of integers. The length of the ii-th sequence equals to nini.You have to choose exactly two sequences ii and jj (i≠ji≠j) such that you can remove exactly one element ..._草莓^app^【755c.top】最新版

随便推点

Windows下Cygwin环境的Hadoop安装(4)- 在Eclipse中建立hadoop开发环境_hadoop class path 多个文件 cygwin-程序员宅基地

文章浏览阅读6.3k次。在使用hadoop的过程中,不可避免地遇到一些问题需要对hadoop代码进行改进,这就要求我们必须建立一个可修改hadoop代码的开发环境,下面的过程,我们就来建立一个基于Eclipse的hadoop开发环境。- 安装AntHadoop的编译需要Ant的支持,从这里下载并安装最新的Ant:http://ant.apache.org/bindownload.cgi。安装完成后,别忘了将_hadoop class path 多个文件 cygwin

VB:所有控件自适应窗口大小_控件随窗体大小变化改变 vb代码-程序员宅基地

文章浏览阅读1.1w次,点赞5次,收藏18次。Option ExplicitPrivate FormOldWidth As Long'保存窗体的原始宽度Private FormOldHeight As Long'保存窗体的原始高度'在调用ResizeForm前先调用本函数Private Sub ResizeInit(FormNameAs Form)Dim Obj As Control_控件随窗体大小变化改变 vb代码

Python学习笔记——pandas中get_dummies()的用法_python get_dummies-程序员宅基地

文章浏览阅读5.5k次,点赞5次,收藏14次。原文链接在此可以看到get_dummies默认就是所有变量都转了默认转了以后的变量用columns名_数值名表示其中参数predix:prefix : 给输出的列添加前缀,如prefix=“A”,输出的列会显示类似prefix_sep : 设置前缀跟分类的分隔符sepration,默认是下划线"_"df = pd.DataFrame([[‘green’ , ‘A’],[‘red’ , ‘B’],[‘blue’ , ‘A’]])pd.get_dummies(df,prefix = _python get_dummies

【政考网答疑】为什么公务员招录限制35岁以下?-程序员宅基地

文章浏览阅读934次。政考网每日一答,今日咱们讨论的问题是为什么公务员招录限制35岁以下?众所周知,无论是各地省考还是国考,均会要求考生年龄在18周岁以上、35周岁以下(应届硕士和博士经招录机关同意,可放宽到40岁),那么,公务员招录考试为何会限制35岁以下报考呢?这样的要求是否合理?1、高龄人员的可塑性相对不强相比较应届毕业生或者刚毕业不久的大学生,35以上的考生在身体素质上的优势并不明显,特别是一些基层岗位,条件艰苦,高龄考生的岗位匹配度相对较低。古语云,“三十而立,四十而不惑。”高龄考生已从过...

MySQL必知必会学习历程(一)_mysql编写新增教育经历-程序员宅基地

文章浏览阅读2.1k次,点赞5次,收藏27次。MySQL必知必会学习历程第1章 了解SQL1.1 关键术语介绍第2章 MySQL简介2.1 关键术语介绍2.2 安装mysql命令行实用程序(可选)2.3 安装mysql_community(最优)2.3.1 下载mysql_community2.3.2 安装过程第3章 使用MySQL3.1 连接到数据库3.2 建立样例数据库3.2.1 创建空的数据库3.2.2 下载样例表生成脚本3.2.3 使用样例表生成脚本3.3 选择数据库(USE)3.4 了解数据库和表(SHOW)3.5 命令及注释汇总第4章 检索_mysql编写新增教育经历

你都用 Python 来做什么?_你用python做什么-程序员宅基地

文章浏览阅读1.3w次,点赞42次,收藏158次。你们都用python做些什么呢?在开发中 python 这一个语言就像是小叮当,而 python 的第三方库则是“百宝箱”,你只要想着对某一个方向进行开发,那么这个“百宝箱”就会给你想要的东西。由于我是在开发多年后接触到的 python,对我来说自从接触 python 就打开了“新世界”的大门。(我正在求设计做一张图,还没做完,做完贴上在这里)一、做个自己玩游戏的程序在前几年,我有一个朋友是一个“游戏商人”,不过大多数他是手动进行商品处理。他有一天找到我,跟我说“嗨兄弟,会不会做外G?”!此时我_你用python做什么