【Javascript】前端对文件进行md5计算再上传，以节省OSS云端存储空间

最新推荐文章于 2025-09-08 14:34:40 发布

原创

最新推荐文章于 2025-09-08 14:34:40 发布 · 2.7k 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #javascript #开发语言

文章介绍了如何在前端利用browser-md5-file计算文件的MD5值，然后结合el-upload组件上传图片到阿里云OSS存储服务。过程中涉及到文件预处理、获取OSS签名以及使用formData进行文件上传。

安装插件 browser-md5-file

browser-md5-file 用于计算文件md5，文档介绍较少，看看就能使用↓
在这里插入图片描述

使用例子

比如我用 el-upload 组件上传图片

 <el-upload
    action=""
    class="upload-box"
    :show-file-list="false"
    accept=".jpg,.jpeg,.png"
    :http-request="(rawFile:any) => uploadFileToOss(rawFile,index)"
  >
    <svg-icon name="upload" class="icon"></svg-icon>
  </el-upload>

对文件进行包装（这个主要看个人项目实际需要）

const uploadFileToOss = async (rawFile: any, index: number) => {
   
   
  const data = await uploadOss({
   
   
    name: rawFile.file.name,
    file: rawFile.file,
  });
  propsList.value