vue-image-crop-compress-upload

a vue plgin for image upload , crop and compress（vue图片剪裁压缩上传插件）.

** Notice: ** This component is designed for pc, not recommended for use on the mobile side.(该组件适用于pc端，不推荐手机端使用)

Brower compatibility

IE10+

Install

npm

$ npm install vue-image-crop-compress-upload

Usage

Props

| 名称 | 类型 | 默认 | 说明 | | ----------------| ---------------- | ---------------| ------------------------------------------| | field | String | 'upload' | Upload input filename, used for server side get the file stream. | | value | Boolean | twoWay | show or not | | url | String | '' | Server api path,like "/avatar/upload" | | params | Object | null | POST Params，like "{k:v}" | | headers | Object | null | POST request header，like "{k:v}" | | langType | String | 'zh' | language type | | langExt | Object | | language extend | | width | Number | 200 | width of receive image | | height | Number | 200 | height of receive image | | imgFormat | string | 'jpg' | jpg/png, Server api receive file type. |

Events

| 名称 | 说明 | | ----------------| ------------------------------------------| | cropSuccess | image crop success, params( imageDataUrl, field ) | | cropUploadSuccess | upload success, params( jsonData, field ) | | cropUploadFail | upload fail, params( status, field ) |

Example vue

<template>
 <s-upload :init-src='ruleForm.photo' @uploadImg="changeImg" field='localFile' url='/wcsphp/uploadfile.php' textShow='true'></s-upload>
</template>
<script>
  import SUpload from 'vue-image-crop-compress-upload/stager-image-crop-compress-upload.vue'

  export default {
    components: {
      SUpload
    },
    methods: {
      changeImg(imageData) {
        console.log(imageData)
      }
    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  .user-info-edit-form-wrapper {
    width: 30rem;
    margin: 0 auto;
  }
  .vue-image-crop-upload .vicp-wrap .vicp-step2 .vicp-crop .vicp-crop-left .vicp-img-container .vicp-img-shade {
    background: none;
  }
</style>