1. 先展示一个效果图

2.代码详解

<!-- 封面缩略图 -->
<div class="pop-up-div pic">
<div class="thumbnail"><span>发布封面</span></div>
<div class="demo-upload-list" v-for="item in uploadList" :key="item.index"> // uploadList(重点)
<template >
<img :src="coverLink ? coverLink : item.path"> //图片渲染
<div class="demo-upload-list-cover">
<Icon type="ios-eye-outline" @click.native="handleView(item.name)"></Icon> // 展示默认icon
<Icon type="ios-trash-outline" @click.native="handleRemove(item)"></Icon>
</div>
</template>
</div>
<Upload
ref="upload" // dom节点
:show-upload-list= true // 默认上传显示列表
:on-success="handleSuccess" // 成功回调
:format="['jpg','png']" // 设置图片格式
:max-size="2048" // 设置图片大小
:on-format-error="handleFormatError" // 判断图片格式是否正确
:on-exceeded-size="handleMaxSize" // 限制图片大小
:before-upload="handleBeforeUpload" // 上传之前的钩子函数,可以在此限制图片的张数
type="drag" // 开启拖拽上传
name="coverImage" // multiple,加此属性可以多图片上传
:headers= "header" // 设置请求头
v-if="show"
:action="uploadCoverUrl" //上传图片接口
style="display: inline-block;width:116px;">
<div style="width: 116px;height:116px;line-height: 116px;">
<Icon type="ios-camera" size="30"></Icon> // 默认icon
</div>
</Upload> //点击为大图
<Modal title="View Image" v-model="visible" :closable="false" @on-ok="$store.state.addArticle = true" @on-cancel="$store.state.addArticle = true">
<img :src="'/' + imgName " v-if="visible" style="width: 100%;z-index:1100;"> // closable 点击model右上角,关闭模态框,默认为true,
</Modal>
<div class="warnText"> // 一些格式说明
<p>1.格式为jpg或png</p>
<p>2.且不能大于2M</p>
<p>3.建议尺寸336*160</p>
</div>
</div>
<div slot="footer">
<Button type="primary" size="large" @click="ok">确定</Button> // 信息提交按钮
</div>
data(){
  uploadCoverUrl:'',

  uploadList :[],
  coverLink :'',
  show:true,
  visible: false,
  header:{
    'token': sessionStorage.getItem('token')
  }
}
//封面缩略图 图片上传成功后的操作
handleSuccess(res, file){
let _this = this;
console.log(res)
file.path = res.data.path
file.name = _this.getNameFromLink(file.path)
_this.coverLink = file.path
_this.uploadList.push(file)
_this.show = false;
},
//判断图片格式对不对
handleFormatError (file) {
this.$Notice.warning({
title: '图片格式不正确',
desc: file.name + ' 格式不正确,请重新选择'
});
},
//限制图片大小
handleMaxSize (file) {
this.$Notice.warning({
title: '图片尺寸过大',
desc: file.name + ' 太大,最大为2M,请注意图片大小!'
});
},
//限制图片的张数
handleBeforeUpload (file) {
if(this.uploadList){
const check = this.uploadList.length < 1;
if (!check) {
this.$Notice.warning({
title: '最多上传一张图片!'
});
}
return check;
}
},
// 点击看大图
handleView(name){
console.log(name)
this.imgName = name;
this.visible = true;
this.$store.state.addArticle = false
},
// 删除一张图片
handleRemove(file){
this.uploadList.splice(file, 1);
this.show = true; //这个是显示上传的那个icon
},

//上传pdf文件

<Upload
ref="previewPdf"
:default-file-list="defaultList"
multiple
name="accessory"
:format="['pdf', '', '',]"
type="drag"
:headers= "header"
:max-size="51200"
:before-upload="handleBeforeUploadp"
:on-preview="lookPdf"
:on-success="handleSuccessPdf"
:action="uploadPdfUrl">
<div style="padding: 20px 0">
<Icon type="ios-cloud-upload" size="52" style="color: #999"></Icon>
<p>将文件拖拽至此或选择文件(最多上传50M的pdf文件)</p>
<p style="color: #07C5A3;font-weight: bold">点击上传</p>
</div>
</Upload>
// 点击查看pdf的操作
lookPdf(file){
console.log(file)
let _this = this;
let url;
if(file.response){
url = file.response.data.path
}else{
url = file.url
}
window.open(url)
},
// pdf上传成功的操作
handleSuccessPdf(res,file,fileList){
let _this = this;
console.log(fileList)
_this.$refs.previewPdf.fileList = fileList
_this.defaultList = fileList
_this.contentAccessoryIds = res.data.id
},
// pdf文件移除时候的方法
handleRemoveFile(file,fileList){
console.log(fileList)
console.log(this.defaultList.length)
this.defaultList = fileList
console.log(this.defaultList)
},
// 上传pdf文件的数量控制
handleBeforeUploadp(){
let _this = this;
console.log(_this.defaultList)
const tpl = _this.defaultList.length < 1
if(!tpl) {
_this.$Notice.warning({
title: '最多上传一个pdf文件!'
});
}
return tpl;
}, // 通过iframe上传视频
<!--视频-->
<div v-if="shiPing" class="shi-ping">
<!-- 视频 -->
<iframe v-if="!videoSrc" width="800" height="200" src="" frameborder="0"></iframe>
<div >
<div v-if="videoSrc" class="deleteFlag"><span class="float-r" @click="deleteVideo" style="backgroundColor:#333;cursor:pointer;width:32px;text-align:center;font-size:24px;">X</span> </div>
<video id="videoSec" v-if="videoSrc" :src="videoSrc" width="300" height="200" controlsList="nodownload" controls="controls"></video>
</div>
</div>
 

ivew Upload 上传图片组件的更多相关文章

  1. 为ivew的Page组件的跳页增加跳页确定按钮

    首次使用vue做后台管理项目,首次使用ivew框架,好不容易所有的功能都做完了,前几天产品经理让在每个列表的跳页后面加个‘确定’按钮,说没有确定按钮有点反人类,心想那还不分分钟的事儿嘛,立马回个‘好的 ...

  2. 自定义input上传图片组件

    自定义input上传图片组件,美化样式 前段时间因为项目需求,做过一个上传图片组件,这里分享下大致思路,希望对有需要的童鞋有所帮助~~~ 功能需求:1.上传图片限制大小.分辨率.类型 2.上传图片支持 ...

  3. iview upload 上传图片 不传服务器 转 base64

    开始的时候 找不到this了,后来想起来要用 ES6的箭头函数 就有this了 reader.onload = e => { // 读取到的图片base64 数据编码 将此编码字符串传给后台即可 ...

  4. 上传图片组件封装 element ui

    // element ui 文档地址: http://element.eleme.io/#/zh-CN <template> <div> <div class=" ...

  5. 微信小程序 - 上传图片组件

    2019-01-08 更新至1.1:修复了一些问题 2019-03-14 全面更新,推荐:https://www.cnblogs.com/cisum/p/10533559.html 使用了es8的as ...

  6. jQuery file upload上传图片的流程

    先触发_onChange[jquery.fileupload.js] _onChange: function (e) { var that = this, data = { fileInput: $( ...

  7. jQuery file upload上传图片出错分析

    以https://github.com/blueimp/jQuery-File-Upload/blob/master/basic-plus.html为例 注释掉load-image.all.min.j ...

  8. ivew Upload 上传时附带的额外参数

    <Upload action="/api/device/importData" :data="uploadData" :before-upload=&qu ...

  9. django admin upload 上传图片到oss Django Aliyun OSS2 Storage

    https://github.com/xiewenya/django-aliyun-oss2-storage Install pip install django-aliyun-oss2-storag ...

随机推荐

  1. Spring Boot开启的2种方式

    Spring Boot依赖 使用Spring Boot很简单,先添加基础依赖包,有以下两种方式 1. 继承spring-boot-starter-parent项目 <parent> < ...

  2. VMware Converter Standalone迁移概要

    VMware Converter 迁移工具使用:1.基本概念 1.1基本组件: converter standalone server:包含server和worker两个服务,这两个服务经常一起安装 ...

  3. windows10图形化连接CentOS7

    前提:CentOS已经安装图形化,安装教程可以百度 [root@localhost ~]# cat /etc/redhat-release CentOS Linux release (Core) 安装 ...

  4. [Java 教程 02] 开发环境搭建

    在上一篇文章对Java做了一个简单介绍之后,我想大家都已经对她有一个初步的认识了吧!那踏入正式学习使用Java之前,我们有一步是不得不做的,它是什么呢?没有错,就是我们本篇文章的标题所说,搭建Java ...

  5. shell内置命令getopts

  6. jquery实现放大镜简单方法

    网上有许多放大镜的jquery的插件,但是用着不是那么得心应手,现在一页代码实现一个放大镜功能,如果需要附加的功能可以手动修改,原理都在注释里 1 2 3 4 5 6 7 8 9 10 11 12 1 ...

  7. ubuntu openssl 生成密钥对

    一般情况下ubuntu和mac系统都会自带openssl,安装之前先测试一下,打开终端,输入openssl,如果出现以下画面,即已安装. root@jiang:/home/kevin/work/ope ...

  8. python 循环中使用多个subplot画子图像(python matplotlib use more than one subplot in loop)

    在循环语句中画出多个subplot图像代码如下 http://jonathansoma.com/lede/data-studio/classes/small-multiples/long-explan ...

  9. Git分支,合并,切换分支的使用

    1.创建合并分支 在我们每次的提交,Git都把它们串成一条时间线,这条时间线就是一个分支.截止到目前,只有一条时间线,在Git里,这个分支叫主分支,即master分支.HEAD指针严格来说不是指向提交 ...

  10. Redis端口配置

    redis.host=192.168.200.128redis.port=6379redis.pass=redis.database=0redis.maxIdle=300redis.maxWait=3 ...