Bootstrap

element-plus vue3 图片上传

element-plus是一款基于Vue 3的UI组件库,它提供了一系列常用的UI组件以及丰富的特色功能。其中包括图片上传,可以通过el-upload组件实现。下面是基于element-plus vue3的图片上传例子:

<template>
  <el-upload
    action="https://jsonplaceholder.typicode.com/posts/"
    :headers="{
        Authorization: 'Bearer ' + token
    }"
    :on-success="handleSuccess"
    :data="{id: imageId}">
    <el-button size="small" type="primary">点击上传图片</el-button>
  </el-upload>
</template>

<script>
import { ref } from 'vue';
import { ElUpload, ElButton } from 'element-plus';

export default {
  components: {
    ElUpload,
    ElButton,
  },
  setup() {
    const token = ref('your_token_here');
    const imageId = ref(1);

    function handleSuccess(response, file, fileList) {
      console.log(response, file, fileList);
    }

    return {
      token,
      imageId,
      handleSuccess,
    };
  },
};
</script>

其中action用于指定上传图片的路径,headers用于设置请求头信息,on-success用于处理上传成功后返回的信息。在这个例子中,使用了ref来定义状态,使用setup函数来设置组件的逻辑。

;