vue移动端上传文件插件_轻量级Vue图片上传插件——Vue-core-image-Upload
介绍
vue-core-image-upload 是一款轻量级的 Vue.js 上传插件,它可以支持的图片的上传,裁剪,压缩。它同样也支持在移动端的图片处理,它定义了诸多上传周期,你可以自由的进行流程控制。
Githubhttps://github.com/Vanthink-UED/vue-core-image-upload
安装npm install vue-core-image-upload --save
安装完成后,编辑源码
class="btn btn-primary"
:crop="false"
@imageuploaded="imageuploaded"
:data="data"
:max-file-size="5242880"
url="***" >
import VueCoreImageUpload from 'core/vue-core-image-upload.vue'
export default {
components: {
'vue-core-image-upload': VueCoreImageUpload,
},
data() {
return {
src: '***.png',
}
},
methods: {
imageuploaded(res) {
if (res.errcode == 0) {
this.src = res.data.src;
}
}
}
};
基本属性
Vue-core-image-upload 提供了很多可配置的选项,从而希望尽可能的满足开发者的需求。
:class="['btn', 'btn-primary']"
:crop="false"
@imageuploaded="imageuploaded"
:data="data"
:max-file-size="5242880"
url="***" >
响应事件
我们在上传的不同阶段指定了不同的派发事件,你可以绑定每个事件的响应方法,实现对于流程的控制。imageuploaded
当图片上传完,会调用该事件绑定的函数,并且用户可以获取到服务端返回的数据。imagechanged
当input框改变选择图片时候触发,会返回input的获取的图片数据imageuploading
当图片上传过程中触发,你可以自定义你需要处理的内容比如显示加载动画等。errorhandle
当图片上传发生错误的时候触发,会返回错误状态信息
:class="['btn', 'btn-primary']"
:crop="false"
@imagechanged="imagechanged"
@imageuploading="imageuploading"
@imageuploaded="imageuploaded"
:max-file-size="5242880"
url="***.php" >
methods: {
imagechanged() {
this.step += 1;
},
imageuploading() {
this.step += 1;
},
imageuploaded(res) {
this.step += 1;
this.src = res.data.src;
}
}
自定义组件样式
你可以设置组件的class 以及自己编写子组件的形式来控制组件的显示的样子。
:crop="false"
@imageuploaded="imageuploaded"
:data="data"
:max-file-size="5242880"
url="***.php" >
裁剪图片
你可以通过设置 crop,来实现图片的裁剪。你可以指定图片裁剪的宽高,以及它的最大宽度和高度这些参数。
设置 cropRatio来限制裁剪图片的形状,需要字符串的格式(1:1 或者2:3这种比例形式),当然你可以设置为 auto 则不限制裁剪框的形状。
设置图片裁剪后,批量上传将不再生效。
图片裁剪完有两种选择,选择本地裁剪local或者服务端裁剪 server。本地裁剪
你可以将 crop 设置为 local 来实现本地裁剪。本地裁剪完成后发送给服务端接口的图片便是已经裁剪好的图片。
服务端裁剪
服务端裁剪是指将原图片和裁剪的参数一起发给后端,方便服务端保存原图,以及对原图的其他操作,而服务端能够接收到post的参数如下:
crop-ratio="1:1"
:class="['btn', 'btn-primary']"
crop="server"
url="....php"
extensions="png,gif,jpeg,jpg"
text="Crop Image"
@imageuploaded="crpoServerImageUploaded">
调整图片
你可以设置 resize 来进行图片的缩放。
设置resize="local" 意味着图片的缩放将在本地进行。发给服务端的将会是大小调整完毕的后的图片。
crop-ratio="1:1"
class="btn btn-primary"
resize="local"
url="**.php"
extensions="png,gif,jpeg,jpg"
text="Resize Image"
@imageuploaded="resizeLocalImageUploaded">
上传多个文件multiple
你可以使用 multiple 属性设置为true来实现多文件的上传。需要注意的是,你设置了该属性后,服务端收到文件上传的字段数据会是一个数组。multiple-size
你可以使用multiple-size来限制图片的数量,你可以限制上传文件的数量。
class="btn btn-primary"
:crop="false"
@imageuploaded="imageUploded"
:max-file-size="5242880"
:multiple="true"
:multiple-size="4"
url="***.php" >
压缩图片
设置compress的数值,你可以在上传之前进行图片的本地压缩。其中 compress 为 0 表示不压缩,数据越大,图片的质量越差,且最大值不能大于100。
:class="['btn', 'btn-primary']"
@imageuploaded="imageUploded"
:max-file-size="5242880"
compress="50" // 设置压缩比例
url="***/upload" >
向服务端发送数据
你可以设置data 来将一些附带的数据发送给服务端。 当然你也可以将一些数据包含在 header 中传递过去,你只需要绑定到 header即可。
vue移动端上传文件插件_轻量级Vue图片上传插件——Vue-core-image-Upload相关推荐
- java 上传文件并读取_Java实现图片上传到服务器并把上传的图片读取出来
在很多的网站都可以实现上传头像,可以选择自己喜欢的图片做头像,从本地上传,下次登录时可以直接显示出已经上传的头像,那么这个是如何实现的呢? 下面说一下我的实现过程(只是个人实现思路,实际网站怎么实现的 ...
- ssm上传文件获取路径_SSM实现图片上传下载功能
0. 基本步骤框架搭建 实现带图片上传的注册功能 实现下载功能 1. 框架搭建 Step1 创建开发项目 创建基础MVC包结构:controller.service.mapper.pojo Step2 ...
- mobaxterm 传文件夹_如何使用MobaXterm上传文件到远程Linux系统-MobaXterm使用教程
软件功能: MobaXterm最新版是款针对网络工具所打造的远程终端控制工具.MobaXterm官方版支持Windows增强版终端,带有X11服务器,选项卡式SSH客户端,网络工具等.MobaXter ...
- vue method ajax上传文件,前端上传文件追根溯源_和_antd_vue上传文件实例
背景 平,过现前个能文使近记接的端问对字用近记接时工作中经常会遇到需要上传文件的情况,如果你用ant design 或者element ,它们都提供了上传的组件. 我们分别来看一下element 和 ...
- chrome浏览器上传文件延迟_谷歌Chrome上传文件未响应的解决办法
[摘要] 这几天笔者在使用Chrome的时候遇到一个令人蛋疼的问题:使用Chrome上传文件会未响应,而这个锅竟然是搜狗输入法要背的. 谷歌Chrome可以说是目前最好用的浏览器之一了,而且Chrom ...
- vue+elementui 同时有上传文件和批量上传文件功能,上传文件或批量上传文件后必须刷新才能再次上传文件
报错描述: 使用element-ui的上传文件组件写一个批量上传和上传文件,但是发现每次上传文件后或者批量上传文件后,不能再次上传文件或者批量上传文件.只有进入页面第一次点击上传文件或者批量上传文件才 ...
- Vue中使用vue-quil-editor富文本编辑器+el-upload实现带图片上传到SpringBoot后台接口
场景 系统中经常会用到富文本编辑器,比如新增通知和公告功能,并且需要添加上传图片. vue-quill-editor官网: https://www.npmjs.com/package/vue-quil ...
- php 上传图片 预览 多张,uploadify插件实现多个图片上传并预览
使用uploadify插件可方便实现图片上传功能.兼容ie6.ie7. 上传成功之后使用插件的回调函数读取json数据,根据url实现图片预览. 效果图: 点击浏览文件上传图片,图片依次在右侧显示预览 ...
- 文件上传、下载、导出(图片上传、下载)
一.文件上传 1.常规文件上传 input 标签 type="file", 点击接收上传的文件 <label for="file_url">< ...
- Vue项目实战之人力资源平台系统(十)图片上传和打印员工信息
前言 目录 前言 一.配置腾讯云空间存储图片 1.1 配置步骤 二.图片上传流程解析 三.实现文件上传组件 3.1 安装依赖 3.2 上传图片组件的基本布局 3.3 全局注册组件 3.4 点击图片进行 ...
最新文章
- gprs 神奇宝典java,2016联通笔试知识点大全
- 常看 Shell: 文本文件操作
- 9.STM32中对SysTick_Init()函数(sysTick_Config()、TimingDelay_Decrement()自定义)和Delay_us()的理解
- php四则运算出题器_php实现简单四则运算器
- python网址太长_python中url太长怎么解决
- mysql如何时间减10分钟_mysql – 从时间值中减去分钟数
- java代码=--数组复制
- 1037. 在霍格沃茨找零钱(20)-PAT乙级真题
- java nio ppt_Java开发基础知识讲解.ppt
- UDF函数 解码url
- window location href 手机端无法跳转_JavaScriptBOM__History_location(二十)
- 7923 consoleconsumer 怎么关闭_英雄联盟手游怎么设置最好 LOL手游最佳设置攻略_英雄联盟手游...
- yb3防爆电机型号含义_温州出租大型发电机定做-智慧动力机械设备租赁
- 宝塔面板 python管理器2.0安装Mrdoc
- 自相关函数与互相关函数
- java word 添加图片_java – 在word文档中插入图片
- [BZOJ2959]长跑——新技能:LCT+缩圈
- java u0000_Java-从字符串中删除\ u0000
- ROS入门(十)——两只小乌龟(乌龟跟随C++实现)
- PHP使用正则表达式 preg_replace 替换英文单词