搭建vue后台管理系统的时候碰到的上传图片到后台接口

template的代码

<el-upload
    //上传的地址
	action="#"
    //最大数量
	:limit='9'
    //成功的回调
	:on-success="handlePicSuccess"
    //超出限制数量的回调
	:on-exceed="exceedFile"
    //上传时验证文件的格式
	:before-upload="beforeUploadPic"
	list-type="picture-card"
	multiple
	ref="pictureUpload">
	<i slot="default" class="el-icon-plus"></i>
	<div slot="file" slot-scope="{file}">
		<img class="el-upload-list__item-thumbnail" :src="file.url" alt="">
		<span class="el-upload-list__item-actions">
            <span v-if="!disabled" 
            class="el-upload-list__item-delete" 
            // 删除
            @click="handlePicRemove(file)">
				<i class="el-icon-delete"></i>
			</span>
		</span>
	</div>
</el-upload>

js的代码

// 图片上传成功把图片路径push进去数组中
handlePicSuccess(response){
	if(response.status==200){
	    this.uploadPic.push(response.filepath)
	}
},
// 文件超出个数限制时的钩子
exceedFile(files, fileList) {
	this.$message.warning(`只能选择 9 个文件，当前共选择了 ${files.length + fileList.length} 个`);
},
// 验证图片格式
beforeUploadPic(file){
	if (
		[
			'image/png',
			'image/jpg',
			'image/jpeg'
		].indexOf(file.type) === -1
	) {
	    this.$message.error('请上传正确的视频格式')
		return false
	}
},
// 删除图片
handlePicRemove(file) {
	let Picpath = file.response.filepath; 
	this.$refs.pictureUpload.handleRemove(file)
	this.uploadPic.forEach(item => {
		if(item===Picpath){
			this.uploadPic.splice(item, 1)
		}
	})
},

data中定义的数据

uploadPic：{}    //存储上传成功后接口返回的图片数据

总的来说就是运用element-ui中的组件，对电脑的文件进行上传，然后根据后端的接口，如果上传成功会返回一个值，然后我们根据需求，在js中对数据进行处理，如果成功上传了，在上传成功的钩子里获取数据然后赋值到data中即可。