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 相关文章推荐
prototype.js的Ajax对象
Sep 23 Javascript
HTML-CSS群中单选引发的“事件”
Mar 05 Javascript
JavaScript监测ActiveX控件是否已经安装过的代码
Sep 02 Javascript
为调试JavaScript添加输出窗口的代码
Feb 07 Javascript
原生js和jquery分别实现横向导航菜单效果
May 13 Javascript
AngularJS中指令的四种基本形式实例分析
Nov 22 Javascript
前端自动化开发之Node.js的环境搭建教程
Apr 01 Javascript
Three.js基础学习之场景对象
Sep 27 Javascript
Node.js利用断言模块assert进行单元测试的方法
Sep 28 Javascript
Angular实现表单验证功能
Nov 13 Javascript
vue.js使用v-model指令实现的数据双向绑定功能示例
May 22 Javascript
送你43道JS面试题(收藏)
Jun 17 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
smarty模板引擎之内建函数用法
2015/03/30 PHP
php中实现用数组妩媚地生成要执行的sql语句
2015/07/10 PHP
Yii CDBCriteria常用方法实例小结
2017/01/19 PHP
PHP实现的折半查找算法示例
2017/12/19 PHP
有关PHP 中 config.m4 的探索
2020/08/26 PHP
非常好的js代码
2006/06/27 Javascript
JQuery的Alert消息框插件使用介绍
2010/10/09 Javascript
javascript 构造函数强制调用经验总结
2012/12/02 Javascript
Jquery submit()无法提交问题
2013/04/21 Javascript
跟我学Node.js(四)---Node.js的模块载入方式与机制
2014/06/04 Javascript
js点击文本框后才加载验证码实例代码
2015/10/20 Javascript
jQuery实现下拉加载功能实例代码
2016/04/01 Javascript
bootstrap布局中input输入框右侧图标点击功能
2016/05/16 Javascript
jQuery ajax应用总结
2016/06/02 Javascript
nodejs个人博客开发第三步 载入页面
2017/04/12 NodeJs
JS中type=&quot;button&quot;和type=&quot;submit&quot;的区别
2017/07/04 Javascript
浅谈Vue.js中ref ($refs)用法举例总结
2017/12/19 Javascript
Vue进度条progressbar组件功能
2018/04/17 Javascript
vee-validate vue 2.0自定义表单验证的实例
2018/08/28 Javascript
node.js 模块和其下载资源的镜像设置的方法
2018/09/06 Javascript
node crawler如何添加promise支持
2020/02/01 Javascript
JS面向对象编程——ES6 中class的继承用法详解
2020/03/03 Javascript
[02:20]2014DOTA2西雅图邀请赛 MVP外卡赛首胜采访
2014/07/09 DOTA
Python ljust rjust center输出
2008/09/06 Python
Linux下多个Python版本安装教程
2018/08/15 Python
python 列表、字典和集合的添加和删除操作
2019/12/16 Python
汽车检测与维修个人求职信
2013/09/24 职场文书
教育学专业毕业生的自我鉴定
2013/11/26 职场文书
生物学专业求职信
2014/07/23 职场文书
离婚案件答辩状
2015/05/22 职场文书
早会开场白台词大全
2015/06/01 职场文书
2016入党积极分子党课学习心得体会
2015/10/09 职场文书
Python insert() / append() 用法 Leetcode实战演示
2021/03/31 Python
redis实现共同好友的思路详解
2021/05/26 Redis
利用Java设置Word文本框中的文字旋转方向的实现方法
2021/06/28 Java/Android
python可视化大屏库big_screen示例详解
2021/11/23 Python