普通文件上传&&表格里的文件上传

最新推荐文章于 2023-11-02 10:29:12 发布

浅巷长歌999

最新推荐文章于 2023-11-02 10:29:12 发布

阅读量538

点赞数

本文链接：https://blog.csdn.net/qq_42401946/article/details/113586521

版权

vue 同时被 3 个专栏收录

22 篇文章 2 订阅

订阅专栏

JavaScript

14 篇文章 0 订阅

订阅专栏

Ant Design

2 篇文章 0 订阅

订阅专栏

本文详细介绍了一种基于Vue的文件上传组件实现方式，包括单文件上传和表格内的文件上传功能。文章探讨了如何设置文件类型限制、文件大小限制，并提供了完整的代码示例。此外，还介绍了如何处理文件状态变化及与后端交互。

摘要由CSDN通过智能技术生成

普通文件上传
在这里插入图片描述
template部分：

<a-upload-dragger
	name="file"
	:multiple="false"  //是否支持一次上传多个文件
	:accept="accept"   //接受上传的文件类型
	:data="fileData"   //上传所需参数或返回上传参数的方法
	:before-upload="beforeUpload" //上传之前的处理
	@change="handleFile"  //上传文件改变时的状态
	:file-list="fileList" //已经上传的文件列表
	action="/ai-aop/ai-aop-gateway/api/aop-attachment/fileUpload"  //上传的地址
	>
	<p class="ant-upload-drag-icon">
	  <img src="../../assets/popularfeelings/upload.png" alt="" />
	</p>
	<p class="ant-upload-text">点击按钮或将文件拖拽到这里上传</p>
	<p class="ant-upload-hint">上传文件格式.xlsx 文件大小不超过20M</p>
	<div></div>
</a-upload-dragger>

return部分：

return{
	accept:'.xlsx',
	fileData:{},
	fileList: [],
}

methods部分:

beforeUpload(file) {
	let me = this;
	if(me.fileList.length == 1){
		me.$message.error("请先删除已上传的文件!");
		return false
	}
	me.fileList = [...me.fileList,file]
},
handleFile(e){
	let me = this;
	if(e.file.status == "done"){
		if(e.file.xhr &&e.file.xhr.status==200){
			me.fileList = e.fileList;
			// alert("上传成功")
		}else{
			this.$message.error('上传失败');
		}
	}else if(e.file.status == "removed"){
		me.fileList = e.fileList;
	}
},

表格里的文件上传
在这里插入图片描述
template部分：

<a-upload
	name="file"
	:multiple="false"    //是否支持一次上传多个文件
	:accept="accept1"    //接受上传的文件类型
	:data="{'batch_id':record.id}"   //传给后台的值
	:before-upload="beforeUpload1"   //上传之前
	@change="(e)=>{handleFile1(e,record)}"   //上传文件改变时的状态,把这一行的e和数据也传过去 
	:file-list="record.fileList3"   //这一行已经上传的文件列表
	:showUploadList="false"  //是否展示uploadList(上传的文件)
	:headers="{token}"   //header里传的值
	action="/ai-aop/ai-aop-gateway/ai-aop-nlp/opinion/batch/upload/correction"  //上传的地址
	>
	<a>
		<span class="fz16">人工纠正</span>
	</a>
	</a-upload>

return部分：

return{
	accept1:".xlsx",
	fileList3:[],
}

methods部分:

handleFile1(e,record){
	record.fileList3 = e.fileList;
	let me = this;
	if(e.file.status == "done"){
		if(e.file.xhr &&e.file.xhr.status==200){
			me.fileList3= e.fileList
			me.$message.success("纠正舆情数据成功!");
			me.initData()
		}else{
			this.$message.error('纠正舆情数据失败!');
		}
	}else if(e.file.status == "removed"){
		me.fileList3 = e.fileList;
	}
},
//初始化数据的时候，要把fileList3添加到这一行的数据中去，因为这一行原来没有fileList3的数据
initData() {
	let me = this;
	myAxios.get(
	  "/ai-aop/ai-aop-gateway/ai-aop-nlp/opinion/batch/filelist"+'/'+me.pageSize+'/'+me.page,
	  {},
	  (res) => {
	  //初始化数据的时候，要把fileList3添加到这一行的数据中去，因为这一行原来没有fileList3的数据
	    for(var i=0; i<res.data.records.length; i++){
	      res.data.records[i].fileList3 = [];
	    }
	    me.data = res.data.records;
	    me.total = res.data.total;
	  },
	  (err) => {
	
	  }
	);
},