vue使用ant design vue(upload)文件上传

news/2024/7/24 10:57:01 标签: vue.js, javascript

使用remove的时候是一个函数,刚开始我用的@remove后来用上:remove才可以,因为接收的是一个(点击移除文件时的回调,返回值为 false 时不移除。支持返回一个 Promise 对象,Promise 对象 resolve(false) 或 reject 时不移除。)文档原话,刚开始不知道返回值是什么,蒙了,返回值就是return。

 <a-upload
   :action="getUploadAction()"
   list-type="picture"
   class="upload-list-inline"
   @change="handleChange"
   :headers="tokenHeader"
   v-model="fileList"
   :remove='removePhtoto'
   :beforeUpload="beforeUpload"
   :default-file-list="item.fileList"
   @preview="preview"
 >
removePhtoto() {
  if (this.status_dictText == '已完成') {
    this.$message.warning('查看状态下只能查看不能编辑!');
    // 直接return一个false就可以了。
    return false;
  }
}

默认显示后端传过来数据的时候,默认是显示不出来的,一般的逻辑就是循环出来以后然后跟上路径就好了,但是组件中说默认显示的是对象或者数组,因为在后端传过来的数据和组件里面的东西不一样,所以循环这个数组的同时,把里面的每一项的值赋给这个数组。

// 主要就是这几个
 detailListItem.fileList.forEach(elementItem => {
   elementItem.uid = elementItem.id
   elementItem.name = elementItem.fileName
   elementItem.url = elementItem.filePath
   elementItem.status = 'done'
 })

在用upload上传change事件的时候一定要做判断,因为change的状态是有三个的,在done的状态下使用就可以了。在使用change时间的时候一定要加一个判断,要不然就调用三次。

 handleChange(info,index,indexcin) {
   // console.log(JSON.parse(JSON.stringify(info)))
   // 加上这个判断就好了。
   if (info.file.status !== 'done') return
   const target = this.dabuleList[index].detailList[indexcin]
   const getFile = {}
   const file = info.file
   file.filePath = file.response ? file.response.message : null
   file.fileName = file.name
   file.relationId = target.id
   this.dabuleList[index].detailList[indexcin].fileList = target.fileList.concat(file)
 },

当你删除项目照片的时候,你需要删除循环出来的每一项的图片的时候,但是你的点击事件就有一个,你删除一个的时候,所有的就都删除了,那你就得通过他的下标删除。

这俩个都可以的,但是我以前用第二个可以,然后不知道怎么出问题了,删除一个的时候就都删除了,然后用的第一个就好了。
this.dabuleList[fileIndex].detailList[fileLIstIndex].fileList.slice(fileLIstIndex,1);

this.dabuleList[fileIndex].detailList[fileLIstIndex].fileList.pop()

http://www.niftyadmin.cn/n/763876.html

相关文章

为什么使用累积分布函数处理后像素值会均匀分布_等待中的悖论:概率分布简介...

我必须等多长时间才能上车&#xff1f;Photo by Jerry Zhang on Unsplash谁不知道这种感觉&#xff1a;您步行去公交车站&#xff0c;等公共汽车&#xff0c;然后…等。 然后您再等一会。 还有更多。 有人告诉您&#xff0c;巴士平均每10分钟一班。 现在您已经等了10分钟。 公共…

使用ant design vue组件(保持默认参数的存在,传更多自己需要的参数)

先允许我唠叨下&#xff0c;应该很多人都会&#xff0c;那我也记录一下。理解一下。 使用组件有一个参数的时候直接使用$event <a-date-picker :default-value"moment(item.createTime)" change"createTimeChange($event,你需要传的参数)"/>createT…

python遗传算法工具包_Python遗传和进化算法框架(一)Geatpy快速入门

Geatpy是一个高性能实用型的Python遗传算法工具箱&#xff0c;提供一个面向对象的进化算法框架&#xff0c;经过全面改版后&#xff0c;新版Geatpy2目前由华南农业大学、暨南大学、华南理工等本硕博学生联合团队开发及维护。 Geatpy提供了许多已实现的遗传和进化算法相关算子的…

使用vue深度开发数组对象多层嵌套时视图不更新

当我们开发的时候&#xff0c;有一些数据是对象里面嵌套数组&#xff0c;数组里面嵌套对象&#xff0c;数据结构很复杂的时候&#xff0c;而且在你循环出来一个select下拉选择框的时候&#xff0c;不让联动的时候这时候就很难搞了结构大概是这样子的 渲染到页面上是这样子的 …

pythonconvert函数_【转】Python内置函数(5)——bin

英文文档&#xff1a; bin(x) Convert an integer number to a binary string. The result is a valid Python expression. If x is not a Python int object, it has to define an __index__() method that returns an integer. 说明&#xff1a; 1. 将一个整形数字转换成二进…

python数据清洗语句_【python】数据清洗

1.处理缺失值 判断是否含缺失值/统计缺失值 #判断 ## 判断列是否存在na df.isnull().any() #返回bool df.notnull() #统计 df.isnull().sum() df[col_name].value_counts(dropnaFalse) #分类汇总该列并统计缺失值 筛选所有含缺失值的表格 df[df.col_name.isnull()] 删除含缺失值…

使用vue点击一个事件就复制一个结构出来。

今天遇到一个需求&#xff0c;点击一个按钮的时候&#xff0c;需要把一个页面的结构复制出来&#xff0c;左思右想&#xff0c;原来是这样子的。 首先你得明白你要复制哪一份结构&#xff0c;找到的话就把一个结构用v-for循环。 <div v-for"(item, index) in arr"…

git bash here创建项目无法选择m_超实用 Git 使用方式介绍

都说程序员若是不知道 GitHub 就不是一个合格的程序员&#xff0c;其实这话说的过分了&#xff0c;不知道就学嘛&#xff0c;今天我们就来说说 Git 和 GitHub 到底是什么。我们在开发软件的时候&#xff0c;常常是需要多人协作完成&#xff0c;这时候我们就需要对我们的代码进行…