图片压缩

src/components/pages/CanteenManagement/ClassificationOfDishes.vue

@@ -171,7 +171,6 @@ export default {
     saveProductCategory () {
       let that = this
       let reg = '^[0-9]*$'
-      debugger
       if (!/^[0-9]*$/.test(this.sort)) {
         this.$message.error('排序值为数字')
         return false

src/components/pages/CanteenManagement/ConsumptionOrder.vue

@@ -140,7 +140,6 @@ export default {
     choosePeople () {
       const _that = this
       config.ddready('ddchooseOne').then((res) => {
-        debugger
         this.searchSource.UserMessage = res[0]
         _that.queryOrderList()
       })

src/components/pages/CanteenManagement/MenuManagement.vue

@@ -94,6 +94,86 @@ function getBase64 (img, callback) {
   reader.addEventListener('load', () => callback(reader.result))
   reader.readAsDataURL(img)
 }
+function dataURLtoFile(dataurl, filename) {
+  var arr = dataurl.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 File([u8arr], filename, {type:mime});
+}
+function changeFileToBaseURL(file,fn){
+// 创建读取文件对象
+  var fileReader = new FileReader();
+  //如果file没定义返回null
+  if(file == undefined) return fn(null);
+  // 读取file文件,得到的结果为base64位
+  fileReader.readAsDataURL(file);
+  fileReader.onload = function(){
+    // 把读取到的base64
+    var imgBase64Data = this.result;
+    fn(imgBase64Data);
+  }
+}
+function pressImg(param){
+  //如果没有回调函数就不执行
+  if(param && param.succ){
+    //如果file没定义返回null
+    if(param.file == undefined) return param.succ(null);
+    //给参数附初始值
+    param.targetSize = param.hasOwnProperty("targetSize") ? param.targetSize : -1;
+    param.width = param.hasOwnProperty("width") ? param.width : -1;
+    param.fileName = param.hasOwnProperty("fileName") ? param.fileName: "image";
+    param.quality = param.hasOwnProperty("quality") ? param.quality : 0.92;
+    var _this = this;
+    // 得到文件类型
+    var fileType = param.file.type;
+    // console.log(fileType) //image/jpeg
+    if(fileType.indexOf("image") == -1){
+      console.log('请选择图片文件^_^');
+      return param.succ(null);
+    }
+    //如果当前size比目标size小，直接输出
+    var size = param.file.size;
+    if(param.targetSize > size){
+      return param.succ(param.file);
+    }
+    // 读取file文件,得到的结果为base64位
+    changeFileToBaseURL(param.file,function(base64){
+      if(base64){
+        var image = new Image();
+        image.src = base64;
+        image.onload = function(){
+          // 获得长宽比例
+          var scale = this.width / this.height;
+          // console.log(scale);
+          //创建一个canvas
+          var canvas = document.createElement('canvas');
+          //获取上下文
+          var context = canvas.getContext('2d');
+          //获取压缩后的图片宽度,如果width为-1，默认原图宽度
+          canvas.width = param.width == -1 ? this.width : param.width;
+          //获取压缩后的图片高度,如果width为-1，默认原图高度
+          canvas.height = param.width == -1 ? this.height : parseInt(param.width / scale);
+          //把图片绘制到canvas上面
+          context.drawImage(image, 0, 0, canvas.width, canvas.height);
+          //压缩图片，获取到新的base64Url
+          var newImageData = canvas.toDataURL(fileType,param.quality);
+          //将base64转化成文件流
+          var resultFile = dataURLtoFile(newImageData,param.fileName);
+          //判断如果targetSize有限制且压缩后的图片大小比目标大小大，就弹出错误
+          if(param.targetSize != -1 && param.targetSize < resultFile.size){
+            console.log("图片上传尺寸太大，请重新上传^_^");
+            param.succ(null);
+          }else{
+            //返回文件流
+            param.succ(resultFile);
+          }
+        }
+      }
+    });
+  }
+}
 export default {
   name: 'menuManagement',
   data () {
@@ -255,12 +335,23 @@ export default {
     },
     customRequest () {
       let that = this
-      let file = this.fileList[0]
-      let namelast = '.' + file.name.replace(/.+\./, '')
-      let g_object_name = this.random_string(10) + namelast
-      $http.post('/mingpay/v1/file/getOSSUploadSignature').then((res) => {
-        var data = that.doData(res.data.data, file, g_object_name)
-        that.doUpLoad(res.data.data.host, data)
+      pressImg({
+        file: this.fileList[0],
+        targetSize: 50 * 1024,
+        quality: 0.5,
+        width: 180,
+        succ:function(resultFile){
+            //如果不是null就是压缩成功
+            if(resultFile){
+              let file = resultFile
+              let namelast = '.' + file.name.replace(/.+\./, '')
+              let g_object_name = that.random_string(10) + namelast
+              $http.post('/mingpay/v1/file/getOSSUploadSignature').then((res) => {
+                var data = that.doData(res.data.data, file, g_object_name)
+                that.doUpLoad(res.data.data.host, data)
+              })
+            }
+        }
       })
     },
     saveProduct () {
@@ -357,6 +448,7 @@ export default {
       }
       if (isJPG && isLt2M) {
         this.fileList = [file]
+        this.imageUrl = ''
         return true
       } else {
         return false
@@ -383,6 +475,7 @@ export default {
     },
     // 文件oss上传请求
     doUpLoad (url, data) {
+      this.loading = true
       var that = this
       return new Promise((resolve, reject) => {
         let aliAxios = axios.create()

src/router.js

@@ -141,7 +141,7 @@ export default new Router({
     },
     {
       path: '/*',
-      redirect: '/dashboard'
+      redirect: '/accountManagement'
     }
   ]
 })