比较完整的upload上传 页面完整代码

<template>
    <el-dialog
    :title="editFlag?'资产修改':'资产新增'"
    :visible.sync="visible"
    :close-on-click-modal='false'
    width="60%"
    top='4vh'
    >
    <a-spin :spinning='loading' tip='数据加载中...'>
        <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
            <el-form-item label="资产名称" class="w3" prop="assetName">
                <el-input v-model="ruleForm.assetName" placeholder="请输入资产名称"></el-input>
            </el-form-item>
            <el-form-item label="资产编号" class="w3" prop="assetCode">
                <el-input v-model="ruleForm.assetCode" placeholder="请输入资产编号"></el-input>
            </el-form-item>        
            <el-form-item label="资产类型" class="w3" prop="assetType">
                <el-select v-model="ruleForm.assetType" class="w-full" placeholder="请选择资产类型">
                    <el-option v-for="(item,index) in typeList" :key='index' :label="item.labelName" :value="item.labelName"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="设备IP" class="w3" prop="ip">
                <el-input v-model="ruleForm.ip" placeholder="请输入设备IP"></el-input>
            </el-form-item>
            <el-form-item label="资产状态" class="w3" prop="status">
                <el-select v-model="ruleForm.status"  class="w-full" placeholder="请选择资产状态">
                    <el-option v-for="(item,index) in statusList" :key="index" :label="item.label" :value="item.value"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="资产品牌" class="w3" prop="brand">
                <el-input v-model="ruleForm.brand" placeholder="请输入资产品牌"></el-input>
            </el-form-item>
            <el-form-item label="采购金额(元)" class="w3" prop="money">
                <el-input-number v-model="ruleForm.money" style="width:100%" placeholder="请输入采购金额(元)"></el-input-number>
            </el-form-item>
            <el-form-item label="管理人" class="w3" prop="manager">
                <el-input v-model="ruleForm.manager" placeholder="请输入管理人名称"></el-input>
            </el-form-item>
            <el-form-item label="使用人" class="w3" prop="belongs">
                <el-input v-model="ruleForm.belongs" placeholder="请输入使用人名称"></el-input>
            </el-form-item>
            <el-form-item label="联系人" class="w3" prop="contact">
                <el-input v-model="ruleForm.contact" placeholder="请输入联系人名称"></el-input>
            </el-form-item>
            <el-form-item label="联系方式" class="w3" prop="phone">
                <el-input v-model="ruleForm.phone" placeholder="请输入联系方式"></el-input>
            </el-form-item> 
            <el-form-item label="配件" class="w3" prop="otherAssetID">
                <el-select v-model="ruleForm.otherAssetID" class="w-full" placeholder="请选择配件资产">
                    <el-option v-for="(item,index) in otherList" :key='index' :label="item.assetName" :value="item.id"></el-option>
                </el-select>
            </el-form-item>          
            <el-form-item label="备注" class="w3" prop="mark">
                <el-input type="textarea" v-model="ruleForm.mark" placeholder="请输入备注"></el-input>
            </el-form-item>
            <el-form-item label="上传合同" class="w5" >
                <el-upload
                    class="upload-demo"
                    accept=".jpg, .png, .pdf"
                    ref="upload"
                    action=""
                    drag
                    :auto-upload="true"
                    :file-list="fileList"
                    :http-request="uploadHttpRequest"
                    :on-success='uploadSuccess'
                    :on-remove="handleRemove"
                    :on-change="upload_change"
                    :on-error='uploadError'
                    :show-file-list="true"
                    multiple>
                    <i class="el-icon-upload"></i>
                    <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
                    <div class="el-upload__tip" slot="tip">只能上传jpg/png/pdf文件</div>
                </el-upload>
            </el-form-item>
        </el-form>
    </a-spin>
    <span slot="footer" class="dialog-footer">
        <el-button @click="close('ruleForm')">取 消</el-button>
        <el-button type="primary" @click="submitForm('ruleForm')">{{editFlag?'确定修改':'确定'}}</el-button>
    </span>
    </el-dialog>
</template>
<script>
export default {
    data(){
        return{
            visible:false,
            ruleForm: {
                assetName: '',
                assetCode:'',
                assetType:"",
                ip:'',
                status:'',
                brand:"",
                money:'',
                manager: '',
                belongs: '',
                contact: '',
                phone:"",
                otherAssetID: '',
                createTime: '',
                updateTime:'',
                mark: '',
            },
            fileList:[],
            formData: null,
            statusList:[
                {
                    label:'在用',
                    value:1
                },{
                    label:'空闲',
                    value:2
                },{
                    label:'报废',
                    value:3
                },{
                    label:'租用',
                    value:4
                }
            ],
            typeList:[],
            otherList:[],
            rules: {
                assetName: [
                    { required: true, message: '请输入资产名称', trigger: 'blur' },
                ],
                assetCode: [
                    { required: true, message: '请输入资产编号', trigger: 'blur' },
                ],
                assetType: [
                    { required: true, message: '请输入资产类型', trigger: 'change' },
                ],
                status: [
                    { required: true, message: '请输入资产状态', trigger: 'change' },
                ],
                manager: [
                    { required: true, message: '请输入管理人名称', trigger: 'blur' },
                ],
                contact: [
                    { required: true, message: '请输入联系人名称', trigger: 'blur' },
                ],
                phone: [
                    { required: true, message: '请输入联系方式', trigger: 'blur' },
                    { pattern: /^[1](([3][0-9])|([4][5-9])|([5][0-3,5-9])|([6][5,6])|([7][0-8])|([8][0-9])|([9][1,8,9]))[0-9]{8}$/, message: '请确保输入的电话号码规范！', trigger: 'blur' }
                ],
                belongs: [
                    { required: true, message: '请输入使用人名称', trigger: 'blur' },
                ],
            },
            editFlag:false,
            loading:false,
        }
    },
    methods:{
        async show(obj){
            this.visible = true;
            this.$refs.ruleForm&&this.$refs.ruleForm.resetFields();
            this.fileList = [];
            await this.getAssetsType();
            await this.get_other_data();
            this.formData = new FormData(); 
            let arr = Object.keys(obj);
            console.log(arr,'arr')
            if(arr.length>0){
                this.editFlag = true;
                this.ruleForm = obj;
                this.get_assets_deal(obj.id);
            }else{
                this.editFlag = false;
            }
        },

        get_assets_deal(id){
            this.$api.get(`/api/assets/getAssetAgreement/${id}`)
            .then(res =>{
                let code = res.code;
                if(code ==0){
                    let data = res.data;
                    let list = data.map((item,index)=>{
                        return {
                            name:item.agreementUrl,
                            url:item.agreementUrl,
                            id:item.id,
                            raw:new File([],item.name,{})
                        }
                    })
                    this.fileList = list;
                    console.log(this.fileList,'data')
                }else{
                    this.failTit('资产合同获取失败，请稍后重试！')
                }
            })
            .catch(err =>{
                this.failTit('资产合同获取失败，请稍后重试！')
            })
        },

        //获取资产类型
        async getAssetsType(){
            return new Promise((resolve,reject)=>{
                this.loading = true;
                this.$api.get('/api/assets/getAssetType')
                .then(res =>{
                    this.loading = false;
                    let code = res.code;
                    if(code == 0){
                        this.typeList = res.data;
                        resolve( this.typeList );
                    }else{
                        this.failTit('资产类型获取失败，请稍后重试！')
                    }
                })
                .catch(err =>{
                    this.loading = false;
                    reject();
                    this.failTit('资产类型获取失败，请稍后重试！')
                })
            })            
        },

        //获取配件资产
        async get_other_data(){
            return new Promise((resolve,reject)=>{
                this.loading = true;
                this.$api.get(`/api/assets/getAllAssets`)
                .then(res =>{
                    this.loading = false;
                    let code = res.code;
                    if(code == 0){
                        let data = res.data;
                        this.otherList = data;
                        resolve(data);
                    }
                })
                .catch(err =>{
                    this.loading = false;
                    reject();
                })
            })

        },

        uploadHttpRequest(param){
            this.formData.append('files', param.file);
        },

        uploadSuccess(){
            this.$notify({
                title: '成功',
                message: '文件成功上传！',
                type: 'success'
            });
        },

        uploadError(){
            this.$notify.error({
                title: '错误',
                message: '文件上传失败，请重试！'
            });
        },

        //移除文件
        handleRemove(file,fileList){
            console.log(file,'filessslist');
            let id = file.id;
            this.deleteUpload(id);
            this.fileList = fileList;
        },

        deleteUpload(id){
            this.$api.delete(`/api/assets/deleteAgreement/${id}`)
            .then(res=>{
                let code = res.code;
                if(code == 0){
                    this.$message({
                        message: '删除成功',
                        type: 'success'
                    });
                }else{
                    this.$message.error('删除失败');
                }
            })
            .catch(err =>{
                this.$message.error('删除失败');
            })
        },

        upload_change(file,fileList){
            this.fileList = fileList;
            console.log(fileList,'filelist')
        },
        submitForm(formName) {
            this.$refs[formName].validate((valid) => {
                if (valid) {
                   if(!this.editFlag){
                       this.submitCon();
                   }else{
                       this.updateCon();
                   }
                } else {
                    console.log('error submit!!');
                    return false;
                }
            });
        },
        submitCon(){
            this.formData.append("params", new Blob([JSON.stringify( this.ruleForm )],{type: "application/json"}))
            this.$api.post('/api/assets/addAsset',this.formData)
            .then(res =>{
                let code = res.code;
                if(code == 0){
                    this.$emit('ok');
                    this.visible = false;
                    this.successTit('新增成功！')
                }else{
                    this.failTit('新增失败，请稍后重试！')
                }
            })
            .catch(err =>{
                this.failTit('新增失败，请稍后重试！')
            })
            .finally(()=>{
                this.formData.delete("params");
            })
        },

        updateCon(){
            this.formData.append("params", new Blob([JSON.stringify( this.ruleForm )],{type: "application/json"}))
            this.$api.update(`/api/assets/updateAsset/${this.ruleForm.id}`,this.formData)
            .then(res =>{
                let code = res.code;
                if(code == 0){
                    this.$emit('ok');
                    this.visible = false;
                    this.successTit('修改成功')
                }else{
                    this.failTit('修改失败，请稍后重试！')
                }
            })
            .catch(err =>{
                this.failTit('修改失败，请稍后重试！')
            })
            .finally(()=>{
                this.formData.delete("params");
            })
        },


        close(formName) {
            this.$refs[formName].resetFields();
            this.visible = false;
        },

        close(){
            this.visible = false;
        }
    }
}
</script>
<style lang="less" scoped>
.w3{
    width:30%;
    display: inline-block;
}
.w5{
    width:50%;
}
</style>

本作品采用《CC 协议》，转载必须注明作者和本文链接