立即登录 马上注册
首页 › 资源下载区 › 资源下载 › vue图片剪裁上传组件

赞

评论

收藏

vue图片剪裁上传组件

资源下载 资源下载 发布于：2023-03-14 18:20 | 阅读数：325 | 评论：0

这是一个基于Vue.js的图像裁剪和上传组件。它允许用户选择图像并通过拖动和缩放来裁剪图像。裁剪后的图像可以作为文件上传到服务器。
这个vue组件非常容易使用，只需要在Vue项目中安装并注册它，然后在需要使用它的地方使用它即可。它还支持多种配置选项，如图像比例，图像大小等，以满足不同的需求。
如果您正在开发一个需要图像裁剪和上传功能的Web应用，那么这个组件可以为您省去很多开发时间。
QQ截图20230314181619.jpg
使用方法
如果您想使用vue-image-crop-upload，首先您需要安装它，命令如下：
npm install vue-image-crop-upload
在template模板中使用组件：
<a class="btn" @click="toggleShow">设置头像</a>
<my-upload field="img" @crop-success="cropSuccess" @crop-upload-success="cropUploadSuccess" @crop-upload-fail="cropUploadFail" v-model="show" :width="300" :height="300" url="https://httpbin.org/post" :params="params" :headers="headers" img-format="png"></my-upload>
<img :src="imgDataUrl">
在script中写入下面的代码：
import myUpload from 'vue-image-crop-upload';
export default {
  data() {
    return {
      show: false,
      params: {
        token: '123456798',
        name: 'avatar'
      },
      headers: {
        smail: '*_~'
      },
      imgDataUrl: '' // the datebase64 url of created image
    }
  },
  components: {
    'my-upload': myUpload
  },
  methods: {
    toggleShow() {
      this.show = !this.show;
    },
    /**
     * crop success
     *
     * [param] imgDataUrl
     * [param] field
     */
    cropSuccess(imgDataUrl, field){
      console.log('-------- crop success --------');
      this.imgDataUrl = imgDataUrl;
    },
    /**
     * upload success
     *
     * [param] jsonData   服务器返回数据，已进行json转码
     * [param] field
     */
    cropUploadSuccess(jsonData, field){
      console.log('-------- upload success --------');
      console.log(jsonData);
      console.log('field: ' + field);
    },
    /**
     * upload fail
     *
     * [param] status  server api return error status, like 500
     * [param] field
     */
    cropUploadFail(status, field){
      console.log('-------- upload fail --------');
      console.log(status);
      console.log('field: ' + field);
    }
  }
}
配置参数:
vue-image-crop-upload的可用props参数如下：
名称
类型
默认
说明
urlString''上传接口地址，如果为空，图片不会上传
methodString'POST'上传方法
fieldString'upload'向服务器上传的文件名
valueBooleantwoWay是否显示控件，双向绑定
paramsObjectnull上传附带其他数据，格式"{k:v}"
headersObjectnull上传header设置，格式"{k:v}"
langTypeString'zh'语言类型，默认中文
langExtObject语言包自行扩展
widthNumber200最终得到的图片宽度
heightNumber200最终得到的图片高度
imgFormatstring'png'jpg/png, 最终得到的图片格式
imgBgcstring'#fff'导出图片背景色,当imgFormat属性为jpg时生效
noCircleBooleanfalse关闭 圆形图像预览
noSquareBooleanfalse关闭 方形图像预览
noRotateBooleantrue关闭 旋转图像功能
withCredentialsBooleanfalse支持跨域
其中的langExt示例如下：
{
  hint: '点击，或拖动图片至此处',
  loading: '正在上传……',
  noSupported: '浏览器不支持该功能，请使用IE10以上或其他现在浏览器！',
  success: '上传成功',
  fail: '图片上传失败',
  preview: '头像预览',
  btn: {
    off: '取消',
    close: '关闭',
    back: '上一步',
    save: '保存'
  },
  error: {
    onlyImg: '仅限图片格式',
    outOfSize: '单文件大小不能超过 ',
    lowestPx: '图片最低像素为（宽*高）：'
  }
}
事件:
vue-image-crop-upload支持下面的一些事件：
名称
说明
srcFileSet用户选取文件之后, 参数( fileName, fileType, fileSize )
cropSuccess图片截取完成事件（上传前), 参数( imageDataUrl, field )
cropUploadSuccess上传成功， 参数( jsonData, field )
cropUploadFail上传失败， 参数( status, field )

示例代码：基于vue3
<div id="app">
  <a class="btn" @click="toggleShow">设置头像</a>
  <my-upload field="img" @crop-success="cropSuccess" @crop-upload-success="cropUploadSuccess" @crop-upload-fail="cropUploadFail" v-model="show" :width="300" :height="300" url="/upload" :params="params" :headers="headers" img-format="png"></my-upload>
  <img :src="imgDataUrl">
</div>
 
<script>
  import 'babel-polyfill'; // es6 shim
  import Vue from 'vue';
  import myUpload from 'vue-image-crop-upload';
 
  new Vue({
    el: '#app',
    data: {
      show: true,
      params: {
        token: '123456798',
        name: 'avatar'
      },
      headers: {
        smail: '*_~'
      },
      imgDataUrl: '' // the datebase64 url of created image
    },
    components: {
      'my-upload': myUpload
    },
    methods: {
      toggleShow() {
        this.show = !this.show;
      },
      /**
       * crop success
       *
       * [param] imgDataUrl
       * [param] field
       */
      cropSuccess(imgDataUrl, field){
        console.log('-------- crop success --------');
        this.imgDataUrl = imgDataUrl;
      },
      /**
       * upload success
       *
       * [param] jsonData   服务器返回数据，已进行json转码
       * [param] field
       */
      cropUploadSuccess(jsonData, field){
        console.log('-------- upload success --------');
        console.log(jsonData);
        console.log('field: ' + field);
      },
      /**
       * upload fail
       *
       * [param] status  server api return error status, like 500
       * [param] field
       */
      cropUploadFail(status, field){
        console.log('-------- upload fail --------');
        console.log(status);
        console.log('field: ' + field);
      }
    }
  });
 
</script>
基于vue2
<div id="app">
  <a class="btn" @click="toggleShow">设置头像</a>
  <my-upload field="img" @crop-success="cropSuccess" @crop-upload-success="cropUploadSuccess" @crop-upload-fail="cropUploadFail" v-model="show" :width="300" :height="300" url="/upload" :params="params" :headers="headers" img-format="png"></my-upload>
  <img :src="imgDataUrl">
</div>
 
<script>
  import 'babel-polyfill'; // es6 shim
  import Vue from 'vue';
  import myUpload from 'vue-image-crop-upload/upload-2.vue';
 
  new Vue({
    el: '#app',
    data: {
      show: true,
      params: {
        token: '123456798',
        name: 'avatar'
      },
      headers: {
        smail: '*_~'
      },
      imgDataUrl: '' // the datebase64 url of created image
    },
    components: {
      'my-upload': myUpload
    },
    methods: {
      toggleShow() {
        this.show = !this.show;
      },
      /**
       * crop success
       *
       * [param] imgDataUrl
       * [param] field
       */
      cropSuccess(imgDataUrl, field){
        console.log('-------- crop success --------');
        this.imgDataUrl = imgDataUrl;
      },
      /**
       * upload success
       *
       * [param] jsonData   服务器返回数据，已进行json转码
       * [param] field
       */
      cropUploadSuccess(jsonData, field){
        console.log('-------- upload success --------');
        console.log(jsonData);
        console.log('field: ' + field);
      },
      /**
       * upload fail
       *
       * [param] status  server api return error status, like 500
       * [param] field
       */
      cropUploadFail(status, field){
        console.log('-------- upload fail --------');
        console.log(status);
        console.log('field: ' + field);
      }
    }
  });
 
</script>
基于vue1
<div id="app">
  <a class="btn" @click="toggleShow">设置头像</a>
  <my-upload field="img" :width="300" :height="300" url="/upload" :params="params" :headers="headers" :value.sync="show" img-format="png"></my-upload>
  <img :src="imgDataUrl">
</div>
 
<script>
  import 'babel-polyfill'; // es6 shim
  import Vue from 'vue';
  import myUpload from 'vue-image-crop-upload/upload-1.vue';
 
  new Vue({
    el: '#app',
    data: {
      show: true,
      params: {
        token: '123456798',
        name: 'avatar'
      },
      headers: {
        smail: '*_~'
      },
      imgDataUrl: '' // the datebase64 url of created image
    },
    components: {
      'my-upload': myUpload
    },
    methods: {
      toggleShow() {
        this.show = !this.show;
      }
    },
    events: {
      /**
       * crop success
       *
       * [param] imgDataUrl
       * [param] field
       */
      cropSuccess(imgDataUrl, field){
        console.log('-------- crop success --------');
        this.imgDataUrl = imgDataUrl;
      },
      /**
       * upload success
       *
       * [param] jsonData   服务器返回数据，已进行json转码
       * [param] field
       */
      cropUploadSuccess(jsonData, field){
        console.log('-------- upload success --------');
        console.log(jsonData);
        console.log('field: ' + field);
      },
      /**
       * upload fail
       *
       * [param] status  server api return error status, like 500
       * [param] field
       */
      cropUploadFail(status, field){
        console.log('-------- upload fail --------');
        console.log(status);
        console.log('field: ' + field);
      }
    }
  });
 
</script>
github网址：https://github.com/dai-siki/vue-image-crop-upload
关注下面的标签，发现更多相似文章
免责声明：

1. 本站所有资源来自网络搜集或用户上传，仅作为参考不担保其准确性！

2. 本站内容仅供学习和交流使用，版权归原作者所有！© 查看更多

3. 如有内容侵害到您，请联系我们尽快删除，邮箱：kf@codeae.com

分享到： QQ好友和群QQ好友和群 QQ空间QQ空间

举报

返回列表
相关帖子
avatar
112251 经验
193 文档
售价：0金币
  • 普通用户购买价格 : 0 金币
  • VIP购买价格 : 免费
下载附件
  • 文件名称： vue图片剪裁上传组件.zip
  • 文件大小： 574.17 KB
  • 下载次数：20
  • 描述：vue图片剪裁上传组件
OPNE在线字典
  • 手机版| 免责声明|
2021-2024  版权所有：CodeAE代码之家   
粤ICP备2023096576号-2