element-plus组件之Upload(1.0)

最新推荐文章于 2025-05-16 17:56:37 发布

mez_Blog

最新推荐文章于 2025-05-16 17:56:37 发布

阅读量1.5k

点赞数 17

分类专栏：前端 mez_Blog的专栏 element-plus 文章标签：前端 element element-plus ui组件 Typescript

本文链接：https://blog.youkuaiyun.com/mez_Blog/article/details/142877671

版权

mez_Blog的专栏同时被 3 个专栏收录

147 篇文章

订阅专栏

前端

72 篇文章

订阅专栏

element-plus

2 篇文章

订阅专栏

对应的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。

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