使用vue二次封装elementui中upload组件

2019-11-22 admin

`<template> <div>

<el-upload
  class="upload-demo"
  action="/api/v1/upload_oss"
  :headers="reqHeaders"
  :on-preview="handlePreview"
  :on-remove="handleRemove"
  :before-remove="beforeRemove"
  :before-upload="beforeJSONUpload"
  :data="{type:2,state:'public'}"
  multiple
  :limit="3"
  :name="'image'"
  :on-exceed="handleExceed"
  :on-success="handleJSONSuccess"
  :file-list="fileList"
>
  <el-button
    size="small"
    type="primary"
  >点击上传</el-button>
  <div
    slot="tip"
    class="el-upload__tip"
  >只能上传JSON文件,且不超过5M</div>
</el-upload>

</div> </template>

<script> import { getToken } from “@/utils/auth”;

export default { name: “smUpload”, model: {

prop: "value",
event: "handleJSONSuccess"

}, props: {

value: Array

}, data() {

return {
  fileList: [],
  reqHeaders: {}
};

}, methods: {

handleRemove(file, fileList) {
  // // console.log(file, fileList);
},
handlePreview(file) {
  // // console.log(file);
},
beforeJSONUpload(file) {
  const isJPG = file.type.includes("json");
  const isLt2M = file.size / 1024 / 1024 < 5;
  if (!isJPG) {
    this.$message.error("配置文件只能是JSON格式!");
  }
  if (!isLt2M) {
    this.$message.error("上传配置文件大小不能超过 5MB!");
  }
  return isJPG && isLt2M;
},
handleJSONSuccess(res, file, fileList) {
  this.$emit("handleJSONSuccess", fileList);
},
handleExceed(files, fileList) {
  this.$message.warning(
    当前限制选择 1 个文件,本次选择了 ${
      files.length
    } 个文件,共选择了 ${files.length + fileList.length} 个文件
  );
},
beforeRemove(file, fileList) {
  return this.$confirm(确定移除 ${file.name}?);
}

}, mounted: function() {

this.reqHeaders["Authorization"] = "Bearer " + getToken();

} }; </script>

<style lang=“scss” scoped> </style> `

使用时

            <smUpload v-model="otherConfigs[item.key].file_path" />

[转载]原文链接:https://segmentfault.com/a/1190000021085394

本站文章除注明转载外,均为本站原创或编译。欢迎任何形式的转载,但请务必注明出处。

转载请注明:文章转载自 JavaScript中文网 [https://www.javascriptcn.com]

本文地址:https://www.javascriptcn.com/read-79670.html

文章标题:使用vue二次封装elementui中upload组件

相关文章
v-charts | 饿了么团队开源的基于 Vue 和 ECharts 的图表工具
在使用echarts生成图表时,经常需要做繁琐的数据类型转化、修改复杂的配置项,v-charts的出现正是为了解决这个 痛点。基于Vue2.0和echarts封装的v-charts图表组件,只需要统一提供一种对前后端都友好的数据格式 设置简...
2018-05-24
Angular2-primeNG文件上传模块FileUpload使用详解
近期在学习使用Angular2做小项目,期间用到很多primeNG的模块。 本系列将结合实战总结angular2-primeNG各个模块的使用经验。 文件上传模块FileUploadModule 首先要在使用该组件的模块内导入文件上传模块 ...
2017-03-09
jsdom 中文文档(纯翻译)
jsdom是一个纯粹由 javascript 实现的一系列 web标准,特别是 WHATWG 组织制定的DOM和 HTML 标准,用于在 nodejs 中使用。大体上来说,该项目的目标是模拟足够的Web浏览器子集,以便用于测试和挖掘真实世界...
2018-05-14
Vue.js组件tab实现选项卡切换
本文实例为大家分享了vue插件tab选项卡的具体代码,供大家参考,具体内容如下 效果图: 代码如下: &lt;!DOCTYPE html&gt; &lt;html lang=&quot;en&quot;&gt; &lt;head&gt; ...
2017-03-13
Vue获取DOM元素样式和样式更改示例
在 vue 中用 document 获取 dom 节点进行节点样式更改的时候有可能会出现 ‘style’ is not definde的错误,这时候可以在 mounted 里用 $refs 来获取样式,并进行更改: &lt;template...
2017-03-13
YouTube正式默认使用HTML5视频播放器
YouTube视频网站现在默认使用HTML5播放器,这意味着更好的性能、 稳定性、 电池寿命和甚至是更好的安全性。现在用户通过Chrome、IE 11、Safari 8和Beta版本的Firefox进行浏览的时候都默认使用HTML5视频播放...
2015-11-12
JS中的语音合成——Speech Synthesis API
JS中的语音合成——Speech Synthesis API 简介 HTML5中和Web Speech相关的API实际上有两类,一类是“语音识别(Speech Recognition)”,另外一个就是“语音合成(Speech Synthes...
2018-05-17
JavaScript教程:JS中的原型
Keith Peters 几年前发表的一篇博文,关于学习没有“new”的世界,其中解释了使用原型继承代替构造函数。两者都是纯粹的原型编码。 标准方法(The Standard Way) 一直以来,我们学习的在 JavaScript 里创建对...
2015-11-12
使用axios发送post请求,body传送数据格式form和json区别
先来看看这两个种传送格式的写法 1.form格式,将Content-Type类型设置为application/x-www-form-urlencode,POST请求时将data序列化,提交的数据会按照 key1=val1&amp;key2=...
2018-07-25
使用jspdf生成pdf报表
由于前台html已经动态生成报表,而且,前台有一个功能,一个date range组件,当你拖动的时候,报表会在不提交到后台的情况下动态变化。 因此需要用到js生成生报表: 用到的组件: jquery.js jspdf.js canvg.js...
2017-03-25
回到顶部