最近项目要求可以上传更换图片，由于手机中的图片普遍比较大，所以要经过压缩之后实现，下面是实现的代码
html
长按事件触发弹框
<van-action-sheet v-model="showBottom" :actions="actions" bind:close="onClose" @select="onSelect" @close="onClose" />
上传input-div
<!-- 添加新图 --> <span> <input id="file" type="file" multiple="multiple" @change="changeAdd($event)" v-if="clearShow" hidden /> </span>
script
长按按钮
/** * 照片组件-长按-选择 * @author 苑仁杰 */ onSelect(item) { var name = item.name; if (name == "在线搜图") { this.searchImage(); } if (name == "添加新图") { this.upload(); } this.showBottom = false; },
点击一个按钮触发上传div的点击事件
/** * 长按-添加新图 * @Date: 2019年11月4日15:26:11 * @author 苑仁杰 */ upload() { const mybutton = document.getElementById("file"); mybutton.click(); },
触发上传图片方法
/** * 上传图片 */ changeAdd(e) { console.log(e); var vm = this; this.deviceArray = []; let deviceFile = e.target.files; let file = deviceFile[0]; vm.compress(e, file); },
图片压缩
// 对图片进行压缩 compress(e, file) { var vm = this; vm.fileName = file.name; let reader = new FileReader(); reader.readAsDataURL(file); reader.onload = function(e) { let image = new Image(); //新建一个img标签（还没嵌入DOM节点) image.src = e.target.result; image.onload = function() { let canvas = document.createElement("canvas"), context = canvas.getContext("2d"), imageWidth = image.width / 2, //压缩后图片的大小 imageHeight = image.height / 2, data = ""; canvas.width = imageWidth; canvas.height = imageHeight; context.drawImage(image, 0, 0, imageWidth, imageHeight); data = canvas.toDataURL("image/jpeg"); var arr = data.split(","), mime = arr[0].match(/:(.*?);/)[1], bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n); while (n--) { u8arr[n] = bstr.charCodeAt(n); } let filePress = new File([u8arr], vm.fileName, { type: mime }); vm.fileData = filePress; vm.beforeRead(vm.fileData); }; }; },
上传之前判断格式大小，然后发送请求
/** * 上传图片之前判断图片是否符合条件 */ beforeRead(file) { var vm = this; if (file.type !== "image/jpeg" && file.type !== "image/png") { this.$toast("请上传 jpg/png 格式图片"); vm.isUpload = false; } let isLt1M = file.size / 1024 / 1024 <= 1; if (!isLt1M) { this.$toast("图片大小1M以内"); vm.isUpload = false; } if (vm.isUpload) { let formData = new FormData(); formData.append("multfile", vm.fileData); vm.clearShow = false; let config = { headers: { "Content-Type": "multipart/form-data" } }; vm.$axios .post("word/upLoad" + "?word=" + vm.word, formData, config) .then( res => { vm.wordPicture[vm.whichIndex] = []; vm.wordPicture[vm.whichIndex] = res.data.data; vm.fileData = null; vm.clearShow = true; }, () => { vm.clearShow = true; } ); } },
