vue-upload 封装组件-上传组件
我后端的,刚接触vue个星期,根据需求写了个上传控件,很灵活的。没有看element el-upload源码,样式用的element的。感觉vue确实好用。
先看样子:
<!-- 单文件上传组件 -->
<template>
<div>
<input type="file" id="file" hidden @change="fileChange" :accept="accept">
<div v-if="upMode=='url'" style="width: 100%;display:inline-flex;">
<el-input :value="path" disabled></el-input>
<el-button size="small" type="primary" @click="btnChange">{{autoUpload?label:'选择文件'}}</el-button>
<el-button v-if="!autoUpload && loadButton" size="small" type="success" @click="uploadClick">{{label}}</el-button>
</div>
<div v-else-if="upMode=='head'" class="upmode-head">
<div class="el-upload el-upload--picture-card" @click="btnChange">
<i v-if="path==''" class="el-icon-plus"></i>
<img v-else :src="path">
</div>
<el-button v-if="!autoUpload && loadButton" size="small" type="success" @click="uploadClick">{{label}}</el-button>
</div>
<div v-else-if="upMode=='variable'" class="el-upload-dragger" @click="btnChange">
<div v-if="path==''">
<i class="el-icon-upload"></i><div class="el-upload__text"><em>{{label}}</em></div>
</div>
<img v-else :src="path">
</div> </div>
</template> <script>
import glob from '@/utils/global.js'
export default {
model: {
prop: 'path',
event: 'onsuccess'
},
props: {
label: {type: String, default: '上传'},//按钮文字
accept: {String,default:'image/jpeg,image/png,image/x-icon'},//预选文件类型
autoUpload:{type:Boolean, default:true},//是否自动上传
loadButton:{type:Boolean, default:true},//手动上传时是否生成上传按钮
path:String,//回显地址
action: {type: String, default: '/api/upload/img'},//传入action可以调用不同接口适应不同文件类型上传
upMode:{type: String, default: 'url'},//上传控件模式url,head,variable
},
methods: {
btnChange() {
var file = document.getElementById('file');
file.click();
},
fileChange(e){
try {
const fu = this.getFile();
if(fu==null)return;
if(!this.beforeUpload(fu))return;
if(this.autoUpload){
this.submit(fu);
}else{
if(this.upMode=='url')return;
//本地预览
var reader = new FileReader();
reader.readAsDataURL(fu);
reader.onload = function(e) {
var src = this.result;
var str = '<img src="'+src+'">';
var target=this.upMode=='head'?'.el-upload--picture-card':'.el-upload-dragger';
var nim = document.querySelector(target);
if(nim) {
nim.innerHTML='';
nim.insertAdjacentHTML("beforeEnd", str)
}
};
} } catch (error) {
console.debug('choice file err:',error);
}
},
beforeUpload(f) {
const maxSzie = glob.Config.UploadSize;
if (f.size/1024/1024 > maxSzie) {
this.$message.error('上传文件大小不能超过'+maxSzie+'M.');
return false;
}
var types = glob.Config.UploadType;
for (let i = 0; i < types.length; i++) {
if(types[i]===f.type) return true;
}
this.$message.error('上传文件格式不允许!');
return false;
},
uploadClick(e){
this.submit();
},
submit(file){
try {
if(!file) file = this.getFile();
if(file==null)return;
var isUpload =true;
this.$emit('onbefore', file);
if(!isUpload)return;
const url =process.env.Store_API + this.action;
var fd = new window.FormData();
// 配置post请求的参数。参数名fileType,值为category(看后端的具体要求)
fd.append('fileType', 'category');
fd.append('file', file);
var xhr = new XMLHttpRequest();
xhr.open('POST', url, true);
xhr.send(fd);
xhr.onload = () => {
if (xhr.status === 200) {
var res = JSON.parse(xhr.responseText);
if(res.code==1) {
var imgurl = glob.StaticStoreHost+res.data;
this.$emit('onsuccess', imgurl);
}else{
this.$message(res.message);
}
}
}
} catch (error) {
console.debug('upload file err:',error);
}
},
getFile(){
var file = document.getElementById('file');
if(file.files.length==0){
this.$message('没有选择文件');
return null;
}
return file.files[0];
},
}, }
</script>
其实就这个小组件就体现到封装、继承、多态的思想,多花时间思考,代码就能简洁、灵活、可用性高。
样式也有重写,需要样式的评论支持下,谢谢。
vue-upload 封装组件-上传组件的更多相关文章
- 微信小程序简单封装图片上传组件
微信小程序简单封装图片上传组件 希望自己 "day day up" -----小陶 我从哪里来 在写小程序的时候需要上传图片,个人觉得官方提供的 Uploader 组件不是太好用, ...
- 从0开始做一个的Vue图片/ 文件选择(上传)组件[基础向]
原文:http://blog.csdn.net/sinat_17775997/article/details/58585142 之前用Vue做了一个基础的组件 vue-img-inputer ,下面就 ...
- vue里图片压缩上传组件
//单图上传 <template> <div> <div class="uploader" v-if='!dwimg'> <van-upl ...
- React后台管理手动封装图片上传组件
分为两个文件夹,index.js(逻辑文件) styled.js(样式文件) index.js文件,编写完成之后在对应的地方引入即可 import React from "react&quo ...
- VUE -- iview table 组件 中使用 upload组件 上传组件 on render 事件不会触发问题
碰到的问题是: upload 组件在 on中写的监听事件不会被触发 在 props 中来监听:==>
- vue.js框架图片上传组件
html: <div id="app"> <div class="hello"> <div class="upload& ...
- 封装Vue Element的upload上传组件
本来昨天就想分享封装的这个upload组件,结果刚写了两句话,就被边上的同事给偷窥上了,于是在我全神贯注地写分享的时候他就神不知鬼不觉地突然移动到我身边,腆着脸问我在干啥呢.卧槽你妈,当场就把我吓了一 ...
- 封装react antd的upload上传组件
上传文件也是我们在实际开发中常遇到的功能,比如上传产品图片以供更好地宣传我们的产品,上传excel文档以便于更好地展示更多的产品信息,上传zip文件以便于更好地收集一些资料信息等等.至于为何要把上传组 ...
- Vue.js 3.0搭配.NET Core写一个牛B的文件上传组件
在开发Web应用程序中,文件上传是经常用到的一个功能. 在Jquery时代,做上传功能,一般找jQuery插件就够了,很少有人去探究上传文件插件到底是怎么做的. 简单列一下我们要做的技术点和功能点 使 ...
随机推荐
- Java基础(九)
综合案例 此前我们已经练习了根据集合当中的字符串对象读写文件,而本综合案例主要练习根据集合当中的自定义对象来读写文件. 场景介绍 很多网络游戏当中都有组队模式,例如魔兽世界.DotA.英雄联盟(LOL ...
- python中迭代器和生成器的详细解释
https://www.cnblogs.com/wilber2013/p/4652531.html
- CentOS 7 yum安装LAMP,LNMP并搭建WordPress个人博客网站
本次实验要进行的是在CentOS7.2,内核版本3.10.0-327.el7.x86_64的环境下搭建LAMP和LNMP,并在此之上做一个WordPress博客网站. [root@Shining ~] ...
- loj 6031「雅礼集训 2017 Day1」字符串
loj 注意到每次询问串长度都是给定的,并且询问串长\(k*\)询问次数\(q<10^5\),所以这里面一个东西大的时候另一个东西就小,那么考虑对较小的下功夫 如果\(k\le \sqrt{n} ...
- 《HTML、CSS、Javascript网页制作,从入门到精通》——第一章 HTML基础,第二章HTML基本标记
1)HTML的基本概念 HTML就一种描述性的标记语言,是文档的超文本标记语言. 基本结构为: HTML标记组成 : <标记元素> 源文件中标记是不区分大小写的. 2)编写方法: 1&g ...
- JDBC1
---恢复内容开始--- create table `account` ( `id` ), `name` ), `balance` ) ); insert into `account` (`id`, ...
- Elasticsearch 7.4.0官方文档操作
官方文档地址 https://www.elastic.co/guide/en/elasticsearch/reference/current/index.html 1.0.0 设置Elasticsea ...
- 64位Win7安装Oracle12C临时位置权限错误解决方案
今天装备安装Oracle12C体验一下,结果遇到问题:请确保当前用户具有访问临时位置所需的权限,无法继续安装,上网查了一下,解决方案如下: 第一步: 控制面板>所有控制面板项>管理工具 ...
- kubesphere集群搭建(多节点)
kubesphere官网:https://kubesphere.io/docs/advanced-v2.0/zh-CN/introduction/intro/ 一.准备环境 1.准备服务器 maste ...
- 学习Linux让我进入了知名企业 原
说起我学习Linux的原因是多方面的,大学时我学的是物理学师范专业,有部分计算机课程,但我觉得这些课程没什么实际作用,我自己对计算机比较感兴趣,我利用业余时间学习了很多计算机技术.在大学期间我参加了很 ...