vue实现图片上传预览功能

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

效果图

html结构

<ul class="gallery-window-map" style="flex-wrap:wrap;">
 <!--点击上传按钮-->
 <li class="house-pic-item" v-if="!(!item.isNew&&editBtnType[index])" @click="houseUpload(index)">
  <div class="pic-box">
   <span class="iconfont icon-zengjia"></span>
   <h5 class="btn-tit">点击上传</h5>
  </div>
 </li>
 <!--展示区域-->
 <viewer :images="item.imgUrl">
  <li class="house-pic-item" v-for="(picItem, picIndex) in item.imgUrl" :key="picIndex">
   <img :src="picItem" alt="" :key="picItem" width="120" height="90" :ref="'showImg_'+index">
   <div class="mask">
    <div class="ico-box">
     <span class="font-btn" @click="clickWatchImg('showImg_'+index,picIndex)">
      <i class="iconfont icon-fangda"></i>
     </span>
     <span class="font-btn" v-if="!(!item.isNew&&editBtnType[index])" @click="delHouseImage(index,picIndex)">
      <i class="iconfont icon-shanchu"></i>
      <i class="line"></i>
     </span>
    </div>
   </div>
  </li>
 </viewer>
</ul>

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实战教程》

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

(0)

相关推荐

  • vue实现压缩图片预览并上传功能(promise封装)

    本文实例为大家分享了vue实现压缩图片预览并上传的具体代码,供大家参考,具体内容如下 主要用到filereader.canvas 以及 formdata 这三个h5的api 过程大致分为三步: 用户使用input file上传图片的时候,用filereader读取用户上传的图片数据(base64格式) 把图片数据传入img对象,然后将img绘制到canvas上,再调用canvas.toDataURL对图片进行压缩 获取到压缩后的base64格式图片数据,转成二进制塞入formdata,再通过Xm

  • vue.js图片转Base64上传图片并预览的实现方法

    对于前端人员来说,图片处理是一个很常见的需求,由于图片稍微特殊,现在多数做法都是使用调用ajax接口通过http方法来提交,例如post方法提交,后台处理后返回一个图片路径给前端,前端根据这个路径写入img标签,但是基于当前的前后端分离的开发模式下,前后端代码往往不在同一个系统目录下,而且部署时可能liunx路径与windows路径不一样,这样后期路径更改可能会导致维护困难问题出现. 针对这种问题,这里我推荐使用图片转base64格式,再发给后端,后端只需将转码结果存入数据库即可,前端调用接口直

  • vue.js 实现图片本地预览 裁剪 压缩 上传功能

    以下代码涉及 Vue 2.0 及 ES6 语法. 目标 纯 javascrpit 实现,兼容ie9及以上浏览器,在本地做好文件格式.长宽.大小的检测,减少浏览器交互. 现实是残酷的,为了兼容Ie9 还是用上了 flash,第二篇来解释解释. 代码结构 <div id="wrap"> <label> 点我上传图片 <input type='file' @change="change" ref="input"> &

  • Vue.js 2.0 移动端拍照压缩图片预览及上传实例

    在学习和使用Vue.js 2.0 的过程中遇到不少不一样的地方,本来移动端开发H5应用,准备将mui框架和Vue.js+vue-router+vuex 全家桶结合起来使用,但是在拍照上传的实现过程中遇到了无法调用plus的H5+接口的问题,所以最后拍照上传功能还是使用input file方式里解决的.但是内心还是不甘心的,由于项目进度推进,迭代版本,所以不得不放弃,后续可能我将此功能使用调用H5+接口实现. 首先我来讲我实现这个拍照预览压缩上传的思路,准确的说应该是拍照或选择图片压缩之后预览及上

  • vue2实现移动端上传、预览、压缩图片解决拍照旋转问题

    因为最近遇到个移动端上传头像的需求,上传到后台的数据是base64位,其中为了提高用户体验,把比较大的图片用canvas进行压缩之后再进行上传.在移动端调用拍照功能时,会发生图片旋转,为了解决这个问题引入了exif去判断拍照时的信息再去处理图片,这是个很好的插件.关于exif.js可以去他的GitHub上了解,这边直接 npm install exif-js --save   安装,然后import一下就可以使用了.以下就是源码,可以直接使用. <template> <div> &

  • vue.js 图片上传并预览及图片更换功能的实现代码

    这里讲解是图片上传和图片预览.主要是围绕我们常用功能的列子做讲解 ,并且没有格外引入其他js 所以你复制过去做简单修改便可以看到效果 效果图: 样式以及效果图一并展示 1.HTML <div class="rz-picter"> <img :src="avatar" class="img-avatar"> <input type="file" name="avatar" id=

  • Vue.js 2.0 移动端拍照压缩图片上传预览功能

    在学习和使用Vue.js 2.0 的过程中遇到不少不一样的地方,本来移动端开发H5应用,准备将mui框架和Vue.js+vue-router+vuex 全家桶结合起来使用,但是在拍照上传的实现过程中遇到了无法调用plus的H5+接口的问题,所以最后拍照上传功能还是使用input file方式里解决的.但是内心还是不甘心的,由于项目进度推进,迭代版本,所以不得不放弃,后续可能我将此功能使用调用H5+接口实现. 首先我来讲我实现这个拍照预览压缩上传的思路,准确的说应该是拍照或选择图片压缩之后预览及上

  • vue项目打包后上传至GitHub并实现github-pages的预览

    vue项目打包后上传至GitHub,并实现github-pages的预览 1. 打包vue 项目 vue项目: 命令行输入打包命令npm run build,生成了dist文件夹: 打包完成. 打包常见问题1--项目资源无法加载 打开刚刚打包好的dist文件夹,浏览器打开index.html 发现该页面是空白的,打开控制台发现 这里看到index.html文件中没有加载任何css.js文件. 解决方法--修改config文件 打开项目根目录config下的index.js文件,进行如下修改: 即

  • vue项目打包上传github并制作预览链接(pages)

    当Vue项目完成后,在根目录下打开命令行,输入命令: npm run build 实际上此命令就是执行build.js文件,将项目打包成静态资源. 此命令完成后,项目根目录下会多出一个dist文件夹,dist文件里面有: static文件下包括项目打包后的css.js.img.fonts(字体图标). 项目资源无法加载 点击index.html,浏览器显示该页面是空白的.打开控制台看到index.html文件中没有加载任何css.js文件. 解决方法: 打开项目根目录config下的index.

  • vue excel上传预览和table内容下载到excel文件中

    excel上传预览 这里会用到 npm i element-ui npm i xlsx 在vue的template中写上,排版和css看个人需求 <div> 选择文件 <input type="file" d="file_input" @change="importf(this)" accept=".csv, application/vnd.openxmlformats-officedocument.spreadshe

  • vue项目上传Github预览的实现示例

    最近在用Vue仿写cnode社区,想要上传到github,并通过Github pages预览,在这个过程中遇到了一些问题,因此写个笔记,以便查阅. 完成Vue项目以后,在上传到github之前,需要修改一些配置才能通过github pages预览项目. 一.修改配置 1.解决文件路径问题: 打开项目根目录config文件夹下的index.js文件,进行如下修改: 看清楚是 build(上边还有个dev 是开发环境下的配置,不需要改动)下的 assetsPublicPath :将'/'改为'./'

  • vue图片上传本地预览组件使用详解

    最近项目一直在使用vue,以前只是用vue做过一些简单的demo对数据进行增删改,并没有用于实际开发项目.今天就想了解一下如何用vue实现常见的图片上传前本地预览效果. 效果预览: <template> <div class="image-view"> <div class="addbox"> <input type="file" @change="getImgBase()">

  • vue+node实现图片上传及预览的示例方法

    本文介绍了vue+node实现图片上传及预览的示例方法,分享给大家,具体如下: 先上效果图 上代码 html部分主要是借助了weui的样式 <template> <div> <myheader :title="'发布动态'"> <i class="iconfont icon-fanhui1 left" slot="left" @click="goback"></i>

随机推荐

其他