前端圖片壓縮後，文件流上傳

 

直接貼部分代碼了

　　使用的是vantUI框架，不過沒有關係，都是對文件流進行判斷壓縮的。按需求改造一下就OK了

<template>
  <div class="page_publish">
    <div class="bg_box">

      <div class="form_box">
        <div class="con">
          <div class="file_box">
            <van-uploader
              :before-read="beforeRead"
              :after-read="afterRead"
              v-model="fileList"
              multiple
              :max-count="3"
            >
              <div class="upload_btn flex flex-v flex-align-center flex-pack-center">
                <img src="../assets/imgs/icon_camaro.png" class="icon" />
                <p class="num" v-if="fileList.length==0">添加圖片</p>
                <p class="num" v-else>({{fileList.length}}/3)</p>
              </div>
            </van-uploader>
          </div>
          <p class="limit_txt">(限20-200字)</p>
        </div>

      </div>
    </div>
  </div>
</template>
<script>
import { checkLogin } from "../assets/js/util.js";
import { imgUpload, addStory } from "../http/api.js";
import urlConfig from "../http/env.js";

import Vue from "vue";
import {
  Button,
  Toast,
  Dialog,
  Loading,
  ImagePreview,
  Uploader,
  Divider
} from "vant";
Vue.use(Toast, ImagePreview);

export default {
  data() {
    return {
      formData: {
        story: "果圖片 URL 中不包含類型信息，能夠添加 isImage 標記來聲明果圖片 URL 中不包含類型信息，能夠添加 isImage 標記來聲明",
        name: "ss",
        phone: "13344443333",
        images: ""
      },
      dialogSubmit: false, //確認彈框
      fileList: [
        // Uploader 根據文件後綴來判斷是否爲圖片文件
        // 若是圖片 URL 中不包含類型信息，能夠添加 isImage 標記來聲明
      ]
    };
  },
  mounted() {
  },
  components: {
    [Uploader.name]: Uploader,
    [Divider.name]: Divider,
    [Loading.name]: Loading
  },
  methods: {
    // 上傳圖片
    unLoadImg() {
      let _this = this;
      let fileList = this.fileList;
      return new Promise(function(resolve, reject) {
        if (fileList.length == 0) {
          //沒有圖片
          resolve("");
        } else {
          // 有圖片，上傳
          let formData = new FormData();
          let files = fileList.forEach(function(item, i) {
            console.log(_this.convertBase64UrlToBlob(item.content));
            // formData.append('images',item.file)  //不壓縮上傳
            formData.append(
              "images",
              _this.convertBase64UrlToBlob(item.content),
              "file_" + Date.parse(new Date()) + ".jpg"
            ); // 文件對象
          });
          imgUpload(formData)
            .then(res => {
              if (res.code == "PY0000") {
                resolve(res.response.imageUrl);
              } else {
                reject(res.msg);
              }
            })
            .catch(err => {
              reject("圖片上傳失敗");
            });
        }
      });
    },
    /**
     * 將以base64的圖片url數據轉換爲Blob
     *            用url方式表示的base64圖片數據
     */
    convertBase64UrlToBlob(urlData) {
      var arr = urlData.split(","),
        mime = arr[0].match(/:(.*?);/)[1],
        bstr = atob(arr[1]),
        n = bstr.length,
        u8arr = new Uint8Array(n);
      while (n--) {
        u8arr[n] = bstr.charCodeAt(n);
      };
      return new Blob([u8arr], { type: mime });
    },
    // 返回布爾值
    beforeRead(file) {
      // console.log(file);
      if (file.type !== "image/jpeg" && file.type !== "image/png") {
        Toast("請上傳 jpg/png 格式圖片");
        return false;
      } else if (file.size > 1024 * 1024 * 4) {
        Toast("圖片大小不可超過4M！");
        return false;
      };
      return true;
    },
    afterRead(file) {
      let _this = this;
      // 若是圖片大小超過2M，則先壓縮
      if(file.file.size > 1024 * 1024 * 2){
        var ready = new FileReader();
        /*開始讀取指定的Blob對象或File對象中的內容. 當讀取操做完成時,readyState屬性的值會成爲DONE,若是設置了onloadend事件處理程序,則調用之.同時,result屬性中將包含一個data: URL格式的字符串以表示所讀取文件的內容.*/
        ready.readAsDataURL(file.file);
        ready.onload = function() {
          var re = this.result;
          _this.canvasDataURL(re);
        };
      }
    },
    // 壓縮圖片
    canvasDataURL(path, obj, callback) {
      let _this = this;
      var img = new Image();
      img.src = path;
      img.onload = function() {
        var that = this;
        // 默認按比例壓縮
        var w = that.width,
          h = that.height,
          scale = w / h;
        w = w;
        h = w / scale;
        var quality = 0.5; // 默認圖片質量爲0.5
        //生成canvas
        var canvas = document.createElement("canvas");
        var ctx = canvas.getContext("2d");
        // 建立屬性節點
        var anw = document.createAttribute("width");
        anw.nodeValue = w;
        var anh = document.createAttribute("height");
        anh.nodeValue = h;
        canvas.setAttributeNode(anw);
        canvas.setAttributeNode(anh);
        ctx.drawImage(that, 0, 0, w, h);
        // quality值越小，所繪製出的圖像越模糊
        var base64 = canvas.toDataURL("image/jpeg", quality);
        // 回調函數返回base64的值
        let length = _this.fileList.length;
        _this.fileList[length-1].content = base64;
      };
    },
    
  }
};
</script>