el-upload的使用

最新推荐文章于 2023-09-01 14:55:52 发布

水蜜桃那么甜

最新推荐文章于 2023-09-01 14:55:52 发布

阅读量1.1k

点赞数

分类专栏： vue

本文链接：https://blog.csdn.net/Lemontree_fu/article/details/100972093

版权

这篇博客介绍了在使用Element UI框架时，如何利用el-upload组件进行图片或头像上传。根据图片处理方式的不同，分为两种情况：直接上传至服务器和提供64位流给后台。对于直接上传的情况，只需设置action参数；而对于64位流，需要设置action为#，accept指定图片类型，并通过auto-upload="false"防止自动上传，同时演示了如何传递64位流给后台。

摘要由CSDN通过智能技术生成

当我们在用element这个框架时，如果有需要用到图片或者头像时，这个时候就可以用el-upload了。

但是这也会分情况，比如你页面上的图片是你上传到服务器上，还是后台让你给他一种64位流的形式。

第一种情况，由你上传到服务器上

这种情况就比较简单了，你就可以给action这个参数设置就行，代码如下

<el-upload
class="avatar-uploader"
action="uploadUrl"
:on-success="handleAvatarSuccess"
:before-upload="beforeAvatarUpload">
  <img v-if="imageUrl" :src="imageUrl" class="avatar">
  <i v-else class="el-icon-plus avatar-uploader-icon"></i>
</el-upload>

export default{
  data(){
     return {
        uploadUrl:'你们服务器的地址',
        imageUrl:''
      }
   },
   methods:{
      //设置图片路径
      handleAvatarSuccess(file,fileList){
        this.imageUrl=file.url;
      },
      //可以规定对图片的要求
      beforeAvatarUpload(){
         const isJPG = fil