Vue-image-crop-compress-upload NPM

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>