更新记录

3.3.2(2021-07-29) 下载此版本

修复app用阿里云上传文件报错

3.3.1(2021-07-09) 下载此版本

修改阿里云视频上传bug

3.3.0(2021-07-09) 下载此版本

新增阿里云文件上传、图片上传

查看更多

平台兼容性

uni-app

Vue2 Vue3 Chrome Safari app-vue app-nvue Android iOS 鸿蒙
- - - -
微信小程序 支付宝小程序 抖音小程序 百度小程序 快手小程序 京东小程序 鸿蒙元服务 QQ小程序 飞书小程序 快应用-华为 快应用-联盟
- - - -

其他

多语言 暗黑模式 宽屏模式
× ×

request请求、配置简单、批量上传图片、视频、超强适应性(支持多域名请求)

  1. 配置简单、源码清晰注释多、适用于一项目多域名请求、第三方请求、七牛云图片上传、本地服务器图片上传等等
  2. 支持请求getpostputdelete
  3. 自动显示请求加载动画(可单个接口关闭)
  4. 全局api数据处理函数,只回调请求正确的数据(可单个接口关闭)
  5. 未登录或登录失效自动拦截并调用登录方法(可单个接口关闭)
  6. 全局自动提示接口抛出的错误信息(可单个接口关闭)
  7. 支持 Promise
  8. 支持拦截器
  9. 支持七牛云文件(图片、视频)批量上传
  10. 支持本地服务器文件(图片、视频)批量上传
  11. 支持上传文件拦截过滤
  12. 支持上传文件进度监听
  13. 支持上传文件单张成功回调
***(***) ***(***备注"***")
*** ***
QQ群号:*** ***:zhou0612wei

点击跳转-插件示例

点击跳转-5年的web前端开源的uni-app快速开发模板-下载看文档

常见问题

1.接口请求成功了,没有返回数据或者数据是走的catch回调

答:requestConfig.js 请求配置文件里面,有一个$http.dataFactory方法,里面写的只是参考示例,此方法需要开发者根据各自的接口返回类型修改

2.官方的方法有数据,本插件方法请求报错跨域问题

答:requestConfig.js 请求配置文件里面,header请求头设置的content-type请求类型需求和后台保持一致

3.登录后用户token怎么设置?

答:requestConfig.js 请求配置文件里面,$http.requestStart请求开始拦截器里面设置

4.怎么判断上传的文件(图片)太大?怎么过滤掉太大的文件(图片)?

答:requestConfig.js 请求配置文件里面,$http.requestStart请求开始拦截器里面设置

5.接口请求成功了,一直提示“网络错误,请检查一下网络”?

答:requestConfig.js 请求配置文件里面,有一个$http.dataFactory方法,里面写的只是参考示例,此方法需要开发者根据各自的接口返回类型修改

本次更新注意事项

  1. 所有的headers都改成了header(和官方统一)
  2. 七牛云的获取token等信息提取到了requestConfig.js文件,参考如下

文件说明

  1. request => core 请求方法的目录
  2. request => core => request.js 请求方法的class文件
  3. request => core => utils.js 请求方法的源码文件
  4. request => upload 上传方法的目录
  5. request => upload => upload.js 上传方法的class文件
  6. request => upload => utils.js 上传方法源码文件
  7. request => upload => qiniuUploader.js 七牛云官方上传文件
  8. request => index.js 输出方法的文件
  9. requestConfig.js 请求配置文件(具体看代码)

在main.js引入并挂在Vue上

import $http from '@/uni_modules/zhouWei-request/js_sdk/requestConfig';
Vue.prototype.$http = $http;

requestConfig.js配置说明(requestConfig.js有配置示例)

import request from "@/uni_modules/zhouWei-request/js_sdk/request";
//可以new多个request来支持多个域名请求
let $http = new request({
    //接口请求地址
    baseUrl: "https://twin-ui.com/", //示例域名,请自行设计
    //服务器本地上传文件地址
    fileUrl: "https://twin-ui.com/", //示例域名,请自行设计
    // 服务器上传图片默认url
    defaultUploadUrl: "api/common/v1/upload_image",
    //设置请求头(如果使用报错跨域问题,可能是content-type请求类型和后台那边设置的不一致)
    header: {
        'Content-Type': 'application/json;charset=UTF-8'
    },
    // 请求超时时间(默认6000)
    timeout: 6000,
    // 默认配置(可不写)
    config: {
        // 是否自动提示错误
        isPrompt: true,
        // 是否显示加载动画
        load: true,
        // 是否使用数据工厂
        isFactory: true,
       // ... 可写更多配置
    }
});

// 添加获取七牛云token的方法
$http.getQnToken = function(callback){
    //该地址需要开发者自行配置(每个后台的接口风格都不一样)
    $http.get("api/common/v1/qn_upload").then(data => {
        /*
         *接口返回参数:
         *visitPrefix:访问文件的域名
         *token:七牛云上传token
         *folderPath:上传的文件夹
         *region: 地区 默认为:SCN
         */
        callback({
            visitPrefix: data.visitPrefix,
            token: data.token,
            folderPath: data.folderPath
        });
    });
}
//当前接口请求数
let requestNum = 0;
//请求开始拦截器
$http.requestStart = function(options) {
    if (options.load) {
        if (requestNum <= 0) {
            //打开加载动画
            uni.showLoading({
                title: '加载中',
                mask: true
            });
        }
        requestNum += 1;
    }
    // 图片上传大小限制
    if (options.method == "FILE" && options.maxSize) {
        // 文件最大字节: options.maxSize 可以在调用方法的时候加入参数
        let maxSize = options.maxSize;
        for (let item of options.files) {
            if (item.size > maxSize) {
                setTimeout(() => {
                    uni.showToast({
                        title: "图片过大,请重新上传",
                        icon: "none"
                    });
                }, 500);
                return false;
            }
        }
    }
    //请求前加入token
    options.header['token'] = "你的项目token";
    return options; // return false 表示请求拦截,不会继续请求
}
//请求结束
$http.requestEnd = function(options) {
    //判断当前接口是否需要加载动画
    if (options.load) {
        requestNum = requestNum - 1;
        if (requestNum <= 0) {
            uni.hideLoading();
        }
    }
}
//所有接口数据处理(可在接口里设置不调用此方法)
//此方法需要开发者根据各自的接口返回类型修改,以下只是模板
$http.dataFactory = async function(res) {
    console.log("接口请求数据", {
        url: res.url,
        resolve: res.response,
        header: res.header,
        data: res.data,
        method: res.method,
    });
    if (res.response.statusCode && res.response.statusCode == 200) {
        let httpData = res.response.data;
        if (typeof (httpData) == "string") {
            httpData = JSON.parse(httpData);
        }
        // 开始----------------------以下是示例-请认真阅读代码-----------------------开始
        //判断数据是否请求成功
        if (httpData.success || httpData.code == 200) {  // 重点------判断接口请求是否成功,成功就返回成功的数据
            // ---重点---返回正确的结果(then接受数据)---重点---
            return Promise.resolve(httpData);
        } else {
            //其他错误提示
            if (res.isPrompt) { // 是否提示
                uni.showToast({
                    title: httpData.info || httpData.msg, // 重点------把接口返回的错误抛出显示
                    icon: "none",
                    duration: 3000
                });
            }
            // ---重点---返回错误的结果(catch接受数据)----重点---
            return Promise.reject({
                statusCode: 0,
                errMsg: "【request】" + (httpData.info || httpData.msg)
            });
        }
        // 结束----------------------以上是示例-请认真阅读代码-----------------------结束
    } else {
        // 返回错误的结果(catch接受数据)
        return Promise.reject({
            statusCode: res.response.statusCode,
            errMsg: "【request】数据工厂验证不通过"
        });
    }
};
// 错误回调(所有错误都在这里)
$http.requestError = function (e) {
    if (e.statusCode === 0) {
        throw e;
    } else {
        uni.showToast({
            title: "网络错误,请检查一下网络",
            icon: "none"
        });
    }
}

通用请求方法

this.$http.request({
    url: 'aid/region',
    method: "GET", // POST、GET、PUT、DELETE、JSONP,具体说明查看官方文档
    data: {pid:0},
    timeout: 30000,  // 默认 30000 说明:超时时间,单位 ms,具体说明查看官方文档
    dataType: "json",  // 默认 json 说明:如果设为 json,会尝试对返回的数据做一次 JSON.parse,具体说明查看官方文档
    responseType: "text",  // 默认 text 说明:设置响应的数据类型。合法值:text、arraybuffer,具体说明查看官方文档
    withCredentials: false,  // 默认 false 说明:跨域请求时是否携带凭证(cookies),具体说明查看官方文档
    isPrompt: true,//(默认 true 说明:本接口抛出的错误是否提示)
    load: true,//(默认 true 说明:本接口是否提示加载动画)
    header: { //默认 无 说明:请求头
        'Content-Type': 'application/json'
    },
    isFactory: true, //(默认 true 说明:本接口是否调用公共的数据处理方法,设置false后isPrompt参数将失去作用)
}).then(function (response) {
    //这里只会在接口是成功状态返回
}).catch(function (error) {
    //这里只会在接口是失败状态返回,不需要去处理错误提示
    console.log(error);
});

get请求 正常写法

this.$http.get('aid/region',{pid:0}).
then(function (response) {
    //这里只会在接口是成功状态返回
}).catch(function (error) {
    //这里只会在接口是失败状态返回,不需要去处理错误提示
    console.log(error);
});

post请求 async写法

async request(){
    let data = await this.$http.post('aid/region',{pid:0});
    console.log(data);
}

其他功能配置项

let data = await this.$http.post(
    'http://www.aaa.com/aid/region', //可以直接放链接(将不启用全局定义域名)
    {
        pid:0
    }, 
    {
        isPrompt: true,//(默认 true 说明:本接口抛出的错误是否提示)
        load: true,//(默认 true 说明:本接口是否提示加载动画)
        header: { //默认 无 说明:请求头
            'Content-Type': 'application/json'
        },
        isFactory: true //(默认 true 说明:本接口是否调用公共的数据处理方法,设置false后isPrompt参数将失去作用)
    }
);

requestConfig.js可以设置服务器上传图片默认url

//可以new多个request来支持多个域名请求
let $http = new request({
    //服务器本地上传文件地址
    fileUrl: base.baseUrl,
    // 服务器上传图片默认url
    defaultUploadUrl: "api/common/v1/upload_image",
});
// 上传可以不用传递url(使用全局的上传图片url)
this.$http.urlImgUpload({
    name:"后台接受文件key名称", //默认 file
    count:"最大选择数",//默认 9
    sizeType:"选择压缩图原图,默认两个都选",//默认 ['original', 'compressed']
    sourceType:"选择相机拍照或相册上传 默认两个都选",//默认 ['album','camera']
    data:"而外参数" //可不填,
});
// 上传可以不用传递url(使用全局的上传图片url)
this.$http.urlVideoUpload({
    sourceType:"选择相机拍照或相册上传 默认两个都选",//默认 ['album','camera']
    compressed:"是否压缩所选的视频源文件,默认值为 true,需要压缩",//默认 false
    maxDuration: "拍摄视频最长拍摄时间,单位秒。最长支持 60 秒", //默认 60
    camera: '前置还是后置摄像头', //'front'、'back',默认'back'
    name:"后台接受文件key名称", //默认 file
    data:"而外参数" //可不填,
});
// 上传可以不用传递url(使用全局的上传图片url)
this.$http.urlFileUpload({
    files: [], // 必填 临时文件路径 格式: [{path: "图片地址"}]
    data:"向服务器传递的参数", //可不填
    name:"后台接受文件key名称", //默认 file
});

本地服务器图片上传(支持多张上传)

this.$http.urlImgUpload('flie/upload',{
    name:"后台接受文件key名称", //默认 file
    count:"最大选择数",//默认 9
    sizeType:"选择压缩图原图,默认两个都选",//默认 ['original', 'compressed']
    sourceType:"选择相机拍照或相册上传 默认两个都选",//默认 ['album','camera']
    data:"而外参数" //可不填,
    isPrompt: true,//(默认 true 说明:本接口抛出的错误是否提示)
    load: true,//(默认 true 说明:本接口是否提示加载动画)
    header: { //默认 无 说明:请求头
        'Content-Type': 'application/json'
    },
    isFactory: true, //(默认 true 说明:本接口是否调用公共的数据处理方法,设置false后isPrompt参数奖失去作用)
    maxSize: 300000, //(默认 无 说明:上传的文件最大字节数限制,默认不限制)
    Complete: res => {
        console.log("选择完成返回:",res);
    },
    onEachUpdate: res => {
        console.log("单张上传成功返回:",res);
    },
    Update: res => {
        console.log("上传进度返回:",res);
    }
}).then(res => {
    console.log("全部上传完返回结果:",res);
});

本地服务器视频上传

this.$http.urlVideoUpload('flie/upload',{
    sourceType:"选择相机拍照或相册上传 默认两个都选",//默认 ['album','camera']
    compressed:"是否压缩所选的视频源文件,默认值为 true,需要压缩",//默认 false
    maxDuration: "拍摄视频最长拍摄时间,单位秒。最长支持 60 秒", //默认 60
    camera: '前置还是后置摄像头', //'front'、'back',默认'back'
    name:"后台接受文件key名称", //默认 file
    data:"而外参数" //可不填,
    isPrompt: true,//(默认 true 说明:本接口抛出的错误是否提示)
    load: true,//(默认 true 说明:本接口是否提示加载动画)
    header: { //默认 无 说明:请求头
        'Content-Type': 'application/json'
    },
    isFactory: true, //(默认 true 说明:本接口是否调用公共的数据处理方法,设置false后isPrompt参数奖失去作用)
    maxSize: 300000, //(默认 无 说明:上传的文件最大字节数限制,默认不限制)
    Update: res => {
        console.log("上传进度返回:",res);
    },
    Complete: res => {
        console.log("选择完成返回:",res);
    },
}).then(res => {
    console.log("全部上传完返回结果:",res);
});

本地服务器文件上传(支持多张上传)

this.$http.urlFileUpload("flie/upload",{
    files: [], // 必填 临时文件路径 格式: [{path: "图片地址"}]
    data:"向服务器传递的参数", //可不填
    name:"后台接受文件key名称", //默认 file
    isPrompt: true,//(默认 true 说明:本接口抛出的错误是否提示)
    load: true,//(默认 true 说明:本接口是否提示加载动画)
    header: { //默认 无 说明:请求头
        'Content-Type': 'application/json'
    },
    isFactory: true, //(默认 true 说明:本接口是否调用公共的数据处理方法,设置false后isPrompt参数奖失去作用)
    maxSize: 300000, //(默认 无 说明:上传的文件最大字节数限制,默认不限制)
    onEachUpdate: res => {
        console.log("单张上传成功返回:",res);
    },
    Update: res => {
        console.log("上传进度返回:",res);
    }
}).then(res => {
    console.log("全部上传完返回结果:",res);
});

七牛云图片上传(支持多张上传)

this.$http.qnImgUpload({
    count:"最大选择数", // 默认 9
    sizeType:"选择压缩图原图,默认两个都选", // 默认 ['original', 'compressed']
    sourceType:"选择相机拍照或相册上传 默认两个都选", // 默认 ['album','camera']
    load: true, //(默认 true 说明:本接口是否提示加载动画)
    maxSize: 300000, //(默认 无 说明:上传的文件最大字节数限制,默认不限制)
    Complete: res => {
        console.log("选择完成返回:",res);
    },
    onEachUpdate: res => {
        console.log("单张上传成功返回:",res);
    },
    Update: res => {
        console.log("上传进度返回:",res);
    }
}).then(res => {
    console.log("全部上传完返回结果:",res);
});

七牛云视频上传

this.$http.qnVideoUpload({
    sourceType:"选择相机拍照或相册上传 默认两个都选",//默认 ['album','camera']
    compressed:"是否压缩所选的视频源文件,默认值为 true,需要压缩",//默认 false
    maxDuration: "拍摄视频最长拍摄时间,单位秒。最长支持 60 秒", //默认 60
    camera: '前置还是后置摄像头', //'front'、'back',默认'back'
    load: true,//(默认 true 说明:本接口是否提示加载动画)
    maxSize: 300000, //(默认 无 说明:上传的文件最大字节数限制,默认不限制)
    Complete: res => {
        console.log("选择完成返回:",res);
    },
    Update: res => {
        console.log("上传进度返回:",res);
    }
}).then(res => {
    console.log("全部上传完返回结果:",res);
});

七牛云文件上传(支持多张上传)

this.$http.qnFileUpload(
{
    files:[], // 必填 临时文件路径 格式: [{path: "图片地址"}]
    load: true, //(默认 true 说明:本接口是否提示加载动画)
    maxSize: 300000, //(默认 无 说明:上传的文件最大字节数限制,默认不限制)
    onEachUpdate: res => {
        console.log("单张上传成功返回:",res);
    },
    Update: res => {
        console.log("上传进度返回:",res);
    }
}).then(res => {
    console.log("全部上传完返回结果:",res);
});

阿里云图片上传(支持多张上传)

this.$http.aliImgUpload({
    count:"最大选择数", // 默认 9
    sizeType:"选择压缩图原图,默认两个都选", // 默认 ['original', 'compressed']
    sourceType:"选择相机拍照或相册上传 默认两个都选", // 默认 ['album','camera']
    load: true, //(默认 true 说明:本接口是否提示加载动画)
    maxSize: 300000, //(默认 无 说明:上传的文件最大字节数限制,默认不限制)
    Complete: res => {
        console.log("选择完成返回:",res);
    },
    onEachUpdate: res => {
        console.log("单张上传成功返回:",res);
    },
    Update: res => {
        console.log("上传进度返回:",res);
    }
}).then(res => {
    console.log("全部上传完返回结果:",res);
});

阿里云视频上传

this.$http.aliVideoUpload({
    sourceType:"选择相机拍照或相册上传 默认两个都选",//默认 ['album','camera']
    compressed:"是否压缩所选的视频源文件,默认值为 true,需要压缩",//默认 false
    maxDuration: "拍摄视频最长拍摄时间,单位秒。最长支持 60 秒", //默认 60
    camera: '前置还是后置摄像头', //'front'、'back',默认'back'
    load: true,//(默认 true 说明:本接口是否提示加载动画)
    maxSize: 300000, //(默认 无 说明:上传的文件最大字节数限制,默认不限制)
    Complete: res => {
        console.log("选择完成返回:",res);
    },
    Update: res => {
        console.log("上传进度返回:",res);
    }
}).then(res => {
    console.log("全部上传完返回结果:",res);
});

阿里云文件上传(支持多张上传)

this.$http.aliFileUpload(
{
    files:[], // 必填 临时文件路径 格式: [{path: "图片地址"}]
    load: true, //(默认 true 说明:本接口是否提示加载动画)
    maxSize: 300000, //(默认 无 说明:上传的文件最大字节数限制,默认不限制)
    onEachUpdate: res => {
        console.log("单张上传成功返回:",res);
    },
    Update: res => {
        console.log("上传进度返回:",res);
    }
}).then(res => {
    console.log("全部上传完返回结果:",res);
});

jsonp 跨域请求(只支持H5)

let data = await this.$http.jsonp('http://www.aaa.com/aid/region',{pid:0}, {
    isFactory: false, //(默认 true 说明:本接口是否调用公共的数据处理方法,设置false后isPrompt参数奖失去作用)
});

隐私、权限声明

1. 本插件需要申请的系统权限列表:

2. 本插件采集的数据、发送的服务器地址、以及数据用途说明:

3. 本插件是否包含广告,如包含需详细说明广告表达方式、展示频率:

许可协议

MIT协议

使用中有什么不明白的地方,就向插件作者提问吧~ 我要提问