前端使用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
    评论
技术债务是指在软件开发过程中出现的技术上的短期折衷或缺陷,它们可以在今后的开发中花费更多的时间和资源来修复。对于前端vue element-ui后台项目来说,可能会出现以下技术债务: 1. UI设计方面的技术债务:可能存在UI设计不合理或者不符合用户体验的问题,这可能导致用户对产品的使用不满意,需要花费更多的时间和资源来进行UI设计的调整和优化。 2. 代码质量方面的技术债务:可能存在代码冗余、重复或者不规范等问题,这会导致项目后期的维护和开发成本增加,需要花费更多的时间和资源来进行代码重构和优化。 3. 技术栈方面的技术债务:可能存在技术栈过时或者不适合项目需求的问题,这会导致项目的扩展和升级难度增加,需要花费更多的时间和资源来进行技术栈的替换或者升级。 4. 测试方面的技术债务:可能存在测试不全面或者测试覆盖率不够的问题,这会导致项目的稳定性和可靠性降低,需要花费更多的时间和资源来进行测试用例的编写和测试覆盖率的提高。 针对以上问题,可以采取以下措施来减少技术债务: 1. 在项目开发过程中,注重UI设计的合理性和用户体验的优化,避免出现UI设计方面的技术债务。 2. 在项目开发过程中,注重代码质量的优化和规范,避免出现代码方面的技术债务。 3. 在选择技术栈时,要考虑到项目需求和未来的扩展和升级,避免出现技术栈方面的技术债务。 4. 在项目开发过程中,注重测试用例的编写和测试覆盖率的提高,避免出现测试方面的技术债务。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 4
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值