elmentui的图片上传如何使用呀

elmentui的图片上传如何使用呀，如何上传，保存，保存在哪里，如何保存，如何使用

Element-UI的上传组件提供了基于文件的上传，并支持拖放、选取等多种上传方式。下面为您提供一个简单的上传示例：

在模板中，您需要包含一个el-upload组件，并设置它的属性。

<template>
  <el-upload
    class="upload-demo"
    action="your-upload-url"
    :on-success="handleSuccess"
    :headers="your-custom-headers"
    :data="{userId: 'your-user-id'}"
    :multiple="false"
    :auto-upload="false">
    <el-button size="small" type="primary">点击上传</el-button>
    <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
  </el-upload>
</template>

在上面的代码中，我们指定了上传组件的属性，其中：

• action 属性指定上传URL地址。
• on-success 属性是一个回调函数，在上传成功后被调用。
• headers 属性是用于上传请求的自定义标头信息。
• data 属性是一个对象，它将作为请求的参数与文件一起发送。
• multiple 属性指定是否支持多文件上传。
• auto-upload 属性指定是否自动上传。

在上面的代码中，我们还添加了一个按钮用于手动上传，并使用一个提示插槽（slot）来定义一个上传文件的说明文字。

在代码的method部分，我们需要添加句柄函数来处理上传结果。

<script>
export default {
  methods: {
    handleSuccess(response, file, fileList) {
      // 处理上传成功的文件
    }
  }
};
</script>

在 handleSuccess 函数中，您可以访问上传成功的响应、上传的文件和上传的文件列表。您可以使用Vuex、LocalStorage、Cookie等任何方法来保存上传的文件，具体实现取决于您的需求。

最后，在处理成功上传文件之后，您可以使用该文件的URL来显示该文件，例如：

<el-image style="width: 100px; height: 100px" :src="fileUrl"></el-image>

当然，您需要在data部分定义fileUrl变量，并根据上传文件的类型和位置来设置它的值。

希望这个简单的上传示例可以帮助您轻松地使用Element-UI上传组件。