侯体宗的博客
  • 首页
  • Hyperf版
  • beego仿版
  • 人生(杂谈)
  • 技术
  • 关于我
  • 更多分类
    • 文件下载
    • 文字修仙
    • 中国象棋ai
    • 群聊
    • 九宫格抽奖
    • 拼图
    • 消消乐
    • 相册

vue实现图片上传预览功能

微信(小程序)  /  管理员 发布于 5年前   959

本文实例为大家分享了vue实现图片上传预览的具体代码,供大家参考,具体内容如下

效果图

html结构

  • 点击上传

css样式

.gallery-window-map{ display: -webkit-box; display: -ms-flexbox; display: flex; margin-top: 10px;}.house-pic-item { position: relative; display: inline-block; margin-right: 13px; width: 120px; height: 90px; background-color: #e3e3e3;}.pic-box { width: 100%; text-align: center;}.icon-zengjia { position: relative; top: 12px; font-size: 26px; color: #b2b2b2;}.btn-tit { height: 38px; line-height: 38px; font-size: 12px; color: #999;}.mask { display: none; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: rgba(34, 34, 34, 0.6);}.font-btn { display: inline-block; height: 40px; width: 50%; padding: 0 20px; -webkit-box-sizing: border-box; box-sizing: border-box;}.font-btn:last-child { position: relative;}.icon-fangda,.icon-shanchu { font-size: 22px; color: #fff;}.line { content: ''; display: inline-block; position: absolute; left: 0; top: 10px; width: 1px; height: 20px; background: #fff;}
/**  * 模拟点击上传图片按钮* @index 当前操作的户型box的索引*/houseUpload(index) { this.$refs.houseTypeLoad[index].click()},/** * 上传图片到服务器* @index 当前操作的户型box的索引*/upLoadHouse(e, index) { let _that = this const file = e.target.files[0] if (!file) { return } new ImageCompressor(file, { quality: 0.9, maxWidth: 2000, maxHeight: 2000, success(result) { // debugger const formData = new FormData() formData.append('file', result, result.name) formData.append('watermark', false) // Send the compressed image file to server with XMLHttpRequest. if (result.size > 1 * 1024 * 1024 || result.size < 3 * 1024) { _that.$message('图片大小要在3K~1M之间') return } else { _that.$ajax.post('/img/upload', formData).then(res => { res = res.data if (res.images && res.images.length > 0) {  if (res.images[0].src !== 'file size is too small') {  let item = res.images[0].src  console.log(item)  _that.houseTypeForm[index].imgUrl.unshift(item)      }     } })   }   },   error(e) {   console.log(e.message)   }  })  },/**  * 打开图片查看器 */clickWatchImg(str, picIndex) {console.log('=================')console.log(picIndex)console.log(this.$refs[str][picIndex])this.$refs[str][picIndex].click()}, /**  * 删除指定图片,操作表单数据* @index 当前操作的户型box的索引* @picIndex 当前操作的图片索引*/delHouseImage(index, picIndex) { this.houseTypeForm[index].imgUrl.splice(picIndex, 1)},

关于vue.js组件的教程,请大家点击专题vue.js组件学习教程进行学习。

更多vue学习教程请阅读专题《vue实战教程》

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。

您可能感兴趣的文章:

  • vue excel上传预览和table内容下载到excel文件中
  • vue项目打包后上传至GitHub并实现github-pages的预览
  • vue项目打包上传github并制作预览链接(pages)
  • vue图片上传本地预览组件使用详解
  • vue实现压缩图片预览并上传功能(promise封装)
  • vue+node实现图片上传及预览的示例方法
  • vue项目上传Github预览的实现示例
  • vue.js 图片上传并预览及图片更换功能的实现代码
  • vue.js图片转Base64上传图片并预览的实现方法
  • vue.js 实现图片本地预览 裁剪 压缩 上传功能
  • Vue.js 2.0 移动端拍照压缩图片预览及上传实例
  • vue2实现移动端上传、预览、压缩图片解决拍照旋转问题
  • Vue.js 2.0 移动端拍照压缩图片上传预览功能


  • 上一条:
    微信小程序基于movable-view实现滑动删除效果
    下一条:
    微信开发之获取JSAPI TICKET
  • 昵称:

    邮箱:

    0条评论 (评论内容有缓存机制,请悉知!)
    最新最热
    • 分类目录
    • 人生(杂谈)
    • 技术
    • linux
    • Java
    • php
    • 框架(架构)
    • 前端
    • ThinkPHP
    • 数据库
    • 微信(小程序)
    • Laravel
    • Redis
    • Docker
    • Go
    • swoole
    • Windows
    • Python
    • 苹果(mac/ios)
    • 相关文章
    • 微信模板消息改版后发送规则记录(微信订阅消息参数值内容限制说明)(1个评论)
    • 微信支付v3对接所需工具及命令(0个评论)
    • 2023年9月1日起:微信小程序必须备案才能上线运营(0个评论)
    • 腾讯官方客服回应了:微信好友上限约10000个!(1个评论)
    • 2023年做微信小程序的老铁注意:新增收费项、微信小程序获取手机号也收费了(2个评论)
    • 近期文章
    • 智能合约Solidity学习CryptoZombie二课:让你的僵尸猎食(0个评论)
    • 智能合约Solidity学习CryptoZombie第一课:生成一只你的僵尸(0个评论)
    • 在go中实现一个常用的先进先出的缓存淘汰算法示例代码(0个评论)
    • 在go+gin中使用"github.com/skip2/go-qrcode"实现url转二维码功能(0个评论)
    • 在go语言中使用api.geonames.org接口实现根据国际邮政编码获取地址信息功能(1个评论)
    • 在go语言中使用github.com/signintech/gopdf实现生成pdf分页文件功能(0个评论)
    • gmail发邮件报错:534 5.7.9 Application-specific password required...解决方案(0个评论)
    • 欧盟关于强迫劳动的规定的官方举报渠道及官方举报网站(0个评论)
    • 在go语言中使用github.com/signintech/gopdf实现生成pdf文件功能(0个评论)
    • Laravel从Accel获得5700万美元A轮融资(0个评论)
    • 近期评论
    • 122 在

      学历:一种延缓就业设计,生活需求下的权衡之选中评论 工作几年后,报名考研了,到现在还没认真学习备考,迷茫中。作为一名北漂互联网打工人..
    • 123 在

      Clash for Windows作者删库跑路了,github已404中评论 按理说只要你在国内,所有的流量进出都在监控范围内,不管你怎么隐藏也没用,想搞你分..
    • 原梓番博客 在

      在Laravel框架中使用模型Model分表最简单的方法中评论 好久好久都没看友情链接申请了,今天刚看,已经添加。..
    • 博主 在

      佛跳墙vpn软件不会用?上不了网?佛跳墙vpn常见问题以及解决办法中评论 @1111老铁这个不行了,可以看看近期评论的其他文章..
    • 1111 在

      佛跳墙vpn软件不会用?上不了网?佛跳墙vpn常见问题以及解决办法中评论 网站不能打开,博主百忙中能否发个APP下载链接,佛跳墙或极光..
    • 2016-10
    • 2017-10
    • 2018-01
    • 2020-03
    • 2021-06
    • 2021-10
    • 2022-03
    • 2023-02
    • 2023-06
    • 2023-07
    • 2023-08
    • 2023-10
    • 2023-11
    Top

    Copyright·© 2019 侯体宗版权所有· 粤ICP备20027696号 PHP交流群

    侯体宗的博客