VUE+Elementui 文件上传/下载功能

最新推荐文章于 2024-08-30 15:13:24 发布

Making_Bug

最新推荐文章于 2024-08-30 15:13:24 发布

阅读量4k

点赞数 2

本文链接：https://blog.csdn.net/Making_Bug/article/details/103215033

版权

本文详细介绍了如何在Vue项目中结合ElementUI组件实现文件上传和下载功能，包括HTML和JavaScript代码示例，适用于图片和其他类型的文件操作。

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

文件上传功能(图片同适用)

html部分代码：

<el-upload
   class="upload-demo"
   ref="upload"
   action="/rscs/licence/import"  //上传的url
   :show-file-list="true"       //选择文件后是否显示文件列表
   :on-change="fileChange"
   :limit="1"                     //最大上传文件数
   accept=".sec"			//支持的文件格式
   :auto-upload="false"    //是否自动上传
> 
   <el-button>选择文件</el-button>
</el-upload>

<el-button type="primary" @click="importLicence">上传</el-button>

JS部分代码

fileChange(file, fileList) {
   
   var reader = new FileReader()
   reader.readAsText(file.raw)
   reader.onload = function(e) {
   
    sessionStorage.setItem('files',