vue+elementui 点击按钮上传图片
时间: 2024-08-14 10:01:19 浏览: 51
在Vue.js中结合Element UI实现文件上传功能,你可以使用Element UI的`el-upload`组件,它是一个非常实用的文件上传组件。首先,你需要在项目中引入`ElUpload`和相关的样式。这里是一个简单的步骤说明:
1. 安装依赖:在`main.js`或`App.vue`的`components`中导入Element UI库,如果你还没安装,可以使用`npm install element-ui@latest`。
```javascript
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);
```
2. 在模板中创建上传按钮并配置`el-upload`组件:
```html
<template>
<div>
<el-button @click="handleFilePicker">点击上传</el-button>
<el-upload
:action="uploadUrl"
:on-change="handleChange"
:on-success="handleSuccess"
:auto-upload="false"
>
<el-input v-model="fileList" placeholder="点击选择图片">
<el-upload-examine />
</el-input>
</el-upload>
</div>
</template>
<script>
export default {
data() {
return {
fileList: [],
uploadUrl: '', // 根据实际服务器API填写
};
},
methods: {
handleFilePicker() {
this.$refs.fileInput.click();
},
handleChange(file) {
this.fileList.push({
name: file.name,
url: file.url,
});
},
handleSubmit(file) {
const formData = new FormData();
formData.append('file', file);
axios.post(this.uploadUrl, formData)
.then(response => {
this.handleSuccess(response.data);
})
.catch(error => console.error('Upload failed:', error));
},
handleSuccess(response) {
console.log('上传成功', response);
},
},
};
</script>
```
在这个例子中,当用户点击“点击上传”按钮时,会触发`handleFilePicker`方法,打开文件浏览器选择图片。`handleChange`会在每次选择文件后更新`fileList`。当用户确认上传时,`handleSubmit`会被调用,并通过axios发送POST请求到服务器。
阅读全文