七牛云能否自动压缩上传的图片？

七牛云可不可以我上传了照片上去过后自动帮我做一个size的压缩

还没！求救
现在问题是微信小程序上传图片压缩的时候不知道怎么办。后端懒得写

阅读 572

支持的

一、七牛云图片处理功能
七牛云的图片处理功能非常强大，它允许开发者对存储在七牛云上的图片进行各种处理，包括压缩。开发者可以通过编辑图片的URL来添加处理参数，从而实现图片的自动压缩。

二、JavaScript SDK图片压缩
七牛云还提供了JavaScript SDK，允许开发者在客户端进行图片压缩。这种方式主要依赖于WebAssembly技术在浏览器中运行，无需服务器参与，即可实现高效的图片压缩。客户端处理可以减少服务器负载，提高响应速度，并且用户可以在上传前预览压缩效果。

三、图片压缩的具体实现
质量压缩：通过降低图片质量来减小文件大小。这种方式在七牛云的图片处理URL参数和JavaScript SDK中都可以实现。
尺寸压缩：调整图片分辨率以达到压缩目的。这同样可以通过编辑图片的URL参数或使用JavaScript SDK来实现。
格式转换：将图片转换为更高效的格式，如WebP。七牛云的图片处理功能支持多种图片格式的转换，从而帮助开发者进一步优化图片大小。

七牛云图片压缩完整解决方案

第一步：七牛云配置（后端）

1.1 获取七牛云密钥

登录七牛云控制台
获取 AccessKey 和 SecretKey
创建存储空间（Bucket）

1.2 后端上传接口（Node.js示例）

const qiniu = require('qiniu');

// 配置七牛云
const accessKey = 'your_access_key';
const secretKey = 'your_secret_key';
const bucket = 'your_bucket_name';

const mac = new qiniu.auth.digest.Mac(accessKey, secretKey);
const config = new qiniu.conf.Config();
const bucketManager = new qiniu.rs.BucketManager(mac, config);

// 生成上传token
function getUploadToken() {
  const options = {
    scope: bucket,
    expires: 7200, // 2小时有效期
  };
  const putPolicy = new qiniu.rs.PutPolicy(options);
  return putPolicy.uploadToken(mac);
}

// 上传接口
app.post('/api/upload', (req, res) => {
  const token = getUploadToken();
  res.json({
    code: 200,
    data: {
      token: token,
      domain: 'https://your-bucket.qiniucdn.com' // 你的CDN域名
    }
  });
});

第二步：小程序端实现

2.1 完整的小程序上传代码

// pages/upload/upload.js
Page({
  data: {
    imageUrl: ''
  },

  // 选择并上传图片
  chooseAndUploadImage() {
    const that = this;
    
    // 1. 先获取上传token
    wx.request({
      url: 'https://your-api.com/api/upload',
      method: 'POST',
      success: function(tokenRes) {
        if (tokenRes.data.code === 200) {
          const uploadToken = tokenRes.data.data.token;
          const domain = tokenRes.data.data.domain;
          
          // 2. 选择图片
          wx.chooseMedia({
            count: 1,
            mediaType: ['image'],
            sourceType: ['album', 'camera'],
            success: function(chooseRes) {
              const tempFilePath = chooseRes.tempFiles[0].tempFilePath;
              
              // 3. 先压缩图片（可选，减少上传时间）
              wx.compressImage({
                src: tempFilePath,
                quality: 80,
                success: function(compressRes) {
                  // 4. 上传到七牛云
                  that.uploadToQiniu(compressRes.tempFilePath, uploadToken, domain);
                },
                fail: function() {
                  // 压缩失败就直接上传原图
                  that.uploadToQiniu(tempFilePath, uploadToken, domain);
                }
              });
            }
          });
        }
      }
    });
  },

  // 上传到七牛云
  uploadToQiniu(filePath, token, domain) {
    const that = this;
    const fileName = 'image_' + Date.now() + '.jpg';
    
    wx.uploadFile({
      url: 'https://upload.qiniup.com', // 七牛云上传域名
      filePath: filePath,
      name: 'file',
      formData: {
        token: token,
        key: fileName
      },
      success: function(uploadRes) {
        if (uploadRes.statusCode === 200) {
          // 5. 上传成功，构造图片URL
          const originalUrl = domain + '/' + fileName;
          
          // 6. 根据需要添加压缩参数
          const compressedUrl = that.getCompressedUrl(originalUrl, 'medium');
          
          that.setData({
            imageUrl: compressedUrl
          });
          
          wx.showToast({
            title: '上传成功',
            icon: 'success'
          });
        }
      },
      fail: function(error) {
        wx.showToast({
          title: '上传失败',
          icon: 'error'
        });
        console.error('上传失败：', error);
      }
    });
  },

  // 获取不同压缩级别的URL
  getCompressedUrl(originalUrl, size) {
    const compressParams = {
      'thumbnail': '?imageView2/2/w/150/h/150/q/60',    // 缩略图
      'small': '?imageView2/2/w/300/q/70',              // 小图
      'medium': '?imageView2/2/w/750/q/80',             // 中图
      'large': '?imageView2/2/w/1200/q/85',             // 大图
      'avatar': '?imageView2/2/w/100/h/100/q/75'        // 头像
    };
    
    return originalUrl + (compressParams[size] || compressParams['medium']);
  }
});

2.2 小程序页面文件

<!-- pages/upload/upload.wxml -->
<view class="container">
  <button bindtap="chooseAndUploadImage">选择并上传图片</button>
  
  <image wx:if="{{imageUrl}}" src="{{imageUrl}}" mode="aspectFit" class="uploaded-image"></image>
</view>

/* pages/upload/upload.wxss */
.container {
  padding: 20rpx;
}

.uploaded-image {
  width: 100%;
  height: 400rpx;
  margin-top: 20rpx;
}

第三步：实际使用中的URL处理

3.1 在不同场景使用不同压缩参数

// 工具函数：根据场景获取合适的图片URL
function getImageUrl(originalUrl, scene) {
  const baseUrl = originalUrl.split('?')[0]; // 去掉可能已存在的参数
  
  switch(scene) {
    case 'avatar':
      return baseUrl + '?imageView2/2/w/100/h/100/q/75';
    case 'list':
      return baseUrl + '?imageView2/2/w/300/q/70';
    case 'detail':
      return baseUrl + '?imageView2/2/w/750/q/85';
    case 'fullscreen':
      return baseUrl + '?imageView2/2/w/1200/q/90';
    default:
      return baseUrl + '?imageView2/2/w/750/q/80';
  }
}

// 使用示例
const originalUrl = 'https://your-bucket.qiniucdn.com/image123.jpg';
const avatarUrl = getImageUrl(originalUrl, 'avatar');
const listUrl = getImageUrl(originalUrl, 'list');

3.2 常用压缩参数对照表

场景          | 参数                                    | 说明
-------------|----------------------------------------|------------------
头像          | ?imageView2/2/w/100/h/100/q/75        | 100x100, 75%质量
列表缩略图     | ?imageView2/2/w/300/q/70              | 宽300px, 70%质量
详情页        | ?imageView2/2/w/750/q/85              | 宽750px, 85%质量
全屏查看      | ?imageView2/2/w/1200/q/90             | 宽1200px, 90%质量
超小缩略图    | ?imageView2/2/w/150/h/150/q/60        | 150x150, 60%质量

第四步：后端接口优化（可选）

4.1 后端直接返回压缩URL

// 后端返回图片信息时直接提供多种尺寸
app.get('/api/images/:id', (req, res) => {
  const imageId = req.params.id;
  const baseUrl = `https://your-bucket.qiniucdn.com/${imageId}.jpg`;
  
  res.json({
    code: 200,
    data: {
      original: baseUrl,
      thumbnail: baseUrl + '?imageView2/2/w/150/h/150/q/60',
      small: baseUrl + '?imageView2/2/w/300/q/70',
      medium: baseUrl + '?imageView2/2/w/750/q/80',
      large: baseUrl + '?imageView2/2/w/1200/q/85'
    }
  });
});

总结

后端只需要：配置七牛云上传，返回上传token
前端只需要：上传图片，在URL后加压缩参数
压缩完全由七牛云处理：无需后端写压缩逻辑
实时压缩：第一次访问时压缩，之后从CDN获取

七牛云能否自动压缩上传的图片？

七牛云图片压缩完整解决方案

第一步：七牛云配置（后端）

1.1 获取七牛云密钥

1.2 后端上传接口（Node.js示例）

第二步：小程序端实现

2.1 完整的小程序上传代码

2.2 小程序页面文件

第三步：实际使用中的URL处理

3.1 在不同场景使用不同压缩参数

3.2 常用压缩参数对照表

第四步：后端接口优化（可选）

4.1 后端直接返回压缩URL

总结

微信小程序如何让用户点击按钮一次就调出微信小程序内置的申请授权获取手机号的面板？

如何解决微信小程序input输入框弹出键盘时页面整体上移问题？

uniapp 微信小程序，如何跳转另一个非本人开的的小程序？

微信小程序多端应用（安卓App）为何加载的还是旧的1.png图片？

如何在Vue+Spring Boot中实现微信小程序查询管理员下用户信息并导出Excel？

微信支付v3接口微信小程序适用的nodejs包是什么呢？

微信小程序的多端应用模式编译的安卓App如何实现应用内更新（没有使用框架），需要调用哪些接口？