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

vue+elementUI实现上传案例

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

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