vue 使用input file点击上传本地图片

<input type="file" @change="upData($event)" ref="InputFile" name="files" />

 这里传本地图片给后台（java为例）,流程是在点击完input file只后就会发送文件给后台提供的接口，会直接返回一个img路径，然后再传给对应的接口

upData(event) {
            var reader = new FileReader();
            let fileData = this.$refs.InputFile.files[0];
            reader.readAsDataURL(fileData);
            let _this = this;
            reader.onload = function(e) {
                //这里的数据可以使本地图片显示到页面
                _this.addimg = e.srcElement.result;
            };
            // 使用formapi打包
            let formData = new FormData();
            formData.append('file', fileData);
            this.axios.post('/api/v1/uploads/course/img', formData).then(function(res) {
                console.log(res);
                _this.addimgtijiao = res.data.path;
            });
        }

 

转载于:https://www.cnblogs.com/chenchenhao/p/10387388.html