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

本文已同步到专业技术网站 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

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

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/ 目录下

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

8.在javascript中定义变量

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

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

最终效果如下:

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

ElementUI使用表格如何显示图片？
<el-table:data="tableData"style="width: 100%" ><el-table-columnprop=&qu ...
react前端显示图片_在 React 中使用 SVG 图标组件
SVG 很酷,它们能放大放小. 那么 SVG 的优点是什么? SVG 或可缩放矢量图形是基于 XML 的格式图像格式,可以在保持图像质量的同时缩放到任何大小.因此,当你需要根据需要调整大小的图像时,S ...
OpenCV读取显示图片报错size.width＞0
OpenCV读取图片时 error: (-215:Assertion failed) size.width>0 && size.height>0 in function ' ...
opengl生成图片php,（转）使用OpenGL显示图像（七）Android OpenGLES2.0——纹理贴图之显示图片...
转:http://blog.csdn.net/junzia/article/details/52842816 前面几篇博客,我们将了Android中利用OpenGL ES 2.0绘制各种形体,并在上一 ...
利用51单片机+0.96寸iic接口oled显示图片或动图
利用51单片机+0.96寸iic接口oled显示图片或动图前言:之前讲过如何使用oled显示数字以及字符,但并未讲述如何显示BMP格式的图片, 这篇将在之前的基础上加以封装一些函数用来显示图片硬件 ...
0.96寸OLED显示图片
今天来讲解一下STM32驱动OLED显示图片,本次教程分为两部分: 1.BMP图片制作 2.程序讲解与调用 1.BMP图片制作(取模) BMP图片取模讲解两种方式:自己画图.普通图片制作. 1)自己画 ...
Fullcalendar日历使用，包括视图选择、事件插入、编辑事件、事件状态更改、事件添加和删除、事件拖动调整，自定义头部，加入el-popover显示图片、图片预览、添加附件链接等，支持手机显示。
Fullcalendar这个插件挺好,就是很多方法感觉官方文档也没怎么说,导致上手难度大,而且有些默认事件真的不太友好...废话不多说,先上效果图! 1.效果GIF 1.1 基本按钮功能 1.2 事 ...
Element-ui配合Vue实现走马灯图片自适应效果
elementUI配合Vue实现走马灯图片自适应效果(等比缩放,使得图片缩小不挤压,放大不拉伸变形) 解决方法的原理:监听屏幕视口大小如果'resize',发生改变了,就获取图片的高度height,然 ...
在DataGrid中显示图片
兼谈 DadaGrid 模板列的创建 DadaGrid 是 ASP.NET 编程中一个很重要的控件,其优良的可定制功能为提高它的表现力提供了极大的方便.除了与数据源直接绑定以外,我们还可以通过列绑定模 ...

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

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

最新文章

热门文章