vue3 element图片上传案例

cv走就可以用,在这里就不多说了

<template>
  <el-upload
    class="upload-demo"
    action="https://c2c.kuxia.top/webapi/index/upload"
    :on-success="handleSuccess"
    :on-error="handleError"
    :on-preview="handlePreview"
    :on-remove="handleRemove"
    :before-remove="beforeRemove"
    :auto-upload="true"
    multiple
    list-type="picture">
    <el-button size="small" type="primary">选择文件</el-button>
    <div slot="tip" class="el-upload__tip">只能上传jpg/png文件,且不超过500kb</div>
  </el-upload>
</template>

<script setup>
import { ElUpload } from 'element-plus'

const handleSuccess = (response, file, fileList) => {
  console.log('upload success', response, file, fileList);
};

const handleError = (err, file, fileList) => {
  console.error('upload error', err, file, fileList);
};

const handlePreview = (file) => {
  console.log('preview', file);
};

const handleRemove = (file, fileList) => {
  console.log('remove file', file, fileList);
};

const beforeRemove = (file, fileList) => {
  return confirm('确定移除该文件?');
};
</script>

<style scoped>
.upload-demo {
  margin: 20px 0;
}
</style>

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
以下是使用 Vue3 和 Element Plus 实现文件上传的步骤: 1. 安装 Element Plus:在终端中运行以下命令安装 Element Plus。 ``` npm install element-plus --save ``` 2. 引入 Element Plus:在 main.js 文件中引入 Element Plus。 ``` import { createApp } from 'vue' import App from './App.vue' import ElementPlus from 'element-plus' import 'element-plus/lib/theme-chalk/index.css' createApp(App).use(ElementPlus).mount('#app') ``` 3. 创建上传组件:在您的组件中创建一个上传组件,如下所示。 ``` <template> <el-upload class="upload-demo" action="//jsonplaceholder.typicode.com/posts/" :on-preview="handlePreview" :on-remove="handleRemove" :before-upload="beforeUpload" :on-exceed="handleExceed" :file-list="fileList" list-type="picture" :auto-upload="false"> <el-button slot="trigger" size="small" type="primary">选取文件</el-button> <el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload">上传到服务器</el-button> <div slot="tip" class="el-upload__tip">jpg/png 文件,不超过 500kb</div> </el-upload> </template> <script> export default { data() { return { fileList: [] } }, methods: { handleRemove(file, fileList) { console.log(file, fileList); }, handlePreview(file) { console.log(file); }, handleExceed(files, fileList) { this.$message.warning(`当前限制选择 3 个文件,本次选择了 ${files.length} 个文件,共选择了 ${files.length + fileList.length} 个文件`); }, beforeUpload(file) { if (file.type !== 'image/jpeg' && file.type !== 'image/png') { this.$message.error('上传文件只支持 jpeg/png 格式!'); return false; } if (file.size > 500 * 1024) { this.$message.error('上传文件大小不能超过 500KB!'); return false; } }, submitUpload() { this.$refs.upload.submit(); } } } </script> ``` 在上面的代码中,我们使用了 Element Plus 的 el-upload 组件,该组件具有以下属性: - `action`:上传地址,可以是一个 URL 或一个函数。 - `on-preview`:点击文件列表中已上传的文件时触发。 - `on-remove`:文件列表中移除文件时触发。 - `before-upload`:上传文件之前的钩子,可以用来校验文件的类型和大小等。 - `on-exceed`:文件超出个数限制时触发。 - `file-list`:已上传文件列表。 - `list-type`:文件列表的类型,支持 text、picture 和 picture-card。 - `auto-upload`:是否在选取文件后立即上传。 4. 实现上传逻辑:在组件中实现上传逻辑,如下所示。 ``` methods: { // ... submitUpload() { this.$refs.upload.submit(); } } ``` 在上面的代码中,我们实现了 `submitUpload` 方法,该方法通过 `$refs` 访问到上传组件的实例,然后调用 `submit` 方法触发上传操作。 5. 运行代码:在终端中运行以下命令启动应用程序。 ``` npm run serve ``` 然后在浏览器中访问 http://localhost:8080,您将看到上传组件的界面。 希望这些步骤能帮助您实现文件上传功能。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

锅盖哒

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值