• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • dedecms
  • ecshop
  • z-blog
  • UcHome
  • UCenter
  • drupal
  • WordPress
  • 帝国cms
  • phpcms
  • 动易cms
  • phpwind
  • discuz
  • 科汛cms
  • 风讯cms
  • 建站教程
  • 运营技巧
您的位置:首页 > CMS教程 >建站教程 > 基于uni-app实现图片上传JS插件

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

作者:站长图库 字体:[增加 减小] 来源:互联网

站长图库向大家介绍了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); &
  


 
分享到:QQ空间新浪微博腾讯微博微信百度贴吧QQ好友复制网址打印

您可能想查找下面的文章:

  • 如何快速搭建uni-app项目?两种搭建方法分享
  • 移动uni-app项目怎么实现发送位置的地图交互
  • uni-app中怎么开发一个全局弹层组件(代码示例)
  • 遇到的uni-app的坑(uni-easyinput清空值,datetimerange置空)
  • uni-app介绍全局样式引入和底部导航栏开发
  • 解决uni-app入坑集合的一种方案
  • 聊聊怎么将小程序项目转为uni-app项目
  • 浅析uni-app中怎么提交form表单?(代码解析)
  • 一起分析uni-app怎么实现上传图片
  • 看看使用uni-app如何编写一个五子棋小游戏

相关文章

  • 实例详解Ajax+php数据交互并且局部刷新页面
  • Dedecms 发布文章时 Tag标签中文逗号自动变成英文
  • CSS如何实现渐变提示框(tooltips)
  • 10个超级有用的PHP代码片段(建议收藏)
  • 织梦CMS系统正式收费:5800元,开源时代逐步没落!织梦CMS,将告别免费
  • 微信小程序中echarts的用法和可能遇见的坑,快来收藏避雷!!
  • Photoshop绘制逼真的毛线衣图标教程
  • Photoshop绘制质感的金色水滴视频教程
  • PS制作质感的立体字
  • 详解vue中watch如何使用?watch用法介绍

文章分类

  • dedecms
  • ecshop
  • z-blog
  • UcHome
  • UCenter
  • drupal
  • WordPress
  • 帝国cms
  • phpcms
  • 动易cms
  • phpwind
  • discuz
  • 科汛cms
  • 风讯cms
  • 建站教程
  • 运营技巧

最近更新的内容

    • 给dedecms的分类信息模型添加置顶功能
    • 浅谈php正则替换函数preg_replace的用法
    • 解决WAMP打开phpMyAdmin却出现错误的问题
    • Discuz! X3.4特殊字符乱码解决方案!
    • 使用Vue、Three.js实现全景图
    • CDR制作漂亮圣诞海报
    • 防止SyntaxHighlighter.js的代码高亮时闪一下的解决方法
    • 服务器宝塔面板Redis无法随系统启动怎么办呢
    • Photoshop打造超现实燃烧效果
    • Photoshop巧用素材合成绚丽美女海报教程

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有