在Vue项目根据图片url获取file对象并用axios上传
图片url转file对象
<script>
export default {
data() {
return {
ruleForm: {
coverUrl: "",
coverFile: ""
},
};
},
methods: {
imgUrlToFile(url) {
var self = this;
var imgLink = url;
var tempImage = new Image();
//如果图片url是网络url,要加下一句代码
tempImage.crossOrigin = "*";
tempImage.onload = function() {
var base64 = self.getBase64Image(tempImage);
var imgblob = self.base64toBlob(base64);
var filename = self.getFileName(self.ruleForm.coverUrl);
self.ruleForm.coverFile = self.blobToFile(imgblob, filename);
};
tempImage.src = imgLink;
},
getBase64Image(img) {
var canvas = document.createElement("canvas");
canvas.width = img.width;
canvas.height = img.height;
var ctx = canvas.getContext("2d");
ctx.drawImage(img, 0, 0, img.width, img.height);
var ext = img.src.substring(img.src.lastIndexOf(".") + 1).toLowerCase();
var dataURL = canvas.toDataURL("image/" + ext);
return dataURL;
},
base64toBlob(base64) {
let arr = base64.split(","),
mime = arr[0].match(/:(.*?);/)[1],
bstr = atob(arr[1]),
n = bstr.length,
u8arr = new Uint8Array(n);
while (n--) {
u8arr[n] = bstr.charCodeAt(n);
}
return new Blob([u8arr], { type: mime });
},
blobToFile(blob, filename) {
// edge浏览器不支持new File对象,所以用以下方法兼容
blob.lastModifiedDate = new Date();
blob.name = filename;
return blob;
},
getFileName(url) {
// 获取到文件名
let pos = url.lastIndexOf("/"); // 查找最后一个/的位置
return url.substring(pos + 1); // 截取最后一个/位置到字符长度,也就是截取文件名
}
}
};
</script>
axios上传
注意,用以上方法得到file的对象在上传时,还必须在表单的append方法中增加文件名,否则后端收到的只是blob对象,而不是文件,如下:
submitForm() {
//...
var filename = this.getFileName(this.ruleForm.coverUrl);
params.append(
"course_cover",
this.ruleForm.coverFile,
filename
);
//....
}