Vue使用mixins实现压缩图片代码

本文介绍了Vue使用mixins实现压缩图片代码，分享给大家，具体如下：

图片压缩

创建mixins image-compress.js

example

<template>
  ...
</template>
<script>
 import imageUploadMixins from '@/mixins/image-compress'; 
 export default { 
  mixins: [imageUploadMixins],  
  ...  
  methods:{
    handleUploadImage(e){
      let file = e.target.files[0];
      this.checkAndHandleCompression(file).then( fileOptions => {
        // let {uploadSrc, uploadFile} = fileOptions;
        
        // 压缩完成使用 uploadSrc, uploadFile
        
        ...
        
      });
    }
  }
   ...  
 }
</script>
<style>
  ...
</style>

上面是我整理给大家的，希望今后会对大家有帮助。

相关文章：

vue数据控制视图源码解析

浅谈React高阶组件

vue-cli axios请求方式及跨域处理问题

以上就是Vue使用mixins实现压缩图片代码的详细内容，更多请关注Gxl网其它相关文章！