手动写一个上传图片的组件,不适用插件,包括限制图片大小,格式
1.html<ul class="uploadUl"> // 第一li用于回显图片,上传接口图片成功后通过canvas进行绘制回显图片。 第二个li 用于选择文件上传<li style="display: inline-block" v-for="(src,index) in files"><img @click="ImageToCanvas(src)" class='preview' :src="src"><img class="close" @click="close(index,0)" src="../../../../static/img/closea.png"> // 关闭图层</li><li style="display: inline-block" class="roomDiv" @click="chooseImg(0)" v-if="this.files.length<1"><input type='file' name="doc" ref="choose" accept="image/*" @change='setImagePreview($event,0)' hidden/> //hidden,隐藏原始的丑陋的input type='file'<img class="roomIMG" src="../../../../static/img/roomPaizhao.png"> // 自行配置背景图片</li></ul>
ImageToCanvas(image) {// 图片绘制事件,此方法可共用 console.log(image)let canvas = document.createElement("canvas");canvas.width = image.width;canvas.height = image.height;canvas.getContext("2d").drawImage(image, 0, 0);//0, 0参数画布上的坐标点,图片将会拷贝到这个地方return canvas; },
chooseImg(index) {// 上传图片的点击事件,可传参 console.log(index) if(index === 0){ this.$refs.choose.click(); }else if(index === 1){ this.$refs.choose1.click(); }},
// 封装一个方法upIMGAjax
upIMGAjax(fileList,imgIndex){ // 上传图片的路径和id console.log(fileList) const that = this ; let formData = new FormData(); formData.append('file', fileList) let use = sessionStorage.getItem('userName') ; formData.append('uploadUserId', use) this.uploadFileRequest('',formData).then(res =>{ if(res.data.code === 200){ if(imgIndex === 0){ that.roomImgId = res.data.data.id ; that.roomImgUrl = res.data.data.path ; sessionStorage.setItem("roomImgId", res.data.data.id); console.log(that.roomImgId,'roomId') } else if(imgIndex === 1){ that.IDimgId = res.data.data.id ; that.IDimgUrl = res.data.data.path ; } }else{ that.$Toast(res.data.message); } }).catch(res => { // console.log(res) })},
// 图片绘制 (关键函数)
setImagePreview(event,index) { // 图片的绘制 const that = this ; if(index === 0){ this.file.push(event.target.files[0]) // e.target.files[0] 目标文件,固定files不能变名字。 this.files.push(window.URL.createObjectURL(event.target.files[0])) let filess = event.target.files || event.dataTransfer.files if (this.files.length === 0) return; this.createImage(filess, event); this.upIMGAjax(event.target.files[0],0) }else if(index === 1){ this.file1.push(event.target.files[0]) this.files1.push(window.URL.createObjectURL(event.target.files[0])) let filess = event.target.files || event.dataTransfer.files if (this.files1.length === 0) return; this.createImage(filess, event) this.upIMGAjax(event.target.files[0],1) }}, // 上传之前的图片的压缩插件lrz
createImage(file, event) { // 图片的压缩 let _this = this this.lrz(file[0], { width: 100, quality: .5 }).then(function (rst) { _this.file.push(rst.base64) return rst; }).always(function () { event.target.value = null; })},
// 关闭图层
close(val,index) { // 上传图片的关闭事件 if(index === 0){ this.files.splice(val, 1); }else if(index === 1){ this.files1.splice(val, 1); }},
展示效果:
转载于:https://www.cnblogs.com/panax/p/10960474.html
手动写一个上传图片的组件,不适用插件,包括限制图片大小,格式相关推荐
- animation基础练习源码_用vue简单写一个音乐播放组件「附源码」
作者:vipbic 转发链接:https://segmentfault.com/a/1190000022980992 前言 上次小编也分享一个关于Vue 开发过音乐播放对项目: 基于 electron ...
- 原来热加载如此简单,手动写一个 Java 热加载吧
1. 什么是热加载 热加载是指可以在不重启服务的情况下让更改的代码生效,热加载可以显著的提升开发以及调试的效率,它是基于 Java 的类加载器实现的,但是由于热加载的不安全性,一般不会用于正式的生产环 ...
- 如何手动写一个命令行工具?
文章目录 前言 一.一个最简单的命令行工具 二.命令行解析工具 1.commander (1)option (2)version (3)command (4)argument 2.co-prompt ...
- 使用chatgpt写一个划词翻译的浏览器插件
最近在网上流行的chatgpt,实在是太火了,好多人在使用,而且它的用处实在是太丰富了,能帮助我们解决很多问题,就比如说:编程,生成图片,翻译等.太丰富了.我看网上很多人都在说,它可以帮助人开发软件, ...
- 使用vue写一个bilibili小组件
文章目录 前言 一.效果展示 二.源代码 使用方法 1.设置代理 2.新建vue组件 3.设置自己的bilibili mid 总结 前言 在别人的博客中看见了一个展示自己bilibili账号的组件,看 ...
- 【华为云技术分享】一行代码就能写一个日志打印组件,你信吗?为你揭晓LiteOS中日志打印组件的核心
1. 做实验引发的思考 在学习LiteOS日志打印组件使用的时候,我记录了一篇博客:atiny_log | LiteOS 物联网操作系统中的日志打印组件使用分享,关于实验的具体内容,请阅读这篇博客. ...
- Vue写一个答题模板组件
组件要求:传入问题id.类型.题目.选项(可不定个数选项) 组件根据传入的数据自动组装成问题,每页展示一个,可选择上一个.下一个.重置或者提交 地址:https://github.com/zhangz ...
- 当当网电子书能打印吗_一行代码就能写一个日志打印组件,你信吗?为你揭晓RTOS中日志打印组件的核心
1. 做实验引发的思考 在学习LiteOS日志打印组件使用的时候,我记录了一篇博客:atiny_log | LiteOS 物联网操作系统中的日志打印组件使用分享,关于实验的具体内容,请阅读这篇博客(点 ...
- vue项目里手动写一个走马灯效果
我们知道elementUI里有个走马灯的组件,如下图,每隔指定的时间,就可以实现轮播切换 现在项目需求是顶部的派出所和下面的警务人员名单都是后端接口返回的数据,然后派出所是个可以单击选中且有走马灯效果 ...
- python写一个服务_写一个Python的windows服务
1. 安装pywin32和pyinstaller pip install pywin32 pip install pyinstaller 2.写一个服务Demo # -*- coding: utf-8 ...
最新文章
- 一文读懂你该了解的5G知识:现在别买5G手机
- iOS开发网络篇—多线程断点下载
- Alluxio及其典型应用场景
- 物体检测轻松上手:精度与速度实现兼得
- java数组的实现_Java数组HashCode实现
- openpyxl 列 插入_python3对excel读写openpyxl
- 罗永浩称赚钱没有太大难度,是凡尔赛还是感慨?
- 最快的组合数算法之Python实现
- SVN错误:Attempted to lock an already-locked dir及不能提交.so文件
- vue3 main.js引入 axios_Vue3.0新特性探索
- 关于sizeof(struct student)的问题
- php做一个每天的考勤表,教你做一个酷毙的考勤表!|
- python实现下载网络视频资源
- Python xlwt 操作 excel 表格基础(二):冻结窗口、设置加密保护、打印设置等
- jetson tx2平台调试EC20 4G模块
- HTTP请求方法、GET和POST的区别
- hive3.x异常- return code 1 from org.apache.hadoop.hive.ql.exec.mr.MapredLocalTask
- shell脚本模拟键盘输入完成程序交互(定时重启docker部署的项目样例)
- 启动rabbitmq,遇到发生系统错误2和发生系统错误5的解决方法
- 2012年6月婚假四川游记
热门文章
- shell实战训练营Day2
- Node.js 使用http客户端向网站请求数据并保存
- PHP实现菱形与杨辉三角形【php趣味案例】
- 3第一周课后练习#183;阅读计划(3)-使用函数来访问私有数据成员
- (十七)用JAVA编写MP3解码器——解码Layer1
- find的详细用法及其例子
- laravel 5.4 引入自定义类
- Keil/MDK(0):使用过程中的一些设置
- JS中实现Trim(),TrimStart(),TrimEnd() 的方法
- Linux 中进程的管理