在indexhtml中写一个使用vue3和elementui实现图片上传的前端代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Vue3 and ElementUI Image Upload</title>
<link rel="stylesheet" href="https://unpkg.com/element-plus/lib/theme-chalk/index.css">
<script src="https://unpkg.com/vue@next"></script>
<script src="https://unpkg.com/element-plus"></script>
</head>
<body>
<div id="app">
<el-upload
class="upload-demo"
action="https://jsonplaceholder.typicode.com/posts/"
:auto-upload="false"
:on-change="handleChange"
:file-list="fileList"
:on-remove="handleRemove"
list-type="picture-card">
<i class="el-icon-plus"></i>
<div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
<div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
</el-upload>
</div>
<script>
const {ref} = Vue
const {ElUpload} = elementPlus
const app = Vue.createApp({
setup() {
const fileList = ref([]);
const handleChange = (file, fileList) => {
console.log(file, fileList);
};
const handleRemove = (file, fileList) => {
console.log(file, fileList);
};
return {
fileList,
handleChange,
handleRemove
}
},
components: {
ElUpload
}
})
app.mount('#app')
</script>
</body>
</html
原文地址: https://www.cveoy.top/t/topic/g3na 著作权归作者所有。请勿转载和采集!