vue-element实现图片上传例子,图片上传预览

2020-11-29   阅读:2376   分类:前端    标签: Vue

image.png

image.png

前端代码:

<template>
<div>
<el-form :model="addForm" :rules="addFormRules" ref="addFormRef" label-width="80px" label-position="left">
<el-tab-pane label="缩略图" name="2">
                        <el-upload :action="uploadURL" :on-preview="handlePreview"
                            :on-remove="handleRemove" list-type="picture" :headers="headerObj" name="img" :on-success="handleSuccess" multiple :limit="1">
                            <el-button size="small" type="primary">点击上传</el-button>
                        </el-upload>
                    </el-tab-pane>
 </el-form>
</div>
</template>

Js代码:

<script>
export default {
    data(){
        return{
                  uploadURL: domain +'article/upload',
           //  图片上传请求头
            headerObj:{token: window.sessionStorage.getItem('token')},
            // 预览窗口
            previewDialogVisible: false,
                   //图片预览地址            
PreviewPath:''
}
},
created(){
       
},
methods:{
            //处理图片预览效果
            handlePreview(file) {
                this.previewDialogVisible = true
                this.PreviewPath = file.url
                console.log(file.url);
            },
            // 处理移除图片的操作
            handleRemove(file) {
                this.addForm.img = ''
                console.log(this.addForm)
            },
            // 监听处理图片上传成功
            handleSuccess(response){
                this.addForm.img = response.data.path
                // console.log(this.addForm)
            }
}
}
</script>

参数说明

参数

说明

类型

可选值

默认值

action

必选参数,上传的地址

string

headers

设置上传的请求头部

object

multiple

是否支持多选文件

boolean

data

上传时附带的额外参数

object

name

上传的文件字段名

string

file

with-credentials

支持发送 cookie 凭证信息

boolean

false

show-file-list

是否显示已上传文件列表

boolean

true

drag

是否启用拖拽上传

boolean

false

accept

接受上传的文件类型(thumbnail-mode 模式下此参数无效)

string

on-preview

点击文件列表中已上传的文件时的钩子

function(file)

on-remove

文件列表移除文件时的钩子

function(file, fileList)

on-success

文件上传成功时的钩子

function(response, file, fileList)

on-error

文件上传失败时的钩子

function(err, file, fileList)

on-progress

文件上传时的钩子

function(event, file, fileList)

on-change

文件状态改变时的钩子,添加文件、上传成功和上传失败时都会被调用

function(file, fileList)

before-upload

上传文件之前的钩子,参数为上传的文件,若返回 false 或者返回 Promise 且被 reject,则停止上传。

function(file)

before-remove

删除文件之前的钩子,参数为上传的文件和文件列表,若返回 false 或者返回 Promise 且被 reject,则停止删除。

function(file, fileList)

list-type

文件列表的类型

string

text/picture/picture-card

text

auto-upload

是否在选取文件后立即进行上传

boolean

true

file-list

上传的文件列表, 例如: [{name: 'food.jpg', url: 'https://xxx.cdn.com/xxx.jpg'}]

array

[]

http-request

覆盖默认的上传行为,可以自定义上传的实现

function

disabled

是否禁用

boolean

false

limit

最大允许上传个数

number

on-exceed

文件超出个数限制时的钩子

function(files, fileList)




【腾讯云】 爆款2核2G3M云服务器首年 61元,2核2G4M云服务器新老同享 99元/年,续费同价

‘简忆博客’微信公众号 扫码关注‘简忆博客’微信公众号,获取最新文章动态
转载:请说明文章出处“来源简忆博客”。http://www.tpxhm.com/fdetail/527.html

×
觉得文章有用就打赏一下文章作者
微信扫一扫打赏 微信扫一扫打赏
支付宝扫一扫打赏 支付宝扫一扫打赏

文章评论(0)

登录
简忆博客壁纸一
简忆博客壁纸二
简忆博客壁纸三
简忆博客壁纸四
简忆博客壁纸五
简忆博客壁纸六
简忆博客壁纸七
简忆博客壁纸八
头像

简忆博客
勤于学习,乐于分享

置顶推荐

打赏本站

如果你觉得本站很棒,可以通过扫码支付打赏哦!
微信扫码:你说多少就多少~
微信扫码
支付宝扫码:你说多少就多少~
支付宝扫码
×