VUE 使用 elementUI 实现文件上传
    		       		warning:
    		            这篇文章距离上次修改已过433天,其中的内容可能已经有所变动。
    		        
        		                
                在Vue中使用Element UI实现文件上传,可以利用<el-upload>组件。以下是一个简单的例子:
- 首先确保你已经安装了Element UI并在你的项目中引入。
 - 在你的Vue组件中,使用
<el-upload>组件来创建文件上传界面。 
<template>
  <el-upload
    class="upload-demo"
    drag
    action="https://jsonplaceholder.typicode.com/posts/" // 这里替换为你的上传API地址
    multiple
    :on-success="handleSuccess"
    :on-error="handleError"
  >
    <i class="el-icon-upload"></i>
    <div class="el-upload__text">将文件拖到此处,或<em>点击上传</em></div>
  </el-upload>
</template>
 
<script>
export default {
  methods: {
    handleSuccess(response, file, fileList) {
      console.log('文件上传成功', response, file, fileList);
    },
    handleError(err, file, fileList) {
      console.error('文件上传失败', err, file, fileList);
    }
  }
};
</script>
 
<style>
.upload-demo {
  /* 添加你的样式 */
}
</style>在这个例子中,action属性设置了文件上传的服务器API地址。你需要替换为你的实际上传API。on-success和on-error方法用于处理文件上传成功和失败的情况。
请确保后端API能够处理文件上传并返回适当的响应。
评论已关闭