前端vue+elementui实现上传base64图片

最新推荐文章于 2024-09-13 07:18:07 发布

Dylan长点薪把

最新推荐文章于 2024-09-13 07:18:07 发布

阅读量740

点赞数

文章标签：前端 vue.js elementui

本文链接：https://blog.csdn.net/qq_41040413/article/details/121122719

版权

elementui

<el-upload
  action = "/"
  :show-file-list = "false"
  :before-upload = "file => beforeUpload(1,file)"//这个 1 是给每一个图片的标志位 随意 对应上即可
>
 <img 
   onerror = "defaultImage" //设置默认图片
   :src = "form.activityPic"
  >
</el-upload>

JS


beforeUpload(index,file){
this.getFile(index,file)
},
getFile(index, file){
   if(
     file.type == "image/jpeg"||
     file.type == "image/jpg"||
     file.type == "image/png"
)
{
 var reader = new FileReader();
 reader.readAsDataURL(file)
 reader.onload = () => {
    if(index == 1){
   this.form.activityPic = reader.result
//之后调用接口的时候传递this.form.activityPic的值即可
}

}
}
else {
alert("请输入正确图片格式")
}
}

图片返显的话，传过去什么格式的话，接口返回什么格式就可以返显啦！！！

defaultImage：'this.src="' + require("写地址就好了") + '"'//默认图片
写到data的return中，当作默认数据使用
但是这个写法是要根据你的node版本，我10.几的版本可以但是用8.几的是不可以的

如果想来一个兼容性强的方法，则在vue页面上用import引入项目中图片 
import home from ../../images/item01.png
之后在return {}里 home_Url: home
第三步在图片 :src="form.pic?form.pic:home_Url"
这就大功告成了