zoukankan      html  css  js  c++  java
  • iview中upload组件上传图片,跨域

    前提:先前开发了一个A项目,A项目中有一套上传图片的接口,现在开发B项目。

    B项目开发中用iview中的upload组件上传图片,用到了A项目中上传接口,爬坑经历

    1.涉及到了跨域
    解决:后台配置一下文件(阮老师的文章内容)允许我访问A项目的接口
    Access-Control-Allow-Origin: http://api.bob.com
    Access-Control-Allow-Credentials: true
    Access-Control-Expose-Headers: FooBar
    Content-Type: text/html; charset=utf-8

    2.在使用upload组件中成功、失败等属性设置成了方法,导致一直无法调取自己的方法
    解决:查看文档改成绑定属性

    3.请求头设置
    在后台接口中要设置指定content-type类型,实际使用组件时候如果上传文件无需设置content-type,组件会自动设置文件类型,并设置边界值。

    4.组件中name和data的理解
    后台规定上传格式是file[]:file(上传文件),type:1(类型1是图片)两个字段
    在查看源码时,看到new FormData时候,调用append方法,格式是formData.append(key, option.data[key])
    先添加data中的数据(我设置的是data="{type: 1}")
    后添加formData.append(option.filename, option.file)此时的optione.filename是name属性(我设置的是name="file[]")
    此时就对应上了后台给的接口字段。

    5.图片上传成功后,还需要在跨域调取A项目中的一个接口,此时又需要cookie的信息。
    我使用的axios需要在设置withCredentials: true获取已经存在的cookie信息

    整个流程梳理下,日后在碰到类似问题,以供参考。

  • 相关阅读:
    awk用法
    cut用法
    优化Linux下的内核TCP参数以提高系统性能
    android开发_LayerlistDrawable(层叠图片)在进度条中的应用
    android开发_文本按钮 与 输入框
    android开发_ViewGroup(组视图)-- 五大布局
    android开发_view和view属性
    android开发_Eclipse新建项目+新建模拟器
    String,StringBuilder,tringBuffer
    zeros()和ones()和eye()
  • 原文地址:https://www.cnblogs.com/victory820/p/8427632.html
Copyright © 2011-2022 走看看