<el-form-item label="标题图片:" prop="img">
<el-upload ref="upload" action=""
:show-file-list="true"
:file-list="mainImg"
list-type="picture-card"
:auto-upload="false" :limit="3" multiple
accept="image/jpg,image/jpeg,image/png"
:on-change="handleUpload"
:on-remove="handleRemove"
:on-exceed="handleMcount" /> </el-form-item>
先看看代码 . 我这设置的是手动上传
注意 : 如果是手动上传的话 , before-upload就不会生效 , 我们需要把限制图片格式跟大小的放在 on-change中
handleUpload (file, fileList) {
const suffix = file.raw.type === 'image/jpg' || file.raw.type === 'image/png' || file.raw.type === 'image/jpeg'
//限制文件上传类型
if (!suffix) {
this.$message.error("上传图片只能是 png,jpg,jpeg 格式!");
return false
}
// 更改name
this.mainImgList = fileList.map((item) => {
const timeStamp = new Date() - 0
// 更改图片中的name属性
let f = new File([item.raw], `${timeStamp}_${item.raw.name}.webp`);
f.uid = item.raw.uid; // new File 没有uid属性,会导致组件底层报错,这里手动加上
return item.raw = f;
})
this.mainImg = fileList
},
这里只做了图片大小的限制
因为我支持多张图片一起上传 , 所以这里使用了map
// 这里是上传图片按钮
this.mainImgList.map(async (item) => {
console.log(item)
// getWebpFileByImageFile 这个方法就是改变type
const arr = await this.getWebpFileByImageFile(item)
console.log(arr)
const formMimg = new FormData()
formMimg.append('fileArray', arr)
// 调用上传图片的接口
const mainImg = await uploadFile(formMimg)
})
这是item
看看更改之后的 , 很明显size也减小了不少
这个是改变图片中的type值
async getWebpFileByImageFile (imageFile) {
const that = this
return new Promise((resolve, reject) => {
const imageFileReader = new FileReader();
imageFileReader.onload = function (e) {
const image = new Image();
image.src = e.target.result;
image.onload = function () {
const canvas = document.createElement("canvas");
canvas.width = image.width;
canvas.height = image.height;
canvas.getContext("2d").drawImage(image, 0, 0);
resolve(
that.base64ToFile(canvas.toDataURL("image/webp"), imageFile.name)
)
}
}
imageFileReader.readAsDataURL(imageFile)
});
},
base64ToFile (base64, fileName) {
let arr = base64.split(','),
type = arr[0].match(/:(.*?);/)[1],
bstr = atob(arr[1]),
n = bstr.length,
u8arr = new Uint8Array(n);
while (n--) {
u8arr[n] = bstr.charCodeAt(n);
}
return new File([u8arr], fileName, {
type
});
},