Vue2 | Vant uploader实现上传文件和图片-编程知识

需求：

实现图片和文件的上传，单个图片超过1M则压缩，全部文件加起来不得超过10M。

效果：

1. html

<van-form ref="form"><van-field name="uploader" label="佐证材料" required><template #input><van-uploaderv-model="files"multipleaccept="":before-read="beforeRead":after-read="afterRead"@delete="deleteImg"/></template></van-field>
</van-form>

2. js：

    data() {return {files: [],fileList: [], // 已上传的图片fileIds: [], // 佐证材料文件id，上传成功之后返回的数据uploadfile: {type: '',name: ''}, // 上传单图的情况uploadfiles: [], // 上传多图的情况}},methods: {// 文件读取前触发beforeRead(e) {if (e.size > 10 * 1024 * 1024) {this.$toast.fail('文件大小不能超过10M')return false}return true},// 文件读取完成后触发afterRead(file) {if (file.length > 0) {// 多个上传file.map((item, index) => {this.uploadfiles.push({name: item.file.name,type: item.file.type})this.files[index].status = 'uploading'this.files[index].message = '上传中...'this.imgPreview(file[index].file, index)})} else {// 单个上传this.uploadfile.name = file.file.name // 获取文件名this.uploadfile.type = file.file.type // 获取类型this.files[this.files.length - 1].status = 'uploading'this.files[this.files.length - 1].message = '上传中...'// console.log('绑定的文件', this.files)this.imgPreview(file.file)}},// 删除文件deleteImg(file) {// 匹配fileList的项的fileName，相同的话把filesId对应删除this.fileList.map((item, index) => {if (item.file.name == file.file.name) {this.fileList.splice(index, 1)this.fileIds.splice(index, 1)}})},// 处理文件async imgPreview(file, index) {const self = this// 看支持不支持FileReaderif (!file || !window.FileReader) returnif (/^image/.test(file.type)) {// 创建一个readerconst reader = new FileReader()// 将图片转成 base64 格式reader.readAsDataURL(file)// 读取成功后的回调reader.onloadend = function () {const result = this.resultconst img = new Image()img.src = result// 判断图片是否小于1M,是就直接上传，反之压缩图片if (this.result.length <= 1024 * 1024) {// 上传图片self.postImg(this.result, index)} else {img.onload = function () {const data = self.compress(img)// 上传图片self.postImg(data, index)}}}} else {// 其他格式的文件const formData = new window.FormData()formData.append('file', file)// 计算现在所有图片的大小，如果加上该文件超过10M则不可上传let totalSize = 0this.fileList.map(item => {totalSize += Number(item.file.size)})let size = totalSize + file.sizeif (size > 10 * 1024 * 1024) {this.$toast.fail('当前上传附件超过最大内存10M！')return}const res = await businessUpload(formData)if (res.code === 200) {this.$toast.success('文件已上传')this.fileIds.push(res.fileId)this.fileList.push({id: res.fileId,file: file})if (index == undefined) {this.files[this.files.length - 1].status = 'done'this.files[this.files.length - 1].message = '上传成功'} else {this.files[index].status = 'done'this.files[index].message = '上传成功'}} else {this.$toast.fail('文件上传失败')if (index == undefined) {this.files[this.files.length - 1].status = 'failed'this.files[this.files.length - 1].message = '上传失败'} else {this.files[index].status = 'failed'this.files[index].message = '上传失败'}}}},// 压缩图片compress(img, Orientation) {const canvas = document.createElement('canvas')const ctx = canvas.getContext('2d')// 瓦片canvasconst tCanvas = document.createElement('canvas')const tctx = tCanvas.getContext('2d')// let initSize = img.src.length;let width = img.widthlet height = img.height// 如果图片大于四百万像素，计算压缩比并将大小压至400万以下let ratioif ((ratio = (width * height) / 4000000) > 1) {// console.log("大于400万像素");ratio = Math.sqrt(ratio)width /= ratioheight /= ratio} else {ratio = 1}canvas.width = widthcanvas.height = height// 铺底色ctx.fillStyle = '#fff'ctx.fillRect(0, 0, canvas.width, canvas.height)// 如果图片像素大于100万则使用瓦片绘制let countif ((count = (width * height) / 1000000) > 1) {// console.log("超过100W像素");count = ~~(Math.sqrt(count) + 1) // 计算要分成多少块瓦片// 计算每块瓦片的宽和高const nw = ~~(width / count)const nh = ~~(height / count)tCanvas.width = nwtCanvas.height = nhfor (let i = 0; i < count; i++) {for (let j = 0; j < count; j++) {tctx.drawImage(img, i * nw * ratio, j * nh * ratio, nw * ratio, nh * ratio, 0, 0, nw, nh)ctx.drawImage(tCanvas, i * nw, j * nh, nw, nh)}}} else {ctx.drawImage(img, 0, 0, width, height)}// 进行最小压缩const ndata = canvas.toDataURL('image/jpeg', 0.4)tCanvas.width = tCanvas.height = canvas.width = canvas.height = 0return ndata},// 提交图片到后端async postImg(base64, index) {const file = this.dataURLtoFile(base64, index)const formData = new window.FormData()formData.append('file', file)// 计算现在所有图片的大小，如果加上该文件超过10M则不可上传let totalSize = 0this.fileList.map(item => {totalSize += Number(item.file.size)})let size = totalSize + file.sizeif (size > 10 * 1024 * 1024) {this.$toast.fail('当前上传附件超过最大内存10M！')return}const res = await businessUpload(formData)if (res.code === 200) {this.$toast.success('图片已上传')this.fileIds.push(res.fileId)this.fileList.push({id: res.fileId,file: file})if (index == undefined) {this.files[this.files.length - 1].status = 'done'this.files[this.files.length - 1].message = '上传成功'} else {this.files[index].status = 'done'this.files[index].message = '上传成功'}} else {this.$toast.fail('图片上传失败')if (index == undefined) {this.files[this.files.length - 1].status = 'failed'this.files[this.files.length - 1].message = '上传失败'} else {this.files[index].status = 'failed'this.files[index].message = '上传失败'}}},// 将base64转换为文件dataURLtoFile(dataurl, index) {var arr = dataurl.split(',')var bstr = atob(arr[1])var n = bstr.lengthvar u8arr = new Uint8Array(n)while (n--) {u8arr[n] = bstr.charCodeAt(n)}if (index == undefined) {// 单图上传return new File([u8arr], this.uploadfile.name, {type: this.uploadfile.type})} else {// 多图上传return new File([u8arr], this.uploadfiles[index].name, {type: this.uploadfiles[index].type})}}}