vue+element实现图片上传及裁剪功能


Posted in Javascript onJune 29, 2020

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

随便写的一个小demo 功能是没有任何问题 可能里面会有一些小细节没有优化 

1 、安装 vue-cropper

npm install vue-cropper

2、组件内使用

import { VueCropper } from 'vue-cropper' 
components: {
 VueCropper,
},

具体可见官网

demo

<template>
  <div>
    <h1>图片上传</h1>
    <div>
      <el-upload
        class="avatar-uploader"
        action="https://jsonplaceholder.typicode.com/posts/"
        :show-file-list="false"
        :on-success="handleAvatarSuccess"
        :before-upload="beforeAvatarUpload"
      >
      <img v-if="imageUrl" :src="imageUrl" class="avatar">
      <i v-else class="el-icon-plus avatar-uploader-icon"></i>
      </el-upload>
    </div>
    <el-dialog title="图片剪裁" :visible.sync="dialogVisible" append-to-body>
      <div class="cropper-content">
        <div class="cropper" style="text-align:center">
          <vueCropper
            ref="cropper"
            :img="option.img"
            :outputSize="option.outputSize"
            :outputType="option.outputType"
            :info="option.info"
            :canScale="option.canScale"
            :autoCrop="option.autoCrop"
            :autoCropWidth="option.autoCropWidth"
            :autoCropHeight="option.autoCropHeight"
            :fixed="option.fixed"
            :fixedBox="option.fixedBox"
            :fixedNumber="option.fixedNumber"
          ></vueCropper>
        </div>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="finish" :loading="loading">确认</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import {VueCropper} from 'vue-cropper'
export default {
  components: {
    VueCropper
  },
  data(){
    return{
      imageUrl: '',
      dialogVisible: false,
      // 裁剪组件的基础配置option
      option: {
        img: '', // 裁剪图片的地址
        info: true, // 裁剪框的大小信息
        outputSize: 0.8, // 裁剪生成图片的质量
        outputType: 'jpeg', // 裁剪生成图片的格式
        canScale: false, // 图片是否允许滚轮缩放
        autoCrop: true, // 是否默认生成截图框
        autoCropWidth: 100, // 默认生成截图框宽度
        autoCropHeight: 100, // 默认生成截图框高度
        fixedBox: true, // 固定截图框大小 不允许改变
        fixed: true, // 是否开启截图框宽高固定比例
        fixedNumber: [1, 1], // 截图框的宽高比例
        full: true, // 是否输出原图比例的截图
        canMoveBox: false, // 截图框能否拖动
        original: false, // 上传图片按照原始比例渲染
        centerBox: false, // 截图框是否被限制在图片里面
        infoTrue: true, // true 为展示真实输出图片宽高 false 展示看到的截图框宽高
        canMove:true,
      },
      picsList: [], //页面显示的数组
      // 防止重复提交
      loading: false,
      fileinfo:{}
    }
  },
  methods: {
   handleAvatarSuccess(res, file,fileList) {
    //上传成功后将图片地址赋值给裁剪框显示图片
    this.$nextTick(() => {
      this.option.img = URL.createObjectURL(file.raw);
      this.fileinfo = res
      this.dialogVisible = true
    })
   },
   beforeAvatarUpload(file) {
    const isJPG = file.type === 'image/jpeg'||file.type==='image/png';
    const isLt2M = file.size / 1024 / 1024 < 2;
 
    if (!isJPG) {
     this.$message.error('上传头像图片只能是 JPG 格式!');
    }
    if (!isLt2M) {
     this.$message.error('上传头像图片大小不能超过 2MB!');
    }
    return isJPG && isLt2M;
   },
    finish() {
      this.$refs.cropper.getCropBlob((data) => {
        var fileName = 'goods' + this.fileinfo.uid
        this.loading = true
        //上传阿里云服务器
        //请求
      })
    }
  }
}
</script>
<style scoped>
  .avatar-uploader{
    background:red!important;
    width:150px;height:150px;
    text-align: center;
    line-height: 150px;
  }
  .el-icon-plus{
    width:150px;height:150px;font-size:30px;
  }
  .cropper-content{
    width:500px;height:500px;background: pink;
  }
  .cropper{
    width:500px;
    height:500px;
    background: yellow;
  }
</style>

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

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

Javascript 相关文章推荐
从js向Action传中文参数出现乱码问题的解决方法
Dec 29 Javascript
JS实现很酷的水波文字特效实例
Feb 26 Javascript
jQuery实现的手机发送验证码倒计时效果代码分享
Aug 24 Javascript
基于jQuery实现点击最后一行实现行自增效果的表格
Jan 12 Javascript
Fullpage.js固定导航栏-实现定位导航栏
Mar 17 Javascript
AngularJS 中的指令实践开发指南(一)
Mar 20 Javascript
JS实现提交表单前的数字及邮箱校检功能
Nov 13 Javascript
微信小程序picker组件简单用法示例【附demo源码下载】
Dec 05 Javascript
JavaScript实现微信红包算法及问题解决方法
Apr 26 Javascript
JS实现数组去重及数组内对象去重功能示例
Feb 02 Javascript
JQuery animate动画应用示例
May 14 jQuery
JS计算两个数组的交集、差集、并集、补集(多种实现方式)
May 21 Javascript
vue实现匀速轮播效果
Jun 29 #Javascript
vant实现购物车功能
Jun 29 #Javascript
js实现随机点名器精简版
Jun 29 #Javascript
Node.js中出现未捕获异常的处理方法
Jun 29 #Javascript
在Vue中使用antv的示例代码
Jun 29 #Javascript
vue实现一个6个输入框的验证码输入组件功能的实例代码
Jun 29 #Javascript
纯JS开发baguetteBox.js响应式画廊插件
Jun 28 #Javascript
You might like
PHP+MySQL5.0中文乱码解决方法
2006/11/20 PHP
三个类概括PHP的五种设计模式
2012/09/05 PHP
邮箱正则表达式实现代码(针对php)
2013/06/21 PHP
Codeigniter出现错误提示Error with CACHE directory的解决方案
2014/06/12 PHP
php计算一个文件大小的方法
2015/03/30 PHP
php生成数字字母的验证码图片
2015/07/14 PHP
jQuery+PHP发布的内容进行无刷新分页(Fckeditor)
2015/10/22 PHP
使Ext的Template可以解析二层的json数据的方法
2007/12/22 Javascript
解决extjs在firefox中关闭窗口再打开后iframe中js函数访问不到的问题
2008/11/06 Javascript
关于JS控制代码暂停的实现方法分享
2012/10/11 Javascript
innerText和textContent对比及使用介绍
2013/02/27 Javascript
使用JQuery 加载页面时调用JS的实现方法
2016/05/30 Javascript
分享JS数组求和与求最大值的方法
2016/08/11 Javascript
微信小程序 石头剪刀布实例代码
2017/01/04 Javascript
使用jquery给新生的th绑定hover事件的实例
2017/02/10 Javascript
addEventListener()与removeEventListener()解析
2017/04/20 Javascript
搭建基于express框架运行环境的方法步骤
2018/11/15 Javascript
微信小程序通过一个json实现分享朋友圈图片
2019/09/03 Javascript
微信小程序开发之转发分享功能
2019/10/22 Javascript
[48:21]林俊杰圣堂刺客超神杀戮秀
2014/10/29 DOTA
[01:58]DOTA2上海特级锦标赛现场采访:RTZ这个ID到底好不好
2016/03/25 DOTA
[48:48]VGJ.T vs Liquid 2018国际邀请赛小组赛BO2 第二场 8.19
2018/08/21 DOTA
在Python的Django框架上部署ORM库的教程
2015/04/20 Python
解决Python传递中文参数的问题
2015/08/04 Python
python-opencv颜色提取分割方法
2018/12/08 Python
python switch 实现多分支选择功能
2020/12/21 Python
CSS3系列教程:背景图片(背景大小和多背景图) 应用说明
2012/12/19 HTML / CSS
会走动的图形html5时钟示例
2014/04/27 HTML / CSS
营销总经理的岗位职责
2013/12/15 职场文书
财会专业毕业生自荐信
2014/07/09 职场文书
明星员工获奖感言
2014/08/14 职场文书
服务员岗位职责
2015/02/03 职场文书
《分数的意义》教学反思
2016/02/20 职场文书
创业计划书之都市休闲农庄
2019/12/28 职场文书
js实现上传图片到服务器
2021/04/11 Javascript
python高温预警数据获取实例
2022/07/23 Python