前端使用element ui将图片上传至后台

官网上给出的方法是在action写上后台的接口,用户选择图片,图片就会立即上传至后台。而实际的后台需求是要求图片数据跟随form表单中的数据一起提交,所以就需要使用官网上给出的http-request来自定义上传的方法。在methods中,该方法中的参数为file,初始化一个new FormData类型的对象,该对象的append方法将file字符串类型的键赋值为file.file。上传到后台是

this.$http(后台接口, fd, 'form').then((res) => {

            if (res.data.code === SuccessCode) {

              this.$message.success("上传成功");

            } else {

              this.$message.error(res.data.message);

            }

          });

如果前者不能正常之用的话,可以使用这种方法(立即上传式)

将 :http-request后的方法写入methods中,传入参数data和key。然后在方法中写入

 let myFile = data.file
 let fd = new FormData();
 fd.append('file',myFile)

写入具体的请求方法,并将请求头设置为

 headers: {
	'Content-Type': 'multipart/form-data'
},

向后台传入的参数就是fd(看具体需求)

一般后端会返回这张图片的url地址,如果有表单数据的话,将返回的url地址配合表单数据发送给后端就行

  • 1
    点赞
  • 39
    收藏
    觉得还不错? 一键收藏
  • 4
    评论
评论 4
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值