element单图片上传——复制代码即可

博主之前有写过一篇关于图片上传的文章，它里面有详细解释过关于图片需要使用到的一些API。两篇文章不同之处在于图片的数量以及代码量（element多张图片上传的文章链接在此，有需要的小伙伴自取）点击查看多张图片上传（文件上传）element-ui vue2图片上传功能https://blog.csdn.net/weixin_73318685/article/details/129247153肯定有很多小伙伴会有疑问：不都是图片上传吗？为什么要分两篇文章呢？此篇文章会更加精简化的教大家如何去具体操作以及操作中的详细说明，以便于初学者能完全读懂

UI要我实现的效果图如下：

（单张点击加号上传图片）

（再次点击图片时进行图片替换）

• 首先图片上传必须要有文件服务器的地址，也就是一个接口地址，这是很多初学者容易踩坑的误区，在网上找了很多方式，但是copy到自己代码内却无法正常执行就是因为这个原因！！！（当然也有其他的解决方案：让图片以文件file的形式进行展示，然后把file转成base64，image标签也是可以展示base64的图片的，但这个在工作中并不常用，不推荐大家进行使用）
• 图片上传需要单独配置请求头：正常情况下axios会默认带一个请求头，一般调接口直接调就行。但由于图片是文件类型，所以在调接口的时候需要单独配置一下请求头。
• 上传图片的流程：调用图片服务器时前端传一个图片文件file给后端，后台会返回一个正常且可以直接访问的图片链接，我们再将它放到页面中去渲染，具体参数怎么传需要先跟后端确认一下，一般都是一个file或者files。注意：上传图片（或视频）文件需要调接口是因为我们需要利用后端给的服务器把文件转化成url供我们前端页面进行展示使用，这才是图片上传的主要核心处理。

详细代码如下——

vue模板template部分：

<el-upload
   class="avatar-uploader"
   style="text-align:center;border: 1px dashed #d9d9d9;margin-top:70px;"
   :action="qiniuURL"
   :show-file-list="false"
   :http-request="imgUploadLicense"
>
    <img v-if="license" :src="license" style="width:100%;height:100%;border-radius: 1rem;"/>
    <i v-else class="el-icon-plus"></i>
</el-upload>

关于upload内API的详解：

参数	说明	类型
action	必选参数，上传的地址（可以传空，但不能不写，否则会报错）	string
show-file-list	是否显示已上传文件列表（默认值为true）	boolean
http-request	覆盖默认的上传行为，可以自定义上传的实现	function

JS内的 data部分：

data() {
    return {
      //上传的地址
      qiniuURL:'',
      // 图片路径所绑定的值
      license:''
    }
}

JS内的 methods部分：

   async imgUploadLicense(e) {
      //e 图片文件
      if (e.file.size > 2000000 || e.file.type.indexOf("image/") == -1) {
        //限制图片大小不超过2Mb且必须为图片，若此处对图片格式有其他要求，可以通过打印e.file.type配合indexOf来限制文件格式
        this.$message("请上传小于2Mb的图片");
      } else {
        // new 一个FormData 表单
        let FormDatas = new FormData();
        // 加一个 键 multipartFile值是图片文件
        FormDatas.append("multipartFile", e.file);
        // 调图片接口,获取到后端返给我们的数据（一般都是url字符形式）
        const res =await api.CommonUpload_uploadImagesTX(FormDatas, "license/")
        // 把获取到的url赋值给图片链接所绑定的值
        this.license = res.data;
      }
    }

api.js文件（存放接口）  部分：

CommonUpload_uploadImagesTX(data, path, key) {
    //这里走if判断是因为博主公司给了两个接口地址，不同的形式调不同的接口地址，这里也可以使用三目进行判断使代码更为简洁，看公司地址来进行具体分析
    if (key) {
      return AjaxPost(
          //直接把接口地址四个字替换成后端给的接口地址就行，注意不要把?符号给删了
          "接口地址?path=" + path + "&key=" + key, data,
          // 这里请求头的地方是固定的
          {
            headers: {
              "Content-Type": "multipart/form-data",
            },
          }
      );
    } else {
      return AjaxPost("接口地址?path=product/" + path, data, {
        headers: {
          "Content-Type": "multipart/form-data",
        },
      });
    }
  },

关于请求头部分解释：

默认情况下，编码类型（enctype）的值是application/x-www-form-urlencoded不能用于文件上传，只有使用了multipart/form-data才能完整的传递文件数据。application/x-www-form-urlencoded只能上传文本格式的文件，multipart/form-data是将文件以二进制的形式上传，这样可以实现多种类型的文件上传。

CSS  部分：

.avatar-uploader {
    margin-top: 10px !important;
    width: 25%;
    position: relative;
    height: 12rem;
    line-height: 12rem;
    text-align: center;
    font-size: 45px;
    background: transparent;
    border-radius: 1rem;
  }
.avatar-uploader img{
    margin: 0 !important;
  }

请求头部分扩展知识：

enctype属性可以用来控制对表单数据的发送前的如何进行编码，enctype有三种属性，分别为：

•  application/x-www-form-urlencoded（默认值）：在发送前会编码所有字符，即在发送到服务器之前，所有字符都会进行编码（空格转换为 "+" 加号，"+"加号转换为空格，特殊符号转换为 ASCII HEX 值）
•  multipart/form-data不对字符编码，用于发送二进制的文件，其他两种类型不能用于发送文件；
•  text/plain用于发送纯文本内容，空格转换为 "+" 加号，不对特殊字符进行编码，一般用于email之类的；

小伙伴们有任何疑问可以放在评论区噢~博主看到后会立马回复哒~