图片上传是以表单的形式提交,vue上传图片步骤如下:

1、绑定input框上传事件change

<input type="file" @change="uploadFile($event)" multiple="multiple" />

2、change事件触发methods

methods:{
    uploadFile:function(event){
      this.file = event.target.files[0]; //获取input的图片file值
      let param = new FormData(); // 创建form对象
      param.append('imgFile', this.file);//对应后台接收图片名
      axios.post('http://www.baidu.com/upload_img',param)
        .then(function(res){
          console.log(res);
        })
        .catch(function(error){
          console.log(error);
        });
    }
}

3、post提交图片到后台,获取后台返回的图片链接,展示在页面中

Logo

前往低代码交流专区

更多推荐