vue分次传多张图片
网上搜了一下,传多张图片都是一次选中多张图片然后上传的,如果想要点击一次上传一张图片,这样分两次上传两张图片如何处理呢。先在form中定义两个上传组件
<el-form-item :label="$t('lang.siteSettings.logo')" prop="sysImage">
<el-upload
class="upload-demo"
action="#"
accept=".jpg, .png"
:auto-upload="false"
:on-change="uploadFile"
:show-file-list="false"
:before-upload="beforeAvatarUpload"
>
<img v-if="imageUrl" :src="imageUrl" class="avatar">
<i v-else ></i>
<el-button size="mini" type="primary" icon="el-icon-upload2"
>{{$t('lang.siteSettings.uploadPictures')}}
</el-button>
</el-upload>
</el-form-item>
<el-form-item :label="$t('lang.siteSettings.icon')" prop="icon">
<el-upload
class="upload-demo"
action="#"
accept=".jpg, .png"
:auto-upload="false"
:on-change="uploadFile1"
:show-file-list="false"
:before-upload="beforeAvatarUpload1"
>
<img v-if="imageUrl1" :src="imageUrl1" class="avatar1">
<i v-else ></i>
<el-button size="mini" type="primary" icon="el-icon-upload2"
>{{$t('lang.siteSettings.uploadPictures')}}
</el-button>
</el-upload>
</el-form-item>
data中
imageUrl: '',
imageUrl1: '',
methods中
uploadFile (item) {
let file = item.raw
this.form.file = file
// formData.append('file', file)
this.imageUrl=window.URL.createObjectURL(file)
},
//上传文件
uploadFile1 (item) {
let file = item.raw
this.form.file1 = file
// formData.append('file', file)
this.imageUrl1=window.URL.createObjectURL(file)
},
表单提交
this.$refs["form"].validate(valid => {
if (valid) {
if (this.form.id != undefined) {
let formData = new FormData()
formData.append("id",this.form.id)
formData.append("file",this.form.file)
formData.append("file1",this.form.file1)
formData.append("sysDesc",this.form.sysDesc)
formData.append("sysKeys",this.form.sysKeys)
formData.append("sysName",this.form.sysName)
updateSys(formData).then(response => {
this.$modal.msgSuccess("修改成功");
this.open = false;
this.getList();
});
} else {
let formData = new FormData()
formData.append("file",this.form.file)
formData.append("file1",this.form.file1)
formData.append("sysDesc",this.form.sysDesc)
formData.append("sysKeys",this.form.sysKeys)
formData.append("sysName",this.form.sysName)
updateSys(formData).then(response => {
this.$modal.msgSuccess("新增成功");
this.open = false;
this.getList();
});
}
}
});
后端获取
@ApiOperation(value="新增Site settings")
@PostMapping("/insertFile")
public AjaxResult insertFile(SystemFile systemFile,@RequestParam(value = "file",required = false) MultipartFile file,@RequestParam(value = "file1",required = false) MultipartFile file1) throws IOException {}
浙公网安备 33010602011771号