vue2+element-ui+axios上传文件

最新推荐文章于 2024-09-01 17:22:29 发布

吕海洋

最新推荐文章于 2024-09-01 17:22:29 发布

阅读量5.1k

点赞数

分类专栏： vue 文章标签： vue.js axios elementui

本文链接：https://blog.csdn.net/wuchenlhy/article/details/123618057

版权

本文介绍如何在Vue2项目中利用Element-UI组件库和Axios库实现文件上传功能。首先在main.js中引入Element-UI和Axios，然后创建上传文件的模板，实现交互式的文件上传体验。

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

vue2项目中加入 element-ui, axios


npm install element-ui -S --registry=https://registry.npm.taobao.org 
npm install axios -S --registry=https://registry.npm.taobao.org

main.js 导入

import Element from 'element-ui'
import axios from 'axios'

新增模版

<template>
<el-upload
  class="upload-demo"
  action="#"
  :http-request="handleChange"
  :on-preview="handlePreview"
  :on-remove="handleRemove"
  :before-remove="beforeRemove"
  :on-exceed="handleExceed"
  :file-list="fileList">
  <el-button size="small" type="primary">点击上传</el-button>
  <div slot="tip" class="el-upload__tip">只能上传zip文件，且不超过100M</div>
</el-upload>
</template>
<script>
import axios from 'axios'
  export default {