首页 建站教程 前端学院

基于uni-app实现图片上传JS插件

使用前先new 一下

所有方法均返回 promise 对象 可使用then() 写后续业务 或 使用 async await

服务端返回示例

{
    "code":0,
    "msg":"上传成功",
    "data":"http://www.test.com/uploads/20190227/f2824d2d4dc38f30699f816226b4a578.jpg"
}

直接上源码

/*
    2019-02-27
    lane
    封装 uni-app 图片上传功能
    使用前先new 一下
    所有方法均返回 promise 对象 可使用then() 写后续业务 或 使用 async await
    服务端返回示例
    {
        "code":0,
        "msg":"上传成功",
        "data":"http://www.test.com/uploads/20190227/f2824d2d4dc38f30699f816226b4a578.jpg"
    }
    choose  选择图片
        参数 num 为要选择的图片数量
    upload_one 上传一张图片
        参数 path  选择成功后返回的 缓存文件图片路径
    upload  上传多张图片
        参数 path_arr 选择图片成功后 返回的图片路径数组
    choose_and_upload  选择图片并上传
        参数 num 为要选择的图片数量
*/
// 引入配置信息或者自己创建个 config 对象
import config from "../config.js";let config = {
    // 上传图片的API
    upload_img_url:'http://uni_upload.gek6.com/index.php/index/upload'
}
class Uploader {
    constructor() {
    }
    choose(num) {       return new Promise((resolve, reject) => {
            uni.chooseImage({
                count: num,
                success(res) {
                    // console.log(res);
                    // 缓存文件路径
                    resolve(res.tempFilePaths)
                },
                fail(err) {
                    console.log(err)
                    reject(err)
                }
            })
        }) 
    }
    upload_one(path) {      return new Promise((resolve, reject) => {
            uni.showLoading({
                title:'上传中'
            })
            uni.uploadFile({
                url: config.upload_img_url, //仅为示例,非真实的接口地址
                filePath: path,
                name: 'file',
                success: (uploadFileRes) => {
                    if("string"===typeof uploadFileRes.data){
                        resolve(JSON.parse(uploadFileRes.data).data)
                    }else{
                        resolve( uploadFileRes.data.data )
                    }
                },
                complete() {
                    uni.hideLoading()
                }
            });
        })
    }
    upload(path_arr) {
        let num = path_arr.length;
        return new Promise(async (resolve, reject) => {
            let img_urls = []
            for (let i = 0; i < num; i++) {
                let img_url = await this.upload_one(path_arr[i]);
                console.log(img_url)
                img_urls.push(img_url)
            };
            console.log("全部上传成功")
            resolve(img_urls)
        }) 
    }
    choose_and_upload(num) {
        return new Promise(async (resolve, reject) => {
            let path_arr = await this.choose(num);
            let img_urls = await this.upload(path_arr);
            resolve(img_urls);
        }) 
    }
}export default Uploader;

choose 选择图片

参数 num 为要选择的图片数量
返回 图片缓存路径 数组

upload_one 上传一张图片

参数 path  选择成功后返回 远程图片路径

upload 上传多张图片

参数 path_arr 选择图片成功后 返回远程图片路径数组

choose_and_upload 选择图片并上传

参数 num 为要选择的图片数量 返回 图片缓存路径 数组



评论(0)条

提示:请勿发布广告垃圾评论,否则封号处理!!

    猜你喜欢
    帝国CMS内核仿中国历史网模板/帝国CMS行业资讯新闻模板/带MIP手机模板同步插件

    帝国CMS内核仿中国历史网模板/帝国CMS行业资讯新闻模板/带MIP手机模板同步插件

     2020-11-10 712

    帝国CMS内核仿中国历史网模板,帝国CMS行业咨询新闻模板,带MIP手机模板同步插件。古风风格,适合历史史料资讯行业网站使用。该模板PC同步生成手机版,MIP手机端速度比普通的WAP 快上好几倍,遇到大的图片集基本上都是秒开,更利于搜索引擎

    云海解析计费系统v4.3完美破解开源版/赠轮询插件

    云海解析计费系统v4.3完美破解开源版/赠轮询插件

     2022-02-09 523

    这款源码为云海计费解析系统全网最新版本系统,所有源码均本地化,无任何加密。云海解析计费系统V4.3 是一款 VIP 视频计费解析系统,源码只需要在后台设置 json 视频解析接口,设置好以后即可完成视频解析功能,本程序功能强大,v4.3 最

    最新Justnews主题源码6.0.1开心版+社交问答插件2.3.1+附教程

    最新Justnews主题源码6.0.1开心版+社交问答插件2.3.1+附教程

     2022-06-28 487

    最新Justnews主题源码6.0.1开心版+社交问答插件2.3.1,附教程。JustNews是一款专为博客、自媒体、资讯类的网站设计开发的WordPress主题,JustNews主题支持自主研发的前端用户中心,不仅支持注册、登录、账户设置

    某资源社网站同款xiuno模板/知乎蓝魔改版源码/附多个插件

    某资源社网站同款xiuno模板/知乎蓝魔改版源码/附多个插件

     2023-03-05 1447

    某资源社网站用的是xiuno知乎蓝模板的魔改版,模板比较简介,适合做各种论坛,而且非常美观简洁!文件里面有两个一个是xiuno程序一个是模板插件,模板是原版,无毒!!无后门。搭建教程:环境要求 PHP7.1+MySQL5.6设置伪静态代码在

    Uni-APP微商淘宝客小程序源码

    Uni-APP微商淘宝客小程序源码

     2023-03-31 348

    Uni-APP微商淘宝客小程序源码,这款小程序源码非常适合做微商淘宝客,uniapp框架开发的,主要功能就是分享推荐商品的说明介绍和照片,最后给出淘宝客的购买链接,别人通过你的链接购买就有分成。功能特点介绍1、首页进行相册展示,采用分页2、

    狂雨小说系统带全部插件/真正可以运营的小说站点系统源码

    狂雨小说系统带全部插件/真正可以运营的小说站点系统源码

     2023-03-17 1122

    狂雨小说系统带全部插件,真正可以运营的小说站点系统源码!!狂雨CMS插件大全,听书插件带教程、七牛云存储、百度自动推送、2套收费白色模板+手机+电脑端、单本采集插件、3个采集规则、源码。