vue submission form forms, including pictures, element-ui

<el-form :model="form" ref="form" label-width="100px">
        <el-form-item label="地址" prop="url">
          <el-input v-model="form.url" placeholder="请输入地址"></el-input>
        </el-form-item>
        <el-form-item label="时长 " prop="time">
          <el-input type="number" placeholder="请输入时长" v-model="form.time" @keyup.native="handleClick"></el-input>
        </el-form-item>

        <el-form-item width="200" align="center" label="选择文件" prop="path">
          <input type="file" class="face" accept="image/*" @change="getFile($event)" ref="inputer">
        </el-form-item>
        <el-form-item label="备注" prop="remarks">
          <el-input placeholder="请输入备注" v-model="form.remarks"></el-input>
        </el-form-item>
        <el-form-item>
            <el-button type="primary" @click="onSubmit($event)">提交</el-button>
        </el-form-item>
      </el-form>
getFile(event) {
        this.form.multipartFile = event.target.files[0];
        if(formData.get('multipartFile')){//重新选择图片
            formData.delete('multipartFile');
        }
        formData.append("multipartFile", event.target.files[0]);
        
    },
the onSubmit (Event) {
         the this .. refs $ [ 'form'] the validate ((Valid) => {
             IF (Valid) { 
                the event.preventDefault (); 
                the let the Authorization = getToken to (); 
                . formData Delete ( 'PKID'); // repeated after adding to prevent secondary modified form 
                formData. Delete ( 'Time'); // the modified form to prevent secondary repeated addition 
                formData. Delete ( 'Remarks'); // the modified form to prevent secondary repeated addition 
                formData. Delete ( 'URL'); // the modified form to prevent secondary repeated addition 
                . formData Delete('fileName');//防止二次修改表单后重复添加
                formData.append("pkId", this.form.pkId);
                formData.append("time", this.form.time);
                formData.append("remarks", this.form.remarks);
                formData.append("url", this.form.url);
                formData.append("fileName", 'advertisement');
                axios({
                    method: 'post', 
                    url:'/api/*****',
                    Data: formdat to,
                    headers: {'Authorization': Authorization,'Content-Type':'multipart/form-data'}
                }).then(({data})=>{
                    if(data.code===0){
                        this.$message({
                            showClose: true,
                            message: "成功",
                            type: "success"
                        });
                    }else{
                        this.$notify({
                            title: "失败",
                            message:"fail to edit",
                            type: "danger",
                            duration: 2000
                        });
                    }
                }).catch(function (error) {
                    console.log(error);
                });
            } else {
                console.log('error submit!!');
                return false;
            }
        });
        
    },

 

Guess you like

Origin www.cnblogs.com/lzzxm/p/12434233.html