如何在.NET Core Web应用中使用TypeScript实现图片上传前尺寸调整

第一步：修改前端表单 #

给原有表单和文件选择框添加id标识，方便TS绑定事件，修改后代码如下：

<form method="post" id="uploadForm" class="md-form" enctype="multipart/form-data" asp-controller="FileUpload" asp-action="Index">
    <div class="form-group">
        <div class="col-md-12">
            <label for="imageFileInput">foto</label>
            <input type="file" id="imageFileInput" name="files" class="form-control-file" accept="image/*" required />
        </div>
    </div>
   
    <div class="form-group">
        <div class="col-md-12">
            <input class="btn btn-primary btn-md btn-bold form-control" type="submit" value="Upload" />
        </div>
    </div>
</form>

第二步：TypeScript核心实现代码 #

直接使用浏览器原生Canvas API实现尺寸调整，无需引入第三方依赖：

// 自定义调整参数，可根据业务需求修改
const MAX_WIDTH = 1200; // 调整后最大宽度
const MAX_HEIGHT = 1200; // 调整后最大高度
const IMAGE_QUALITY = 0.8; // 输出图片质量，取值范围0-1

// 存储处理后的图片文件
let processedFile: File | null = null;

const fileInput = document.getElementById('imageFileInput') as HTMLInputElement;
const uploadForm = document.getElementById('uploadForm') as HTMLFormElement;

// 监听文件选择事件，自动触发尺寸调整
fileInput.addEventListener('change', async (e) => {
  const originFile = fileInput.files?.[0];
  if (!originFile || !originFile.type.startsWith('image/')) return;
  processedFile = await resizeImage(originFile);
});

// 监听表单提交事件，替换为处理后的文件提交
uploadForm.addEventListener('submit', (e) => {
  e.preventDefault();
  if (!processedFile) {
    alert('请先选择有效图片文件');
    return;
  }

  const formData = new FormData();
  formData.append('files', processedFile, processedFile.name);
  
  // 提交逻辑与原表单完全兼容
  fetch(uploadForm.action, {
    method: uploadForm.method,
    body: formData
  }).then(res => {
    if (res.ok) {
      alert('上传成功');
      uploadForm.reset();
      processedFile = null;
      // 可补充上传成功后的跳转、刷新逻辑
    } else {
      alert('上传失败，请重试');
    }
  }).catch(err => {
    console.error('上传错误：', err);
    alert('上传出错，请检查网络');
  });
});

// 图片尺寸调整核心方法
function resizeImage(file: File): Promise<File> {
  return new Promise((resolve, reject) => {
    const img = new Image();
    img.src = URL.createObjectURL(file);

    img.onload = () => {
      // 等比例计算调整后的宽高，避免图片拉伸
      let width = img.width;
      let height = img.height;
      if (width > height) {
        if (width > MAX_WIDTH) {
          height = height * (MAX_WIDTH / width);
          width = MAX_WIDTH;
        }
      } else {
        if (height > MAX_HEIGHT) {
          width = width * (MAX_HEIGHT / height);
          height = MAX_HEIGHT;
        }
      }

      // 创建Canvas绘制调整后图片
      const canvas = document.createElement('canvas');
      canvas.width = width;
      canvas.height = height;
      const ctx = canvas.getContext('2d');
      if (!ctx) {
        reject(new Error('当前浏览器不支持Canvas API'));
        return;
      }
      ctx.drawImage(img, 0, 0, width, height);

      // 转换为Blob并封装为File对象
      canvas.toBlob((blob) => {
        if (!blob) {
          reject(new Error('图片转换失败'));
          return;
        }
        const resizedFile = new File([blob], file.name, {
          type: 'image/jpeg',
          lastModified: Date.now()
        });
        resolve(resizedFile);
      }, 'image/jpeg', IMAGE_QUALITY);
    };

    img.onerror = () => {
      reject(new Error('图片加载失败，请检查文件有效性'));
    };
  });
}

第三步：后端适配说明 #

原有.NET Core后端的FileUploadController的Index动作无需做任何修改，和原表单提交的请求格式完全兼容，可直接接收处理后的图片文件。

注意事项 #

• 如果需要保留PNG图片的透明背景，可把toBlob方法的输出格式改为image/png，同时移除画质参数即可
• 代码兼容所有现代浏览器，不支持IE系列浏览器
  内容的提问来源于stack exchange，提问作者Rene