Vue+elementUI如何使用文件Upload 上传文件

2021-07-18   阅读:386   分类:前端    标签: Vue

vue+elementUI实现上传案例

image.pngimage.png

实现对图片进行移除、上传、修改、点击图片对图片进行预览

1、html代码部分

<template>
    <div>
            <el-form :model="setupForm" ref="setupFormRef" label-width="100px">
				<el-form-item label="登录LOGO" prop="logo">
					<el-upload :action="uploadURL" :on-preview="handlePreview"
							:on-remove="handleEditRemove2" list-type="picture" :headers="headerObj" :data="otherData" :on-success="handleEditSuccess2" multiple :limit="1" :file-list="fileList2">
							<el-button size="small" type="primary">点击上传</el-button>
					</el-upload>
				</el-form-item>
				<el-form-item label="">
				<el-button type="primary" @click="saveSetup">保存</el-button>
				</el-form-item>
            </el-form>
            <!-- 预览图片 -->
        <el-dialog title="图片预览" :visible.sync="previewDialogVisible" width="30%">
        <img :src="PreviewPath" alt="" width="100%" height="auto">
        <span slot="footer" class="dialog-footer">
            <el-button @click="previewDialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="previewDialogVisible = false">确 定</el-button>
        </span>
        </el-dialog>
    </div>
</template>

2、JavaScript代码部分

<script>
export default {
    data(){
        return {
            setupForm: {
                logo: '',
            },
            //  上传图片地址
            uploadURL: domain +'upload',
            //  图片上传请求头
            headerObj:{token: window.localStorage.getItem('token')},
            fileList1: [],
            //上传附带额外参数
            otherData:{
                path:'setup'
            },
            previewDialogVisible: false,
            PreviewPath:'',
        }
    },
    created(){
    },
    methods:{
        async saveSetup(){
            const { data: res } = await this.$http.post('config/saveSys',this.setupForm)
            
            if (res.code != 200) {
                return this.$message.error(res.msg)
            }
            this.$message.success(res.msg)
        },
        // 处理移除图片的操作
        handleRemove1(file) {
            this.setupForm.logo = ''
        },
        

        // 监听处理图片上传成功
        handleSuccess2(response){
            this.setupForm.logo = response.data.path
        },
        

        // 处理编辑移除图片的操作
        handleEditRemove2(file) {
            this.setupForm.logo = ''
        },

        
        // 监听处理编辑图片上传成功
        handleEditSuccess2(response){
            this.setupForm.logo = response.data.path
            // console.log(this.addForm)
        },
        //处理图片预览效果
        handlePreview(file) {
            this.previewDialogVisible = true
            this.PreviewPath = file.url
            console.log(file.url);
        },

    }
}
</script>

更多上传参数介绍详看组件文档:https://element.eleme.cn/#/zh-CN/component/upload

【腾讯云】爆款1核2G云服务器首年48元,还有iPad Pro、Bose耳机、京东卡等你来抽!

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

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

文章评论(0)

登录
简忆博客壁纸 头像

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

置顶推荐

打赏本站

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