目录
2.3测试:on-success中res和file里面有什么
gitee仓库地址:
https://gitee.com/CMD-UROOT/my_project/commits/master
大家根据上传历史进行查找你需要的代码
业务需求:
我们需要输入品牌名称和上传品牌LOGO后点击确定,能把我们添加的内容放到页面上面显示
那么我们需要收集品牌名称,品牌LOGO,当我们点击添加或者修改按钮的时候,然后把我们新添加或者修改的这些信息提交给后台,后台需要向数据库当中插入一个新的品牌,将来我们在发请求的获取服务器数据的时候,就可以获取到新的品牌的数据
api文档地址:http://39.98.123.211:8416/swagger-ui.html#!/base45trademark45controller/indexUsingGET
1.书写API请求接口
在api/product/tradeMark/index.vue中:
2.前台收集数据,给服务器提交数据(发请求)
在views/product/tradeMack/index.vue中:也就是我们的组件中的对话框的结构的位置
2.1收集品牌名称
效果:收集成功
2.2收集品牌LOGO
收集品牌LOGO这个是一个上传图片的插件,不是什么表单元素,不能使用v-model来收集数据
我们需要用到上传管理接口:
在views/product/tradeMack/index.vue中:
我们把上传管理接口的地址放到action中试试:
测试:我们点击上传图片的时候,控制台报404
报错的原因是:
我们先看看成功的请求,都带了dev-api
而我们失败的请求,没有dev-api
所以我们在我们的action后面的地址前面加上/dev-api
效果:上传成功
2.3测试:on-success中res和file里面有什么
:on-success可以检测到图片上传成功,会执行一次
:before-upload 可以在图片上传之前,执行一次
我们看看:on-success 、:before-upload这两个里面的函数在执行什么
我们在图片上传成功这个函数里面打印res,看看
效果,上传后,点击确认,控制台:
将来我们需要把这data: 'http://139.198.127.41:9000/sph/20220530/vue.jpg'数据带给服务器,以后他就是我们图片在服务器真实的地址
复制粘贴到导航栏,没问题:
我们在看看file里面是什么
打印:
2.3收集图片数据
在views/product/tradeMack/index.vue中:
我们删除data中的imageUrl这个字段,原因是我们再上图中,我们已经获取到图片了,这里就不用了
删除后:
替换结构中的图片位置:
测试:
这回我们发现,带给服务器的参数已经准备好了,都在我们组件中了,并且对于添加品牌这里收集的数据是不带id的
3.提交数据给服务器
点击确定,把数据提交给服务器
3.1点击取消的问题
当我们点击取消的时候,我们在点击添加会发现数据还在,按照常理来说,应该是我们点击取消后,再点击添加按钮,应该是空的,没有数据才对
解决方法也很简单,当我们 每次点击添加按钮的时候,我们先把tmForm的数据都清理一下
在views/product/tradeMack/index.vue中:
测试:这回问题解决了
3.2点击确定上传数据
给确定绑定一个点击事件:
事件的回调:
测试:
点击确定后:
我们可以在我们的数据中看到:确实添加成功了
具体逻辑图是这样的
完整代码去我的gitee拿吧