vue通过接口实现图片上传

本文介绍了如何在Vue.js应用中使用iview UI库的Upload组件与后端接口配合,实现图片上传功能。首先展示了iview Upload上传组件的使用,并详细说明了接口的必填参数file和服务。接着,通过尝试接口请求,确定了请求URL即为`action`属性的值。然后,将Upload组件集成到表单中,修改了`action`属性和删除了默认文件列表。最后,展示了如何定制上传成功后的回调函数,以便处理后端返回的数据。
摘要由CSDN通过智能技术生成

想要在表单里做一个可以上传图片的位置:
添加上传图片项
找到iviewUI下的Upload上传
(我准备用这个,看起来最刘批的
图片下面的自己找吧
我的接口:
(这里的file、service是必填项,也就是要必须传
图片上传后端接口显示
点鸡try out看下传参:
(“Request URL” 为下面的 “action”上传的地址,是必填项
Request URL
我复制iview下upload组件来的,写在template下的:
(这里我结合实际写到我的表单里当做一项,你可以从第二行div开始看
(另外,复制过来的我改了上传的地址action和删掉了默认已上传的文件列表default-file-list,这些属性不知道的在刚刚那个iview网页最下面查找
在这里插入图片描述
复制来的默认参数:
(删掉了默认已上传的文件列表default-file-list,改造了uploadList

data() {
   
		return {
   
            imgurl: '',
            visible: false,
            uploadList: [
                {
   
                    'status':'finished',
                    'name': 'p1',
                    'url': 'https://
  • 0
    点赞
  • 13
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值