element-plus组件之Upload(1.0)

对应的Upload组件的网址为：Upload 上传 | Element Plus

在学习项目时，多次用到element-plus中的图片上传组件，这里就详细介绍一下，方便以后的学习和记忆。

一般在使用第三方的组件时，我们进行查看文档时，虽然官方提供了一些案例，但是有些属性和方法等不可能一一用实例展示出来，下面就对该组件存在的属性和方法等进行一一展示。

属性

 ①action

el-upload的action属性的设置就是上传的URL，与该属性对应使用的是auto-upload,该属性的值默认为true，说明只要你书写了action属性，就会默认进行上传【也就是像后端服务器发送请求】

 但是这样就存在了两个应用场景，一个是需要让改组件进行默认上传，就是一选择本地的资源文件，就上传到后端服务器。

另一个就是需要考虑到频繁修改图片或其他资源的场景，如果我们需要频繁的修改本地上传资源，那么我们就应该设置auto-upload为false，要不然频繁修改，频繁发送请求，就会造成服务器负担。

实例代码：

<template>
    <el-upload class="avatar-uploader" action="#" :show-file-list="false" :auto-upload="false"
        :on-change="handleChange">
        <img v-if="props.avatar" :src="uploadAvatar" class="avatar" />
        <el-icon v-else class="avatar-uploader-icon">
            <Plus />
        </el-icon>
    </el-upload>

</template>

该代码就是将upload单独做成一个组件，在用户选择图片等资源时，不向服务器发送请求，而在使用该组件的表单组件中，点击提交按钮或修改按钮后，再发送请求。

②headers

 另外，插入一个额外的点，封装的element封装的upload组件，自带选择文件的功能，只要你书写了以下代码：

 <el-upload
    list-type="picture-card"
    :auto-upload="false"
>

    </el-upload>

界面上的显示就会如下，点击就会出现文件选择，这里将list-type="picture-card"是为了让其显示，因为他存在默认样式，会让容器显示出来，要不然单独书写el-upload界面都看不到。

 然后，后续就以官方提供的实例进行介绍。

<template>
    <el-upload
      list-type="picture-card"
      v-model:file-list="fileList"
      class="upload-demo"
      action="#"
      :headers=obj
      method="put"
      name="Myfile"
      :data=data
      :show-file-list="true"
      :drag="false"
      
      multiple
      :on-preview="handlePreview"
      :on-remove="handleRemove"
      :before-remove="beforeRemove"
      :limit="4"
      :on-exceed="handleExceed"
      :auto-upload="true"
    >
      <el-button type="primary">Click to upload</el-button>
      <template #tip>
        <div class="el-upload__tip">
          jpg/png files with a size less than 500KB.
        </div>
      </template>
    </el-upload>

这里的参数类型是 TypeScript 的定义方式，在Typescript中，Headers | Record<string, any> 是一个联合类型，表示该属性的值可以是 Headers 类型，也可以是 Record<string, any> 类型。 

Headers类型的设置可以如下：

let myHeaders = new Headers();
myHeaders.append("Content-Type", "image/jpeg");

<template>
  <el-upload
    :action="uploadUrl"
    :headers="uploadHeaders"
    :on-success="handleSuccess"
    :on-error="handleError"
  >
    <el-button slot="trigger" size="small" type="primary">点击上传</el-button>
  </el-upload>
</template>

<script>
export default {
  data() {
    return {
      uploadUrl: 'http://example.com/upload', // 替换为你的上传 URL
      uploadHeaders: {
        'Content-Type': 'multipart/form-data', // 设置内容类型
        'Authorization': 'Bearer your-token', // 如果需要认证令牌，可以在此处设置
        // 其他自定义头部信息
      }
    };
  },
  methods: {
    handleSuccess(response, file, fileList) {
      // 处理上传成功的逻辑
    },
    handleError(err, file, fileList) {
      // 处理上传失败的逻辑
    }
  }
};
</script>

 Record<string,any>类型也是一个对象，传递的键的类型为string，值的类型为any任意类型，在代码中我传递的是

  const obj=reactive({

    name:"mez"

  })

所以我们要想看到这个数据，需要发送请求，为了方便看到效果，我就设置了auto-upload=true。

我们可以看到我们写的数据，在请求头中发送给后端

③post

method设置上传的请求方法，默认为post请求 ，我们为了测试该属性，设置为put请求

 同样，在上面我们也可以看到发送的是put请求

④multiple

 

显而易见，就是在上传的时候支不支持多选文件，默认为false，不支持，我们设置为true试一试，还有就是，如果直接协商multiple就是设置为true，不写或设置为false就是不能多选的。

 下面是设置为false或者不填时

可以看到，多选时，就会默认调到第二次选择的图片

⑤data

 可以看出，和上面header的类型类似，也是需要一个对象类型

我们设置的data为

 

  const data=reactive({

    Mydata:'我是额外携带的数据'

  })

⑥name

我们在属性中设置name="Myfile"，从上面也可以看出 ，在同样的位置

由于现在项目中很少用到cookie，所以 下面的属性就不再演示。

⑦show-file-list

 这个的效果就是是否显示你上传的文件列表，一般针对list-type="picture"的情况，可以列表显示你上传的文件名，因为picture-card这样的照片墙都直观的显示图片了，再设置这个属性没有效果

 

⑧drag

 这个就比较简单了，设置为true，就是可以直接拖拽文件到该组件，就默认上传了，设置为false就不启用拖拽功能。

⑨accept

指定上传的文件类型，加入我们设置为accept=".png"，当然，也不止这一种设置方式，还有就是accept="image/jpeg,image/png"这样的设置方式，和file文件对象有关。

如果我们设置为accept=".png"，默认选择的文件类型就是这样的