记一次Vue使用图片上传及图片回显问题

首先是图片上传的部分

1、不管你是否使用action，都需要写上action，不然会报错
2、getFile是图片上传方法，imageUrl是图片上传后的回显路径

				<el-row>
					<el-col :span="12">
						<el-form-item label="图片:">
							<el-upload 
								class="avatar-uploader" 
								:on-change="getFile" 
								:show-file-list="false"
								action="" 
								:auto-upload="false">
								<img v-if="imageUrl" :src="imageUrl" class="avatar" /> 
								<i v-else class="el-icon-plus avatar-uploader-icon"></i>
							</el-upload>
						</el-form-item>
					</el-col>
				</el-row>

图片上传方法(getFile)

采用formdata的形式进行文件上传

		/**
		 * 文件上传
		 */
		getFile(file) {
			let fd = new FormData()
			fd.append('file', file.raw)// 传文件
			this.$httpBlock
			.post(this.$httpImageUrl +'/upload',fd, {headers: {'content-type': 'multipart/form-data'}})
			.then(res => {
				this.imageUrl = this.$httpImageCheckUrl+res.data.data.bucketName+"/"+res.data.data.fileName;
				this.msgSuccess('图片上传成功');
			})
			.catch(err => {
				this.msgSuccess('图片上传失败');
			});
		},