/cross-request

支持Chrome73以上版本的文件上传

Primary LanguageJavaScript

cross-request是一个赋予html页面跨域请求能力的chrome扩展，结合Yapi使用。

本文主要解决YApi不能上传文件的问题

  1. cross-request不支持文件上传
  2. Yapi测试集合不支持文件上传，导致测试用例无法运行

解决cross-request不支持文件上传的问题

chrome 在 73 版本后，限制了 content-script 跨域请求。目前只有一个解决办法，废弃 content-script 跨域请求，使用background.js 执行跨域请求，但这样有个最大的问题是无法支持文件上传。

本插件已经修复了文件上传的问题，你可以直接下载代码，使用Chrome开发者模式加载源码进行安装。

Chrome安装cross-request步骤

  1. 点击Code下载源码

  2. 解压源码后，把源码放置到可信位置，源码文件夹不可删除

  3. Chrome浏览器地址栏中输入chrome://extensions/，进入扩展程序页面

  4. 打开【开发者模式】->【加载已解压的扩展程序】->【选择文件夹】安装插件

  5. 插件安装完成，刷新页面即可使用。

欢迎点击Star支持一下，有问题可以提Issues交流

解决Yapi测试集合不支持文件上传的问题

对于测试集合中包含文件上传的接口时，收到的上传文件总是为空。因为Yapi不能正确支持文件上传。

解决思路: 将文件内容转换成Base64的字符串，这样文件内容就可以以字符串的形式保存在数据库了。

需要对Yapi和cross-request插件进行修改，目前此插件已支持本功能。

使用方式：

  1. 修改Yapi项目源码，./client/containers/Project/Interface/InterfaceList/InterfaceEditForm中isfile的判断条件，增加对base64文件的判断

    if (values.req_body_type === 'form') {
            values.req_body_form.forEach(item => {
              if (item.type === 'file' || (item.value !== undefined && /data.*base64/.test(item.value))) {
                isfile = true;
              }
            });

  2. 编辑接口时Body体选择form类型，文件字段类型选择text，参数值是文件转base64后的值，需要前缀data:text/plain;base64,用来解析文件类型

  3. 安装使用本项目的cross-request插件，插件会先把base64数据转换成文件再请求Server。

这样，接口保存到测试集合中也支持文件上传功能了。

Api

crossRequest( options )

Usage

  1. GET
crossRequest({
    url: 'http://caibaojian.com/ajax-jsonp.html',
    method: 'GET',
    success: function(res, header){

    }
})
  1. POST
    crossRequest({
        url: 'http://127.0.0.1:3000/api',
        method: 'POST',
        headers: {
            'Content-Type': 'application/json'
        },
        data: {
            a: 1,
            b: 2,
            c: {
                t: 1
            }
        },
        success: function (res) {
            console.log(arguments)
        }
    })
  1. FILE upload
    crossRequest({
        url: 'http://127.0.0.1:8081/upload',
        method: 'POST',
        data: {
            name: 'hello',
            id: '19'
        },
        files: {
            file: 'fileId' //File Upload-Input dom id
        },
        success: function (res) {
            alert(res)
        }
    })