1、 先安装 image-conversion 插件
npm i image-conversion --save
2、写一个公共的混入方法
import * as imageConversion from 'image-conversion';
export default {
data() {
return {
}
},
mounted() {
},
methods: {
compressorImg(file) {
return new Promise(resolve => {
imageConversion.compressAccurately(file, 100).then(res => {
console.log(res);
let files = new File([res], file.name, { type: file.type });
resolve(files)
})
});
},
},
computed: {
}
}
3、vue组件调用
<el-upload
ref="upload"
class="upload-demo"
action="#"
accept=".JPG,.JPEG,.PNG"
:http-request="beforeAvatarUpload2"
:show-file-list="false"
:limit="1"
drag
>
<i class="el-icon-upload"></i>
<div class="el-upload__text">
将文件拖到此处,或<em>点击上传</em>
</div>
<div class="el-upload__tip" slot="tip">
只能上传jpg/png图片,尺寸340*86px以内,不超过2MB
</div>
</el-upload>
import public_mixin from "@/utils/mixin/public_mixin";
export default {
mixins: [public_mixin],
data() {
return {
imageUrl: "",
uploadAction: "",
sendData: new FormData(),
};
},
methods: {
async beforeAvatarUpload2(file) {
const self = this;
let subFile = await this.compressorImg(file.file);
file.file = subFile;
this.imgchecked(file, 340, 86)
.then((res) => {
if (!res) {
self.$message.warning(`请上传 340*86 px 的图片!`);
self.$refs.upload.clearFiles();
return false;
} else {
self.beforeAvatarUpload(file, 2);
}
})
.catch((err) => {
console.log(err);
});
},
//判断尺寸方法
imgchecked(file, wdh, hgt) {
return new Promise((resolve, reject) => {
let reader = new FileReader();
reader.readAsDataURL(file.file); // 必须用file.raw
reader.onload = () => {
// 让页面中的img标签的src指向读取的路径
let img = new Image();
img.src = reader.result;
img.onload = () => {
if (img.width !== wdh || img.height != hgt) {
resolve(false);
} else {
resolve(true);
}
};
};
});
},
async beforeAvatarUpload(file, type) {
const isJPG = file.type === "image/jpeg" || file.type === "image/png";
const isLt2M = file.size / 1024 / 1024 < 2;
console.log(file);
if (!isJPG) {
this.$message.error("上传logo图片只能是 JPG或者 PNG 格式!");
return;
}
if (!isLt2M) {
this.$message.error("上传logo图片大小不能超过 2MB!");
return;
}
await this.uploadSectionFile(file, type);
return isJPG && isLt2M;
},
//服务器获取签名
async uploadSectionFile(file, type) {
let fileObj = file;
let response = await this.$post("X/UploadToken", {
filetype: "upload_image",
});
if (response.code == "10000") {
let json = response.results;
//上传地址
// this.uploadAction = json.host.replace('-internal', '');
this.filename = new Date().getTime() + ("." + file.name.split(".")[1]);
this.sendData.append("OSSAccessKeyId", json.accessid);
this.sendData.append("policy", json.policy);
this.sendData.append("Signature", json.signature);
this.sendData.append("keys", json.dir);
this.sendData.append("key", json.dir + this.filename);
this.sendData.append("callback", json.callback);
this.sendData.append("success_action_status", 200); // 指定返回的状态码
this.sendData.append("type", fileObj.type);
this.sendData.append("file", fileObj);
let imageUrl =
json.host.replace("-internal", "") + "/" + json.dir + this.filename; // 上传后的文件地址
await this.uploadToOur(
json.host.replace("-internal", ""),
imageUrl,
type
);
this.tools.httpDialog(1, "上传成功");
} else {
this.tools.httpDialog(0, response.message);
}
},
//上传文件
async uploadToOur(ossUrl, imageUrl, type) {
let config = {
headers: {
"Content-Type": "multipart/form-data",
},
};
try {
await axios.post(ossUrl, this.sendData, config);
this.sendData = new FormData();
console.log(type, "type", imageUrl, "imageUrl");
} catch (error) {
console.log(error);
}
},
},
};