打赏

js前端本地客户端压缩图片后再上传

from;https://github.com/think2011/localResizeIMG

lrz.js

npm install lrz

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
//上传文件
    PostFile: function (url, formData) {
        var instance = axios.create({
            timeout: "10000",
            headers: {
                "userid": getCookie("userId"),
                "corpid": getCookie("corpId"),
                "Content-Type": "multipart/form-data"
            }
        });
        instance.interceptors.response.use(function (response) {
          console.log(JSON.stringify(response.data), response.headers.errcode)
          if (JSON.stringify(response.headers) == "{}") {
            vueObj.$children[0].showToast({ message: "上传失败,文件超过6M或网速较慢", timeout: 2000 });
            return Promise.reject(response);
        } else {
            return response;
        }
 
      }, function (error) {
 
          if (error.response.status == 429 ) {//超时
              vueObj.$children[0].showToast({ message: "系统繁忙,请稍后再试!", timeout: 2000 });
          }
 
          if (error.code == "ECONNABORTED" || error.message.indexOf('timeout') > -1 || error.message == 'Network Error' ) {//超时
              vueObj.$children[0].showToast({ message: "请求数据超时,请稍后再试!", timeout: 2000 });
          }
 
          if (error.response && error.response.status == 500) {
              if (error.response.headers.errcode > 1000 || ['107', '109', '101', '102', '108', '103', '105'].indexOf(error.response.headers.errcode) != -1) {
                  vueObj.$children[0].showToast({ message: decodeURIComponent(error.response.headers.errmsg).replace(new RegExp("\\+", "g"), " "), timeout: 2000 });
              }
 
          }
          return Promise.reject(error);
      });
        console.log(1111)
        console.log(formData.get("file"))
        return lrz(formData.get("file"), {
            quality: 0.7    //自定义使用压缩方式
        })
            .then(function(rst) {
                console.log(rst)
                console.log(222)
                var file = new File([rst.file], rst.origin.name, {type: rst.origin.type});
                formData.set("file",file);
                return instance.post(url, formData);
            })
            .catch(function(error) {
                //失败时执行
                return Promise.reject(error);
            })
            .always(function() {
                //不管成功或失败,都会执行
            });
 
 
        //return instance.post(url, formData);
    },

  

posted @   刘奇云  阅读(583)  评论(0编辑  收藏  举报
编辑推荐:
· 智能桌面机器人:用.NET IoT库控制舵机并多方法播放表情
· Linux glibc自带哈希表的用例及性能测试
· 深入理解 Mybatis 分库分表执行原理
· 如何打造一个高并发系统?
· .NET Core GC压缩(compact_phase)底层原理浅谈
阅读排行:
· 开发者新选择:用DeepSeek实现Cursor级智能编程的免费方案
· Tinyfox 发生重大改版
· 独立开发经验谈:如何通过 Docker 让潜在客户快速体验你的系统
· 小米CR6606,CR6608,CR6609 启用SSH和刷入OpenWRT 23.05.5
· 近期最值得关注的AI技术报告与Agent综述!
点击右上角即可分享
微信分享提示