vue+node+后端服务完成上传图片总结

最近项目需求要做一个上传图片功能，且是调用接口上传，由于新手不是很了解，颇费一番周折，在这里总结一下心得，总体如下：

1、前端使用vue完成界面级别的交互，上传图片
2、vue提交到本项目后端-node（这里node就相当于中转层）
3、node再调用接口，提交给后端服务接口，完成真正意义的上传图片

下面详细说明下我的处理流程吧：

web选择图片并提交处理（vue）

template:`
	<!--点击触发上传图片的按钮-->
	<img src="./dev/images/jia.png" alt="" v-on:click="addFile"/>
	<!--上传图片表单：file，隐藏状态，通过上传图片按钮间接触发-->
	<input type="file" id="imgfile" style="display:none;" v-on:change="getFile($event)">
	<!--展示图片-->
	<img :src="imgsrc" alt="" />
	`,
data() {
   
	return {
   
		imgsrc, //临时保存上传的图片链接或内容
		file: null, //临时保存上传文件信息
	}
},
methods:{
   
	// 点击按钮，触发input file事件,添加文件
	addFile() {
   
		$('#imgfile').trigger('click');
	},
    // 临时保存上传文件信息,并在页面中载入图片
    getFile(event) {
   
        this.file = event.target.files[0];
        let that = this;

        // ✨添加上传图片预览：先将文件以Data URL形式读入页面
        let fileReader = new FileReader();
        fileReader.readAsDataURL(this.file);
        fileReader.onload = function () {
   
        	// this.result就是图片的base64结果
            that.imgsrc = this.result;
        }
    },
    // 删除图片
    removeFile() {
   
        // ✨这里注意：删除时要记得清空一下file表单的值，否则再次上传同一张图片时就不会再触发file的change事件了
        $('#imgfile').val(