09 element-ui完成文件上传
时间:2020-03-24
本文章向大家介绍09 element-ui完成文件上传,主要包括09 element-ui完成文件上传使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
1、前提约束
- 完成nodejs,vue-cli,webpack,webpack-dev-server的安装
https://www.jianshu.com/p/eb4d9e132f62 - 提供一个后台api可以完成文件上传
https://www.jianshu.com/p/2262beb31378
假设提供文件上传的api路径为:POST http://localhost:8088/filesystem/upload
2、操作步骤
- 使用脚手架创建一个vue项目模板并启动成功,假设项目名称为vue-element
https://www.jianshu.com/p/644eb12a8174 - 下载element-ui的js包
cd vue-element
cnpm install element-ui --save-dev
- 修改src/main.js
import ElementUI from 'element-ui'
Vue.use(ElementUI)
- 修改config/index.js
proxyTable: {
'/api/filesystem': {//文件系统管理
target: 'http://localhost:8088',
pathRewrite: {
'^/api': ''
}
}
},
- 修改HelloWorld.vue
<template>
<div>
<el-upload
action="/api/filesystem/upload"
list-type="picture-card"
:before-upload="setuploaddata"
:on-success="handleSuccess"
:file-list="fileList"
:limit="picmax"
:on-exceed="rejectupload"
:before-remove="handleRemove">
<i class="el-icon-plus"></i>
</el-upload>
</div>
</template>
<script>
export default {
data() {
return {
picmax:1,//最大上传文件的数量
courseid:'',
dialogImageUrl: '',
dialogVisible: false,
fileList:[],
imgUrl:''
}
},
methods: {
//超出文件上传个数提示信息
rejectupload(){
this.$message.error("最多上传"+this.picmax+"个图片");
},
//在上传前设置上传请求的数据
setuploaddata(){
},
//删除图片
handleRemove(file, fileList) {
},
//上传成功的钩子方法
handleSuccess(response, file, fileList){
},
//上传失败执行的钩子方法
handleError(err, file, fileList){
this.$message.error('上传失败');
//清空文件队列
this.fileList = []
}
},
mounted(){
}
}
</script>
<style>
</style>
- 启动,按页面提示执行,就能看到上传文件效果。
以上就是通过element-ui完成文件上传的过程。
原文地址:https://www.cnblogs.com/alichengxuyuan/p/12558557.html
- JavaScript之arguements对象学习
- 让我们一起写出更有效的CSharp代码吧,少年们!
- SQL学习之计算字段的用法与解析
- JavaScript之JS的执行环境和作用域
- GOF设计模式快速学习
- JavaScript之面向对象学习一
- JavaScript之JS实现动画效果
- 深入入门系列--Data Structure--04树
- SQL学习之高级联结(自联结、自然联结、外联接)
- ExtJs学习笔记(21)-使用XTemplate结合WCF显示数据
- JavaScript之面向对象的概念,对象属性和对象属性的特性简介
- 快速入门系列--WebAPI--04在老版本MVC4下的调整
- SQL学习之SELECT子句顺序
- [图解]sqlserver中创建链接服务器
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 【tensorflow2.0】数据管道dataset
- 用C++跟你聊聊“桥接模式”
- 用C++跟你聊聊“单例模式”,类的“计划生育”
- django-HttpResponse,render,redirect
- django-ForeignKey,OneToOneField,ManyToManyField
- 用C++跟你聊聊“备忘录模式” ,如果能重来,我要···
- 数据库(一)--通过django创建数据库表并填充数据
- springmvc之异常处理中ExceptionHanderExceptionResolver
- 【tensorflow2.0】损失函数losses
- 如何在python文件中测试sql语句
- 用C++跟你聊聊“适配器模式”
- 【tensorflow2.0】评价指标metrics
- 数据库(二)--多对多相关操作
- 【tensorflow2.0】优化器optimizers
- 数据库(三)--多对多,一对多,一对一