当前位置:   article > 正文

element中el-upload结合后台接口的用法_vueel.upload后台接口写到哪

vueel.upload后台接口写到哪

功能描述:在本地选择图片上传之后调用后台上传文件接口,实现文件上传

效果图:

代码:

 

  1. //上传图标
  2. uploadImg (item) {
  3. const fileObj = item.file
  4. // FormData 对象
  5. const form01 = new FormData()
  6. // 文件对象
  7. form01.append('file', fileObj)
  8. form01.append('bizCode', this.bizCode)
  9. form01.append('scene', this.scene)
  10. this.$http({
  11. url: this.$http.adornUrl("/sys/file/upload"),
  12. method: "post",
  13. headers:this.$http.addReq('form'),
  14. data:form01
  15. }).then(({ data }) => {
  16. console.log(data)
  17. if (data && data.code === 0) {
  18. this.$message({
  19. message: '上传成功',
  20. type: 'success',
  21. duration: 1500,
  22. onClose: () => {
  23. //把获取的文件转换称图片地址,并传值给img
  24. this.form.icon = URL.createObjectURL(fileObj);
  25. }
  26. })
  27. } else {
  28. this.$message({
  29. message: '上传失败',
  30. type: 'warning',
  31. duration: 1500,
  32. onClose: () => {
  33. }
  34. })
  35. }
  36. })
  37. .catch(() => {
  38. this.$message.error("异常错误");
  39. });
  40. },

 

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/Gausst松鼠会/article/detail/76805
推荐阅读
相关标签
  

闽ICP备14008679号