关于使用vue上传图片的问题

这篇博客是自己在工作中遇到的一个问题，在这里分享一下。
图片上传是以表单的形式上传的，关于上传的方法如下：

HTML部分

<img :src="avatar" class="img-avatar"/>
<input type="file" name="avatar" id="uppic"
accept="image/gif, image/jpeg, image/jpg, image/png"
@change="changeImage($event,imageInfo)"
ref="avatarInput"
class="uppic"/>

js部分

data() {
return {
avatar: "",
ngavatar: "",
file:''
};
},
methods: {
changeImage(e) {
this.file = e.target.files[0];
let param = new FormData();
param.append("imgFile", this.file);
axios.post('接口地址',param)
.then(function(res){
console.log(res);
})
.catch(function(error){
console.log(error);
})
var reader = new FileReader();
var that = this;
reader.readAsDataURL(this.file);
reader.onload = function(e) {
that.avatar = this.result;
};
}
}

当我们想要查看param的时候，直接打印是看不到我们想要看的参数的，我们可以使用原生js的方法来查看
1.使用has方法查看是否拥有接口需要的那个参数，返回值是一个Boolean值，为true则存在，为false则不存在。

console.log(param.has("imgFile"))

2.使用get方法查看具体那个参数的内容

console.log(param.get("imgFile"))

3.使用forEach方法遍历查看参数内容

param.forEach(function(imgFile){
console.log(imgFile)
})

• 点赞
• 收藏
• 分享
• 文章举报