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信息

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

  • 相关阅读:
    MFC下拉框使用方法
    C++学习之路,漫长而遥远
    [转载]浅析STL allocator
    [转载]《STL源码剖析》阅读笔记之 迭代器及traits编程技法
    回溯算法之n皇后问题
    算法练习之一
    Windows配置JDK and TOMCAT
    搭建openstack allinone版本
    在ms08_067_netapi中添加2003的Chinese版本
    msfvenom各平台木马生成
  • 原文地址:https://www.cnblogs.com/victory820/p/8427632.html
Copyright © 2011-2022 走看看