取消 vue-core-image-upload 的默认上传

http://www.tuicool.com/articles/QB7zQv2

vue-core-image-upload 是一款方便的 vue.js 图片上传裁剪插件，你可以用它进行图片的上传，裁剪和压缩。

vue-core-image-upload 提供 is-xhr 这个属性来 取消默认的上传方式。然后通过 imagechanged 来获取文件内容。

参考示例

下面我们简单实现一套代码，实现自定义图片处理，我们不用自动上传，我们上传一张 png 然后将图片进行压缩和重命名上传到我们的服务器。

安装依赖

默认的一些 vue ，webpack 这些安装就省略了，我们直接开始先安装插件 :

npm i vue-core-image-upload --save

然后安装 j-i-c 用于图片的压缩。

npm install j-i-c --save

安装完成后，我们还需要做点小事情，我们需要将 jic 改成 common.js 的模式。这个时候我们更改下 src/JIC.js 。我们需要在文件末尾将模块导出；

// ... above contens
module.exports = jic;

编辑基本的 vue 文件

<template>  
  <div class="components">
    <h3>取消默认的上传h3>
    <p>你可以设置{gfm-js-extract-pre-1} 设置为 false 。然后通过 `imagechanged` 来取得上传文件的信息。如果是单文件，则范围该文件的信息，
      如果上传的
    <div class="m-form">
      <vue-core-image-upload
        :class="['btn', 'btn-primary']"
        :crop="false"
        @imagechanged="imagechanged"
        :isXhr="false"
        text="点击上传"
        url="http://101.198.151.190/api/upload.php" >
      vue-core-image-upload>
    div>
    <p v-if="!image">
      There is no image!
    p>
    <p>上传图片p>
    <table class="m-table bordered" v-if="image" width="620">
      <tr>
          <th width="50%">原始图片th>
          <th>压缩图片th>
      tr>
      <tr>
        <td><img id="source" width="100%" :src="image" />td>
        <td><img width="100%" :src="compressSrc" />td>
      tr>
    table>
    <button type="button" @click="upload"> 上传图片 button>
  div>
template>

其中主要是一个插件按钮和一个表格用于图片对比，以及上传按钮！

读取上传的文件

我们实际上在实现的时候，是通过监听 input[type="file"] 的 change 事件来实现上传文件内容的读取，其获取的值实际上是一个 File 对象。

你可以读取到它的类型，文件大小，以及名称。但是如果你需要进行图片的预览的话，你需要使用 FileReader 对象来读取 file 对象，然后将获取的 对象 result 会是一个 base64 编码，用于图片预览。

import VueCoreImageUpload from 'vue-core-image-upload';  
import jic from 'j-i-c';  
export default {  
  components: {
    VueCoreImageUpload,
  },

  data() {
    return {
      image: false,
      title: '',
    };
  },

  methods: {
    imagechanged(res) {
      this.title = res.name;
      const reader = new FileReader();
        let self = this;
        reader.onload = function(e) {
          const src = e.target.result;
          this.image = src;
        }
      reader.readAsDataURL(res);
    }
  }

};

压缩图片

这个时候我们使用 j-i-c 来把上传的图片压缩。

compressImage() {  
      const quality =  50;
      // output file format (jpg || png)
      const outputFormat = 'jpg';
      //This function returns an Image Object
      const sourceImg = document.querySelector('#source');
      this.compressSrc = jic.compress(sourceImg, quality, outputFormat).src;
 }

上传图片

拿到压缩图片的的 base64 代码后，你可以把它当做一个字符串或者走 binary 进行上传。代码详情参考: https://github.com/Vanthink-UED/core-image-xhr/blob/master/index.js

这里你们可以自己构造 ifrmae 或者 xhr 的上传。

完整代码参考

扩展阅读

• https://developer.mozilla.org/en/docs/Web/API/FileReader

• https://github.com/JackPu/J-I-C

• http://vanthink-ued.github.io/vue-core-image-upload/index.html#/