使用第三方api上传图片
1.先了解第三方api 在这里我就那*图床举例子(其他图床大致一样), api文档写的非常清楚我也就简单的说一下令我迷惑的地方
说需要的参数都挺简单的 就是这个image file这个有点迷惑人 第一开始我研究了半天把图片读成二进制传进去也不行 就很纳闷 这个file类型是个啥?
后来用了js中的formData方法封装一下就可以传入了 废话怎么多上代码希望可以帮助到你们
<el-upload
:action="URL"
list-type="picture-card"
:data="upObj"
:on-success="suc"
:before-upload="upm"
multiple
>
<i class="el-icon-plus"></i>
</el-upload>
data(){
return{
upObj: {
image: "file",//file类型文件
token: "****",//自己的同肯值
apiType: "**"
},
}
methods: {
beforeAvatarUpload(file) {//该方法是在上传之前对upObj对象进行处理 file文件
// console.log(file)
var formdata = new FormData();
formdata.append("file", file, file.name);
// console.log(formdata.get("file"))
this.upObj.image = formdata.get("file");//重点
const isJPG = ["image/jpeg", "image/jpg"].includes(file.type);
const isLt2M = file.size / 1024 / 1024 < 20;
if (!isJPG) {
this.$message.error("上传头像图片只能是 JPG 格式!");
}
if (!isLt2M) {
this.$message.error("上传头像图片大小不能超过 2MB!");
}
return isJPG && isLt2M;
},
},
upm(file) {//上传成功返回出来的数据
console.log(file);
var formdata = new FormData();
formdata.append("file", file, file.name);
// console.log("file",formdata.getAll("file"));
this.upObj.image = formdata.get("file");
},
这自理一定要使用formdata.get(“file”)为这传入对象进行赋值我就是迷在这一点为什么formdata传入进去了还是不能上传成功
困扰了几天也算解惑了,如有不对的地方请大神执教@~@