Vue项目如何根据图片url获取file对象并用axios上传
作者：看门猫
这篇文章主要介绍了Vue项目如何根据图片url获取file对象并用axios上传问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
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
);
//....
}vue项目中使用axios上传图片等文件
首先安装axios
1.利用npm安装npm install axios –save
2.利用bower安装bower install axios –save
3.直接利用cdn引入
一般情况上传照片有两种方式
1.本地图片转换成base64，然后通过普通的post请求发送到服务端。操作简单，适合小图，以及如果想兼容低版本的ie没办法用此方法
2.通过form表单提交。form表单提交图片会刷新页面，也可以时form绑定到一个隐藏的iframe上，可以实现无刷新提交数据。
这里只讲解一下第二种方式
html代码：
<input name="file" type="file" accept="image/png,image/gif,image/jpeg" @change="update"/>
js代码：
import axios from 'axios'
// 添加请求头
update (e) { // 上传照片
var self = this
let file = e.target.files[0]
/* eslint-disable no-undef */
let param = new FormData() // 创建form对象
param.append('file', file) // 通过append向form对象添加数据
param.append('chunk', '0') // 添加form表单中其他数据
console.log(param.get('file')) // FormData私有类对象，访问不到，可以通过get判断值是否传进去
let config = {
headers: {'Content-Type': 'multipart/form-data'}
}
// 添加请求头
axios.post('http://172.19.26.60:8081/rest/user/headurl', param, config)
.then(response => {
if (response.data.code === 0) {
self.ImgUrl = response.data.data
}
console.log(response.data)
})
}总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。