el-upload如何上传图片
时间: 2023-07-05 09:36:35 浏览: 86
通过vue的el-upload组件上传文件的例子
el-upload 是 ElementUI 提供的一个上传组件,可以用来上传图片等文件。要上传图片,可以按照以下步骤:
1. 在 HTML 文件中添加 el-upload 组件:
```
<el-upload
class="upload-demo"
action="your-upload-url"
:headers="{ Authorization: 'Bearer ' + token }"
:on-success="handleSuccess"
:limit="1"
:auto-upload="false">
<el-button size="small" type="primary">选择文件</el-button>
<div slot="tip" class="el-upload__tip">只能上传jpg/png文件,且不超过500kb</div>
</el-upload>
```
其中,`action` 属性指定上传文件的 URL,`headers` 属性指定上传文件时要发送的请求头信息,`on-success` 属性指定上传成功后的回调函数,`limit` 属性指定最多可以上传的文件数量,`auto-upload` 属性指定是否自动上传。
2. 在 Vue 实例中定义 `handleSuccess` 方法:
```
methods: {
handleSuccess(response, file, fileList) {
console.log(response);
}
}
```
这个方法会在文件上传成功后被调用,`response` 参数是服务器返回的响应数据,`file` 参数是上传的文件对象,`fileList` 参数是已上传文件的数组。
3. 在服务器端处理上传的文件。
以上就是使用 el-upload 组件上传图片的基本步骤。需要注意的是,上传图片的具体实现还需要根据自己的实际需求进行调整。
阅读全文