直接贴部分代码了
使用的是vantUI框架,不过没有关系,都是对文件流进行判断压缩的。按需求改造一下就OK了
<template> <div class="page_publish"> <div class="bg_box"> <div class="form_box"> <div class="con"> <div class="file_box"> <van-uploader :before-read="beforeRead" :after-read="afterRead" v-model="fileList" multiple :max-count="3" > <div class="upload_btn flex flex-v flex-align-center flex-pack-center"> <img src="../assets/imgs/icon_camaro.png" class="icon" /> <p class="num" v-if="fileList.length==0">添加图片</p> <p class="num" v-else>({{fileList.length}}/3)</p> </div> </van-uploader> </div> <p class="limit_txt">(限20-200字)</p> </div> </div> </div> </div> </template> <script> import { checkLogin } from "../assets/js/util.js"; import { imgUpload, addStory } from "../http/api.js"; import urlConfig from "../http/env.js"; import Vue from "vue"; import { Button, Toast, Dialog, Loading, ImagePreview, Uploader, Divider } from "vant"; Vue.use(Toast, ImagePreview); export default { data() { return { formData: { story: "果图片 URL 中不包含类型信息,可以添加 isImage 标记来声明果图片 URL 中不包含类型信息,可以添加 isImage 标记来声明", name: "ss", phone: "13344443333", images: "" }, dialogSubmit: false, //确认弹框 fileList: [ // Uploader 根据文件后缀来判断是否为图片文件 // 如果图片 URL 中不包含类型信息,可以添加 isImage 标记来声明 ] }; }, mounted() { }, components: { [Uploader.name]: Uploader, [Divider.name]: Divider, [Loading.name]: Loading }, methods: { // 上传图片 unLoadImg() { let _this = this; let fileList = this.fileList; return new Promise(function(resolve, reject) { if (fileList.length == 0) { //没有图片 resolve(""); } else { // 有图片,上传 let formData = new FormData(); let files = fileList.forEach(function(item, i) { console.log(_this.convertBase64UrlToBlob(item.content)); // formData.append('images',item.file) //不压缩上传 formData.append( "images", _this.convertBase64UrlToBlob(item.content), "file_" + Date.parse(new Date()) + ".jpg" ); // 文件对象 }); imgUpload(formData) .then(res => { if (res.code == "PY0000") { resolve(res.response.imageUrl); } else { reject(res.msg); } }) .catch(err => { reject("图片上传失败"); }); } }); }, /** * 将以base64的图片url数据转换为Blob * 用url方式表示的base64图片数据 */ convertBase64UrlToBlob(urlData) { var arr = urlData.split(","), mime = arr[0].match(/:(.*?);/)[1], bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n); while (n--) { u8arr[n] = bstr.charCodeAt(n); }; return new Blob([u8arr], { type: mime }); }, // 返回布尔值 beforeRead(file) { // console.log(file); if (file.type !== "image/jpeg" && file.type !== "image/png") { Toast("请上传 jpg/png 格式图片"); return false; } else if (file.size > 1024 * 1024 * 4) { Toast("图片大小不可超过4M!"); return false; }; return true; }, afterRead(file) { let _this = this; // 如果图片大小超过2M,则先压缩 if(file.file.size > 1024 * 1024 * 2){ var ready = new FileReader(); /*开始读取指定的Blob对象或File对象中的内容. 当读取操作完成时,readyState属性的值会成为DONE,如果设置了onloadend事件处理程序,则调用之.同时,result属性中将包含一个data: URL格式的字符串以表示所读取文件的内容.*/ ready.readAsDataURL(file.file); ready.onload = function() { var re = this.result; _this.canvasDataURL(re); }; } }, // 压缩图片 canvasDataURL(path, obj, callback) { let _this = this; var img = new Image(); img.src = path; img.onload = function() { var that = this; // 默认按比例压缩 var w = that.width, h = that.height, scale = w / h; w = w; h = w / scale; var quality = 0.5; // 默认图片质量为0.5 //生成canvas var canvas = document.createElement("canvas"); var ctx = canvas.getContext("2d"); // 创建属性节点 var anw = document.createAttribute("width"); anw.nodeValue = w; var anh = document.createAttribute("height"); anh.nodeValue = h; canvas.setAttributeNode(anw); canvas.setAttributeNode(anh); ctx.drawImage(that, 0, 0, w, h); // quality值越小,所绘制出的图像越模糊 var base64 = canvas.toDataURL("image/jpeg", quality); // 回调函数返回base64的值 let length = _this.fileList.length; _this.fileList[length-1].content = base64; }; }, } }; </script>