遇到一个问题 上传一张图片需要先判断是否符合格式，如果不符合格式就截取并上传
由于我是使用vue+element 我便选择了 cropper插件进行截取图片
1.在页面上写好，我这里是用了element框架的模态框包着
<el-dialog title="图片剪裁" :visible.sync="dialogVisible" append-to-body>
<div class="cropper-content">
<div class="cropper" style="text-align: center">
<vueCropper
ref="cropper"
:img="option.img"
:outputSize="option.outputSize"
:outputType="option.outputType"
:info="option.info"
:canScale="option.canScale"
:autoCrop="option.autoCrop"
:autoCropWidth="option.autoCropWidth"
:autoCropHeight="option.autoCropHeight"
:fixed="option.fixed"
:fixedBox="option.fixedBox"
:fixedNumber="option.fixedNumber"
></vueCropper>
</div>
</div>
<div slot="footer" class="dialog-footer">
<el-button @click="dialogVisible = false">取 消</el-button>
<el-button type="primary" @click="finish" :loading="loading"
>确认</el-button
>
</div>
</el-dialog>
dialogVisible: false,
// 裁剪组件的基础配置option
option: {
img: "", // 裁剪图片的地址
info: true, // 裁剪框的大小信息
outputSize: 1, // 裁剪生成图片的质量
outputType: "jpeg", // 裁剪生成图片的格式
canScale: false, // 图片是否允许滚轮缩放
autoCrop: true, // 是否默认生成截图框
autoCropWidth: 686, // 默认生成截图框宽度
autoCropHeight: 274, // 默认生成截图框高度
fixedBox: true, // 固定截图框大小 不允许改变
fixed: true, // 是否开启截图框宽高固定比例
fixedNumber: [2.5, 1], // 截图框的宽高比例
full: false, // 是否输出原图比例的截图
canMoveBox: true, // 截图框能否拖动
original: false, // 上传图片按照原始比例渲染
centerBox: true, // 截图框是否被限制在图片里面
infoTrue: true, // true 为展示真实输出图片宽高 false 展示看到的截图框宽高
canMove: true,
// maxImgSize: 2000, //限制图片最大宽度和高度
// height: true, //是否按照设备的dpr 输出等比例图片
// infoTrue: false, //true为展示真实输出图片宽高，false展示看到的截图框宽高
},
picsList: [], //页面显示的数组
// 防止重复提交
loading: false,
fileinfo: {},
fileimg: "",
filename: undefined,
2.在上传图片前做处理
let data = window.URL.createObjectURL(new Blob([file])); // 用来生成本地路径 方便截图时展示 如file报错 请使用file.raw
this.filename = file;
this.option.img = data;
const isSize = new Promise(function (resolve, reject) {
// 判断图片格式
let width = 686;
let height = 274;
let _URL = window.URL || window.webkitURL;
let img = new Image();
img.onload = function () {
let valid = img.width == width && img.height == height;
valid ? resolve() : reject();
};
img.src = _URL.createObjectURL(file);
}).then(
() => {
return file;
},
() => {
this.$confirm(
"上传的活动首页图宽*高必须是等于686*274！ 是否截取？",
"截取首页图",
{
confirmButtonText: "确定",
cancelButtonText: "取消",
type: "warning",
}
)
.then(() => {
this.dialogVisible = true;
})
.catch(function () {});
return Promise.reject();
}
);
点击完成截图
finish() {
console.log("成功");
var that = this;
that.$refs.cropper.getCropBlob(async (data) => {
let fileist = {};
that.fileimg = window.URL.createObjectURL(data);
console.log(that.fileimg, "reader.resul");
// let url = null;
let formData = new FormData();
let file = new File(
[data],
typeof that.filename.name == "undefined"
? that.optionsImg
: that.filename.name,
{ type: data.type, lastModified: Date.now() }
);
// 转成blob格式地址
file.uid = Date.now();
fileist.uid = Date.now();
fileist.url = window.URL.createObjectURL(data);
formData.append("file", file);
fileist.raw = file;
fileist.name = file.name;
fileist.size = file.size;
fileist.percentage=0;
that.itemImgList=[fileist]; // 上传完之后显示bloe 地址 也可更换为接口返回路径，但必须要上传文件列表绑定该数组:file-list="itemImgList"
// 转成base64
// console.log("file", file);
// var reader = new FileReader();
// reader.readAsDataURL(file);
// reader.onload = function () {
// console.log(file.url, "reader.resul");
// };
//调用axios上传
// return;
axios({
method: "post",
url: that.api + "/oss/file/activity",
data: formData,
headers: that.myHeaders,
})
.then((res) => {
res = res.data;
that.handleAvatarSuccess(res, file);
that.dialogVisible = false;
})
.catch((err) => {
console.log("上传失败！");
});
});
},
