JavaScript

前端下载和压缩图片

作者自由如风

下载图片

前端使用<a href="xxx"></a>标签形式下载文件时，如果文件是图片、TXT文档、PDF等浏览器可以直接预览的内容时，浏览器会直接预览展示，而非下载文件。

window.open()、<a>标签加download属性等方法均无效

解决方法
export function download(downUrl, name = new Date().valueOf().toString()) {//下载地址和名字（时间戳）
    let request = new XMLHttpRequest();
    request.responseType = "blob"; //定义响应类型
    request.open("GET", downUrl);
    request.onload = function () {
        let url = window.URL.createObjectURL(this.response);
        let a = document.createElement("a");
        document.body.appendChild(a);
        a.href = url;
        a.download = name
        a.click();
    }
    request.send();
}

压缩图片

如果你需要压缩图片，可以关注 image-conversion ,配合 element plus 使用起来很简单

你只需要向下面这样做，就可以在上传之前，将图片压缩成 1000kb。

/**
 *
 * @param {UploadRawFile} rawFile
 * @returns {Promise<unknown>}
 */
beforeUpload(rawFile) {
  return compressAccurately(rawFile, 1000)
}

beforeUpload 函数是监听了 el-upload 组件的 before-upload 事件。

另外，这个函数在 2.2.1 版本有bug，我测试能用的版本是 2.2.5，点击这里 在github上查看相关问题

类似文章