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 相关文章推荐
日期函数扩展类Ver0.1.1
Sep 07 Javascript
用JavaScript 处理 URL 的两个函数代码
Aug 13 Javascript
利用jQuery插件扩展识别浏览器内核与外壳的类型和版本的实现代码
Oct 22 Javascript
jquery增加时编辑jqGrid(实例代码)
Nov 08 Javascript
js操作XML文件的实现方法兼容IE与FireFox
Jun 25 Javascript
JavaScript中removeChild 方法开发示例代码
Aug 15 Javascript
详解JS数据类型的值拷贝函数(深拷贝)
Jul 13 Javascript
js微信分享接口调用详解
Jul 23 Javascript
使用layui 的layedit定义自己的toolbar方法
Sep 18 Javascript
JS字符串补全方法padStart()和padEnd()
May 27 Javascript
vue自定义组件实现双向绑定
Jan 13 Vue.js
详解vue中v-for的key唯一性
May 15 Vue.js
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
eAccelerator的安装与使用详解
2013/06/13 PHP
关于PHP session 存储方式的详细介绍
2013/06/25 PHP
一个PHP的ZIP压缩类分享
2014/05/04 PHP
PHP中如何防止外部恶意提交调用ajax接口
2016/04/11 PHP
取键盘键位ASCII码的网页
2007/07/30 Javascript
jQuery 性能优化指南(3)
2009/05/21 Javascript
JavaScript如何从listbox里同时删除多个项目
2013/10/12 Javascript
JavaScript程序员应该知道的45个实用技巧
2014/03/04 Javascript
js判断变量初始化的三种形式及推荐用的形式
2014/07/22 Javascript
JS根据key值获取URL中的参数值及把URL的参数转换成json对象
2015/08/26 Javascript
jquery实现上传文件大小类型的验证例子(推荐)
2016/06/25 Javascript
使用jsonp实现跨域获取数据实例讲解
2016/12/25 Javascript
js实现日历与定时器
2017/02/22 Javascript
聊聊那些使用前端Javascript实现的机器学习类库
2017/09/18 Javascript
vue地区选择组件教程详解
2018/05/04 Javascript
JS实现获取毫秒值及转换成年月日时分秒的方法
2018/08/15 Javascript
解决jquery有正确返回值但不执行success函数的问题
2018/08/20 jQuery
vue新vue-cli3环境配置和模拟json数据的实例
2018/09/19 Javascript
使用Python编写Linux系统守护进程实例
2015/02/03 Python
python分析网页上所有超链接的方法
2015/05/08 Python
python生成二维码的实例详解
2017/10/29 Python
解决win64 Python下安装PIL出错问题(图解)
2018/09/03 Python
Pandas GroupBy对象 索引与迭代方法
2018/11/16 Python
Python的赋值、深拷贝与浅拷贝的区别详解
2020/02/12 Python
如何使用Django Admin管理后台导入CSV
2020/11/06 Python
pandas map(),apply(),applymap()区别解析
2021/02/24 Python
洛杉矶生活休闲而精致的基础品牌:Mika Jaymes
2018/01/07 全球购物
英国排名第一的在线宠物用品商店:Monster Pet Supplies
2018/05/20 全球购物
Agoda中文官网:安可达(低价预订全球酒店)
2021/01/18 全球购物
这段代码难道不该打印出56吗
2013/02/27 面试题
一个J2EE项目团队的主要人员组成是什么
2012/06/04 面试题
地球物理学专业推荐信
2014/09/08 职场文书
如何写通讯稿
2015/07/22 职场文书
2016十一国庆节慰问信
2015/12/01 职场文书
《坐井观天》教学反思
2016/02/18 职场文书
Python实现打乒乓小游戏
2021/09/25 Python