antdVue--Upload使用
1.实现功能:文件上传、下载以及删除 不过API中的下载监听方法download一直没有触发,(不确定是我写的有问题还是咋地,反正就是触发不了下载)随用预览的监听方法preview来实现了下载。
组件调用
<new-upload
ref="upDataMout"
:uploadActionUrl="url.uploadAction"
:urlDownload="url.urlDownload"
:deleteUrl="url.deleteUrl"
@uploadFile="uploadFile"
>
</new-upload>
自定义上传组件
<template> <a-upload
name="file"
:multiple="true"
:disabled="disabled"
:file-list="fileList1"
@change="handleUpload"
@preview="download"
:remove="handleRemove"
:before-upload="beforeUpload"
:showUploadList="{
showDownloadIcon:true,
showRemoveIcon:true
}"
>
<a-button size="small"><a-icon type="upload" style="font-size: 12px;"/>{{ text }}</a-button>
</a-upload> </template> <script>
import axios from 'axios'
import Vue from 'vue'
import {postAction} from '@/api/analysis.js' //接口请求的文件
const FILE_TYPE_ALL = "all" export default {
name: 'JUpload',
data(){
return {
formData:{},//接口传参
fileList1: [],
filedirList:[],
nameList:[],
uploading: false,
}
},
props:{
text:{
type:String,
required:false,
default:"点击上传"
},
fileType:{
type:String,
required:false,
default:FILE_TYPE_ALL
},
value:{
type:[String,Array],
required:false
},
// update-begin- --- author:wangshuai ------ date:20190929 ---- for:Jupload组件增加是否能够点击
disabled:{
type:Boolean,
required:false,
default: false
},
// 用于动态传参修改上传路径
uploadActionUrl:{
type:String,
required:false,
default:"",
},
// 下载地址的动态传参
urlDownload:{
type:String,
required:false,
default:"",
},
deleteUrl:{//删除文件的接口
type:String,
required:false,
default:"",
}
},
methods:{
uidGenerator(){//随机生成
return '-'+parseInt(Math.random()*10000+1,10);
},
add(){//新增原来老数据清空
this.$nextTick(() => {
this.fileList1 = [];
this.filedirList = [];
this.nameList = [];
})
},
edit(recode){//编辑文件回显
console.log("编辑1111",recode);
const data = recode;
const fileName = data.fileName?data.fileName.split(","):[];
const filedir=data.folderId?data.folderId:'';
this.fileList1 = [];
let fileList = [],filedirList=[];
for(var a=0;a<fileName.length;a++){
fileList.push({
uid:this.uidGenerator,
name:fileName[a],
status: 'done',
url: filedir,
response:{
status:"history",
message:filedir
}
});
filedirList.push(filedir);
}
this.$nextTick(() => {
this.fileList1 = fileList;
this.filedirList = filedirList;
this.nameList = fileName;
})
},
handleRemove(file) {//删除文件
this.$confirm("确认删除该文件?",{
type:'error'}).then(()=>{
console.log("确认操作");
const index = this.fileList1.indexOf(file);
const newFileList = this.fileList1.slice();
newFileList.splice(index, 1);//把当前的文件删除
this.fileList1 = newFileList;
const fileName = file.name;
const filedir = this.filedirList[index];//文件地址数组
let newPathList = this.filedirList.slice();
newPathList.splice(index,1);//删除当前文件名
this.filedirList = newPathList; let newNameList = this.nameList.slice();
newNameList.splice(index,1);//删除当前文件名
this.nameList = newNameList;
let url = `${this.deleteUrl}?fileName=${fileName}&filedir=${filedir}`;
let that = this;
postAction(url).then((res) => {
if(res.status==1) {
let paras={
'fileName':newNameList,
'filedir':that.filedirList[0]
}
that.$emit('uploadFile', paras);//文件数据传给父组件
that.$message.success(`删除成功!`);
}
})
}).catch(()=>{
console.log("取消操作");
})
},
beforeUpload(file) {
this.fileList1 = [...this.fileList1, file];
return false;
},
handleUpload(file) {//文件上传监听
console.log("file:",file);
const { fileList1,filedirList,nameList } = this;
const formData = new FormData();
fileList1.forEach(file => {
formData.append('files', file); //文件上传的时候传参
if(file.status!="done" && fileList1.length>1){
formData.append('filedir', filedirList[0]); //文件上传的时候传参
}
});
this.uploading = true;
let that =this;
if(file.file.status=="removed"){//删除状态
return;
}
//文件上传接口请求
axios({
method: "POST",
url: `${this.uploadActionUrl}`,
data: formData,
headers: {
'Content-Type': 'multipart/form-data'
}
}).then(function(res) {
if(res.status==200){
const data = res.data;
let path = filedirList,name = nameList;
path.push(data.filedir);
name.push(file.file.name);
that.nameList = name;
//文件夹id,一个任务一个id即同一个新增上传多个文件都是同一个id
that.filedirList = path; console.log("path:",that.filedirList);
that.fileList1[that.fileList1.length-1].url=data.filedir;//接口返回的上传路径
that.fileList1[that.fileList1.length-1].status="done";//必须该状态下才可以预览和下载 that.$message.success(`${data.fileName} 上传成功!`);
let paras={
'fileName':nameList,
'filedir':that.filedirList[0]
}
that.$emit('uploadFile', paras);//文件数据传给父组件
}
console.log(res);
}).catch(function(error){
console.log(error);
this.$message.warning(error.response);
}); },
download(file){//下载文件
// console.log("fileL:",file);
const index = this.fileList1.indexOf(file);
const filedir=this.filedirList[index];
const that = this;
let url = `${this.urlDownload}?fileName=${file.name}&filedir=${filedir}`;
window.open(url);//下载文件 }, },
model: {
prop: 'value',
event: 'change'
}
}
</script> <style scoped> </style>
antdVue--Upload使用的更多相关文章
- AntdVue使用
AntdVue使用 配置与安装 #安装 npm install ant-design-vue --save #按需加载 import { Button, Layout, Row, Col, Menu, ...
- 解决ngnix服务器上的Discuz!x2.5 Upload Error:413错误
1.修改php.ini sudo nano /etc/php5/fpm/php.ini #打开php.ini找到并修改以下的参数,目的是修改上传限制 max_execution_time = 900 ...
- 页面无刷新Upload File
页面无刷新Upload File. 利用jquery.form.js的ajaxForm提交文件. 具体参考以下代码: 前台html <%@ Page Language="C#" ...
- 基于Picture Library创建的图片文档库中的上传多个文件功能(upload multiple files)报错怎么解决?
复现过程 首先,我创建了一个基于Picture Library的图片文档库,名字是 Pic Lib 创建完毕后,我点击它的Upload 下拉菜单,点击Upload Picture按钮 在弹出的对话框中 ...
- 多文档上传(upload multiple documents)功能不能使用怎么办?
问题描述: 在SharePoint 2010的文档库里选择documents标签,然后选择upload document下拉菜单,你会发现upload multiple documents那个按钮是灰 ...
- web 前端常用组件【06】Upload 控件
因为有万恶的IE存在,所以当Web项目初始化并进入开发阶段时. 如果是项目经理,需要知道客户将会用什么浏览器来访问系统. 明确知道限定浏览器的情况下,你才能从容的让手下的封装必要的前端组件. 本篇文章 ...
- AzCopy Upload Files
We can use many ways upload our Files to Azure, Than I Introduction to you a good way, AzCopy ! 1. ...
- upload&&download
package am.demo; import java.io.File; import java.io.IOException; import java.util.Iterator; imp ...
- jQuery File Upload 单页面多实例的实现
jQuery File Upload 的 GitHub 地址:https://github.com/blueimp/jQuery-File-Upload 插件描述:jQuery File Upload ...
- jQuery File Upload done函数没有返回
最近在使用jQuery File Upload 上传图片时发现一个问题,发现done函数没有callback,经过一番折腾,找到问题原因,是由于dataType: ‘json’造成的,改为autoUp ...
随机推荐
- Mac提升效率软件推荐
1.HapiGo 高效启动器 能快速搜索文件.启动程序.打开网页.翻译.截图翻译等 相当于中文版的 Alfred 2.Rectangle 能快速对当前应用窗口进行分屏 3.iTerm2 一款比系统终 ...
- Github好用的镜像网站
最近Github越来越不好用了,发现一个特别好用的镜像网站,无论是进入还是下载都非常的快. https://hub.yzuu.cf/ 首页和Github没有任何区别, 注意请不要在连着梯子的时候使用, ...
- Java控制流程(复习)
流程控制语句 流程控制语句包括:顺序结构,分支结构,循环结构 分支结构 if语句: 第一种: if(关系表达式){ 语句体 } else{ 语句体2 } 第二种: if (){ } else if ( ...
- 跨平台Docker篇
前言 总结自 老张的哲学b站视频[10分钟学会Blog.Core(ASP.NETCORE)基本完结]https://www.bilibili.com/video/BV1vC4y1p7Za?vd_sou ...
- js-防抖(简易版)
/** * 节流函数 */ var count = 1; var container = document.getElementById('container'); function getUse ...
- ts get和set
class User { // get.set方法的成员变量命名时建议在前面加 _ private _fullName: string; //get 的用法 get fullName(): strin ...
- AC和瘦AP组网
ac和瘦ap组网 参考了这篇文章[Cisco Packet Tracer]WLC配置瘦AP指南_时间进行的小宇的博客-CSDN博客_思科瘦ap配置命令 服务器server-pt配置 先设置IP地址,随 ...
- JAVA查漏补缺 1
JAVA查漏补缺 1 目录 JAVA查漏补缺 1 基本数据类型 数组 方法参数传递机制 基本数据类型 数据类型 关键字 取值范围 内存占用(字节数) 整型 byte -128~127 1 整型 sho ...
- redis的windows下安装
转载https://www.runoob.com/redis/redis-install.html Redis 安装 Windows 下安装 下载地址:https://github.com/tpora ...
- openssl常用操作
参考:https://www.golinuxcloud.com/openssl-view-certificate/ 查看证书信息 openssl x509 -in server.crt -text - ...