elementui el-from 怎样显示图片_vue2.0使用weui.js的uploader组件上传图片(兼容移动端)...

44a3985adb8d3d6ed7c7a2f28d4e0b61.png

本文已同步到专业技术网站 www.sufaith.com, 该网站专注于前后端开发技术与经验分享, 包含Web开发、Nodejs、Python、Linux、IT资讯等板块.

最近在使用 vue2.0开发微信公众号网页 其中涉及到 选择图片, 图片的压缩上传, 预览, 删除等操作。

项目整体UI框架使用的是 vux, 但可惜的是 vux 并没有提供 图片上传组件, 理由见 issue

由于之前写PC端后台系统时, 采用的 Element UI框架 Upload组件 来上传图片, 包括预览删除等功能,但是引用该组件到移动端时, 却由于该组件的input标签属性和事件方法设置问题,不能正常使用. 鉴于此, 需要寻找一种可靠的方案,既能兼容移动端, 又便于直接上手.

以下是本人尝试的两种方案, 最终我选择的是第二种: 引入weui.js, 并自定义上传动作,异步获取七牛token, 然后调用手动上传方法.

一. 使用微信jssdk图像上传接口 微信网页开发文档

整个流程为:

(1) 显示图片

chooseImage 得到选定照片的本地ID列表

getLocalImgData 得到图片的base64数据,可以用img标签显示. (此接口仅在 iOS WKWebview 下提供,用于兼容 iOS WKWebview 不支持 localId 直接显示图片的问题)

(2) 拿到图片 File

uploadImage 上传图片接口, 返回图片的服务器端ID

downloadImage 通过serverId 下载图片到自己的服务器

总结:

优点: 移动端兼容性强, 可指定是原图还是压缩图等参数, 代码简洁, 便于上手

缺点: (1) 只能在移动端使用,无法在PC端使用; (2) 采用流程为: 先上传微信服务器, 然后下载拿到图片, 最后存到自己的服务器, 这种方式开发逻辑冗杂, 上传下载也耗费过多资源; (3)目前多媒体文件下载接口的频率限制为10000次/天, 业务稍微多些,容易受接口频率限制.

二. 使用微信开源的 weui.js

使用流程为:

1. 安装jquery

1d737a4af54d0ecc46ef05733fac85bb.png

2. 在 /build/webpack.base.conf.js 文件中 配置 jquery 别名

22fa6ed01ec674c9ff62e370fa4e86fa.png

3. 下载 weui.js项目,并在本地打包编译

git clone https://github.com/weui/weui.js.git
cd weui.js
npm install
npm run build

4. 将编译后dist目录下的 weui.min.js 复制到 我们的 vue 项目 /static/js/ 目录下

77654aa855da637ec255c9e740535dc9.png

5. 安装 weui, 并在 main.js 中导入weui.min.css

npm install --save weui // 安装weuiimport 'weui/dist/style/weui.min.css' // 在main.js中导入weui.min.css

6. 在我们项目的vue文件中 引入 weui 的UI布局 Uploader

<div class="weui-cells weui-cells_form" id="uploader"><div class="weui-cell"><div class="weui-cell__bd"><div class="weui-uploader"><div class="weui-uploader__hd"><p class="weui-uploader__title">图片上传</p><div class="weui-uploader__info"><span id="uploadCount">0</span>/5</div></div><div class="weui-uploader__bd"><ul class="weui-uploader__files" id="uploaderFiles" @click="handleClickUploadList"></ul><div class="weui-uploader__input-box"><input name="file" id="uploaderInput" class="weui-uploader__input" type="file" accept="image/*" capture="camera" multiple=""/></div></div></div></div></div></div>

7. 在我们的vue文件中 导入 weui.js 和jquery

cefcc4889955df34b8fc791cff1ae75e.png

8.在javascript中定义变量

51469823b4ddf2bb008854d8cea82b9d.png

9. 在 vue文件 的 mounted 函数中调用weui.js的uploader方法

c6775996d6efb79d050691dbf8280df1.png

9f4d45528ef5e5c5738c20ad15803d2d.png

a54fde52743cad72a57ead7fe452d85e.png

10. 定义图片预览与删除的函数

c90953323cbb584d00af7939665b6475.png

最终效果如下:

fc5a99057a588d6104af49b748470120.png

beed195c21ed8760d20d6460253b8dfd.png

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/257634.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

面向对象分析

在需求获取阶段&#xff0c;开发人员关注于理解用户以及他们的使用要求。而在需求分析阶段&#xff0c;开发人员关注于理解系统需要构建的内容&#xff0c;其核心是产生一个准确的、完整的、一致的和可验证的系统模型&#xff0c;称为分析模型。 面对对象的分析模型由三个独立的…

python字典输入学生信息_如何用Python将XML中的所有信息输入字典

我通常使用标准库中的ElementTree模块解析XML。它没有给你一个字典&#xff0c;你得到了一个更有用的DOM结构&#xff0c;它允许你为孩子们遍历每个元素。from xml.etree import ElementTree as ETxml ET.parse("root_element xml.getroot()for child in root_element:.…

HDU4267(2012年长春站)

这道题真的是好题&#xff0c;让我对线段树有了全新的认识&#xff0c;至少让我真正感受到了线段树的神奇。 题意是就是线段树区间更新&#xff0c;单点询问的问题&#xff0c;不过这个题好就好在它的区间更新的点并不连续&#xff01; adding c to each of Ai which satisfies…

ITFriend创业败局(四):菜鸟CEO的自我修养

自创业自封CEO以来&#xff0c;短短3个月&#xff0c;又经历了无数的磨练&#xff0c;快速成长中。创业不同于打工&#xff0c;他要求你必须有全局观和综合能力&#xff0c;技术、市场、商务&#xff0c;啥都得会&#xff0c;还要处理各种各样的问题和矛盾。根据个人经历&#…

51nod 1050 循环数组最大子段和

1050 循环数组最大子段和 N个整数组成的循环序列a[1],a[2],a[3],…,a[n]&#xff0c;求该序列如a[i]a[i1]…a[j]的连续的子段和的最大值&#xff08;循环序列是指n个数围成一个圈&#xff0c;因此需要考虑a[n-1],a[n],a[1],a[2]这样的序列&#xff09;。当所给的整数均为负数时…

mysql设置token有效期_记住我 token保存到数据库

记住我 token保存到数据库这里使用jpamysqlorg.springframework.bootspring-boot-starter-data-jpamysqlmysql-connector-javaspring.datasource.driver-class-namecom.mysql.cj.jdbc.Driverspring.datasource.urljdbc:mysql://127.0.0.1:3306/fly-demo?serverTimezoneUTC&…

Spark- Linux下安装Spark

Spark- Linux下安装Spark 前期部署 1.JDK安装&#xff0c;配置PATH 可以参考之前配置hadoop等配置 2.下载spark-1.6.1-bin-hadoop2.6.tgz,并上传到服务器解压 [rootsrv01 ~]# tar -xvzf spark-1.6.1-hadoop2.6.tgz /usr/spark-1.6.1-hadoop2.6 3.在 /usr 下创建软链接到目标文…

Linux Apache 怎么修改工作模式

Apache默认为prefork模式&#xff0c;主要是考虑到稳定性的原因。  要切换到worker模式&#xff0c;则需要登录到linux上&#xff0c;进行如下操作&#xff1a;  进入/usr/sbin目录  cd /usr/sbin  将当前的prefork模式启动文件改名  mv httpd httpd.prefork  将wo…

python需要背的英语单词怎么写_学Python必须背的42个常见单词,看看你都会吗?...

这42个单词是学习Python必须背会的单词&#xff0c;也是代码中常见的单词。希望你能都背下来&#xff01;&#xff01;1. adult [ˈdʌlt] 成年人2. authentication [ɔːˌθentɪˈkeɪʃn] 身份验证、认证、鉴定3. bit [bɪt] 稍微、小量、小块、一点4. byte [baɪt] …

viewDidLoad、viewWillAppear、viewWillDisappear

- (instancetype)initWithNibName:(NSString *)nibNameOrNil bundle:(NSBundle *)nibBundleOrNil viewDidLoad viewWillAppear viewWillDisapppear《iOS编程》P137关于视图的初始化代码不能写在视图控制器的初始化&#xff08;1&#xff09;&#xff0c;原因如下&#xff1a;为…

asp.net mvc4开启SqlServer 会话共享模式

2019独角兽企业重金招聘Python工程师标准>>> 应用部署结构&#xff08;精简&#xff09;: 站点部署在Nginx后面&#xff0c;以Nginx作为反向代理&#xff0c;不希望在Nginx上设置ip_hash&#xff0c;实现比较真实的负载均衡效果。 这时考虑到需要让site1和site2同时…

SpringMVC中,前台jsp封装参数,绑定参数,传递参数到后台controller的过程详解

前台到后台的流程&#xff1a;前台jsp->后台:controller控制器层->service业务层->DAO数据访问层->数据库model模型层。 从上面流程可知&#xff0c;前台jsp的数据&#xff0c;想要参与到后台的业务逻辑运算&#xff0c;关键是要先把前台jsp的数据传递到后台的cont…

包含min函数的栈 python_面试题_设计包含 min函数的栈

设计包含 min函数的栈()定义栈的数据结构&#xff0c;要求添加一个 minminmin函数&#xff0c;能够得到栈的最小元素。要求函数 min、push以及 pop 的时间复杂度都是 O(1)。#include using namespace std;/*by hk 2015-7-1*/#define MAX ((~(unsigned int )0)-1)/2class stack{…

【转】(五)unity4.6Ugui中文教程文档-------概要-UGUI Interaction Components

原创至上&#xff0c;移步请戳&#xff1a;&#xff08;五&#xff09;unity4.6Ugui中文教程文档-------概要-UGUI Interaction Components 4、Interaction Components 本节涵盖了处理交互&#xff0c;例如鼠标或触摸事件和使用键盘或控制器交互的 UI系统中的组件。 4.1 Select…

j2ee 简单网站搭建:(十)jquery ztree 插件使用入门

为什么80%的码农都做不了架构师&#xff1f;>>> 《j2ee 简单网站搭建&#xff1a;&#xff08;一&#xff09; windows 操作系统下使用 eclipse 建立 maven web 项目》《j2ee 简单网站搭建&#xff1a;&#xff08;二&#xff09;添加和配置 spring spring-mvc 的…

实习报告

实习时间&#xff1a;2016/2/18-2016/2/24 实习地点&#xff1a;陕西省米脂县公安局网络警察大队     实习报告&#xff1a; 如今的社会&#xff0c;网络高度发展&#xff0c;一些人随着时代的潮流利用网络发家致富&#xff0c;而有些人利用网络监管的一些漏洞&#xff0c;…

java utf 8 转unicode_java 在Unicode和UTF-8之间转换

/*** utf-8 转换成 unicode* author fanhui* 2007-3-15* param inStr* return*/public static String utf8ToUnicode(String inStr) {char[] myBuffer inStr.toCharArray();StringBuffer sb new StringBuffer();for (int i 0; i < inStr.length(); i) {UnicodeBlock ub …

Android成长日记-使用GridView显示多行数据

本节将实现以下效果 Ps&#xff1a;看起来很不错的样子吧&#xff0c;而且很像九宫格/se ----------------------------------------------------------------------- 下面进入正题[s1] &#xff1a; Step 1&#xff1a;新建Layout&#xff0c;里面创建GridView <GridView a…

夺命雷公狗---微信开发39----微信语言识别接口1

语音识别接口的基本介绍 注意&#xff1a; 由于客户端缓存&#xff0c;开发者开启或者关闭语音识别功能&#xff0c;对新关注者立即生效&#xff0c;对已关注用户需要24小时生效&#xff0c;开发者可以从新关注帐号进行测试。 我们可以在测试号下方的体验接口权限表里面找到“接…

Codeforces 803E--Roma and Poker (DP)

原题链接&#xff1a;http://codeforces.com/problemset/problem/803/E 题意&#xff1a;给一个n长度的字符串&#xff0c;其中?可以替换成D、W、L中的任意一种&#xff0c;D等价于0, W等价于1、L等价于-1。输出所有?被替换掉后&#xff0c;W和L的数目之差为k&#xff0c;且任…