elementui+vue+axios实现多文件上传及点击文件进行文件下载

最新推荐文章于 2024-08-21 04:35:59 发布

Grady_H

最新推荐文章于 2024-08-21 04:35:59 发布

阅读量1.6k

点赞数 2

文章标签： vue.js elementui javascript

本文链接：https://blog.csdn.net/Grady_H/article/details/122212366

版权

本文详细记录了如何在Vue项目中结合ElementUI组件库和Axios库，实现多文件上传以及点击文件进行下载的功能。通过el-upload组件，实现了上传功能，同时介绍了相关的方法实现。

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

工作中使用到el-upload组件多文件上传功能，在此记录实现方式
1、组件部分代码展示

<template>
	<el-form>
		<el-form-item label="上传文件：" prop="ethicNo">
		  <el-upload
		    class="upload-demo"
		    action="#"
		    :auto-upload="false"
		    :before-remove="beforeRemove"
		    :on-change="handleImgChange"
		    :on-remove="handleRemove"
		    :on-preview="handlePreview"
		    :file-list="fileList"
		    multiple
		  >
		    <el-button size="small" type="text">点击上传</el-button>
		    <div slot="tip" class="el-upload__tip">
		      仅支持音频，视频，PPT，word格式文件
		    </div>
		  </el-upload>
		</el-form-item>
	</el-form>
</template>

2、方法

<script>
	// 引入axios
	import Axios from "axios";
	export default {
   
		data() {
   
			return {
   
				form: [],
				fileList: [],      // 存储上传文件或修改时回显文件
			},
		},
		created（） {
   
			this.getApiById(id);
		}，
		methods： {
   
			// 查询列表时处理之前上传文件回显
    		getApiById(id) {
   
      			this.$httpRequest.