问题:表单中包含上传图片的功能,相应的接口参数只接受 URL(string类型)
解决方法:获取input中的file后,调用上传图片的接口(后台将图片保存在文件服务器,返回url地址)
// 实际显示的图片 <img class="ad-img-wrap" :src="form.imgUrl" @click="clickImage"> <input type="file" @change="changeImgHandler($event)" ref="adImg" style="display: none;" accept="image/*"> changeImageHandler () { this.$refs.adImg.dispatchEvent(new MouseEvent('click')) } changeImgHandler (e) { let fileName = this.$refs.adImg.value this.form.imgInputVal = fileName let list = fileName.split('.') let type = list[list.length - 1] let flag = false // imgFormat 为所有图片类型的数组 for (let i = 0; i < imgFormat.length; i++) { if (imgFormat[i] === type) flag = true } if (!flag) { this.$message({ message: '请选择图片', type: 'warning' }) return false } this.form.imgHasChanged = true this.form.imgFile = e.target.files[0] // 此处接受到 file 文件 } // 调用方法 asnyc submit() { const formData = new FormData() // 上传文件接口要求的参数名为 file formData.append('file', that.form.imgFile) // API.uploadFile 为接口地址 let ret = await that.$http.post(API.uploadFile, formData) }