<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]); },
onSubmit(event) { this.$refs['form'].validate((valid) => { if (valid) { event.preventDefault(); let Authorization = getToken(); formData.delete('pkId');//防止二次修改表单后重复添加 formData.delete('time');//防止二次修改表单后重复添加 formData.delete('remarks');//防止二次修改表单后重复添加 formData.delete('url');//防止二次修改表单后重复添加 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:formData, 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: "修改失败", type: "danger", duration: 2000 }); } }).catch(function (error) { console.log(error); }); } else { console.log('error submit!!'); return false; } }); },