在前端Vue项目中，使用`
el-
upload`
组件可以
实现图片
上传功能。以下是一个简单的
实现步骤：
1. 在Vue
组件中引入`
el-
upload`
组件：
```
<template>
<
el-
upload
class="
upload-demo"
action="/
api/
upload"
:on-success="handleSuccess"
:file-list="fil
eList"
:limit="3"
:multiple="true"
:show-file-list="false"
:auto-
upload="false">
<
el-button size="small" type="primary">
点击上传</
el-button>
<div slot="tip" class="
el-
upload__tip">只能
上传jpg/png文件，且不超过3个文件</div>
</
el-
upload>
</template>
```
在上述代码中，`action`属性指定了
上传文件的后端接口地址，`:on-success`属性指定了
上传成功后的回调函数，`:file-list`属性指定了
上传文件列表，`:limit`属性指定了
上传文件的数量限制，`:multiple`属性指定了是否支持多选，`:show-file-list`属性指定了是否显示已
上传文件列表，`:auto-
upload`属性指定了是否自动
上传。
2.
实现上传文件的回调函数：
```
methods: {
handleSuccess(res, file) {
console.log(res); // 后端返回的
上传结果
console.log(file); //
上传的文件对象
// 将
上传成功的文件添加到文件列表中
this.fil
eList.push({
name: file.name,
url: res.data.url
});
}
}
```
在上述代码中，`handleSuccess`函数接收两个参数：`res`表示后端返回的
上传结果，`file`表示
上传的文件对象。在函数中，我们将
上传成功的文件添加到文件列表中。
3. 后端接口
实现：
在后端Flask应用中，可以使用`Flask-
Uploads`等第三方库来
实现文件
上传功能。以下是一个简单的
实现代码：
```
from flask import Flask, request, jsonify
from flask_
uploads import
UploadSet, IMAGES, configure_
uploads
app = Flask(__name__)
# 配置文件
上传
app.config['
UPLOADED_PHOTOS_DEST'] = '
uploads/images'
photos =
UploadSet('photos', IMAGES)
configure_
uploads(app, photos)
@app.route('/
api/
upload', methods=['POST'])
def
upload():
file = request.files['file']
if file:
filename = photos.save(file)
url = photos.url(filename)
return jsonify({'code': 0, 'msg': '
上传成功', 'data': {'url': url}})
else:
return jsonify({'code': -1, 'msg': '
上传失败'})
```
在上述代码中，`
UPLOADED_PHOTOS_DEST`配置项指定了文件
上传后的保存路径，`photos`对象表示
上传文件的集合，`
upload`函数
实现了
上传文件的
功能。在函数中，我们首先获取
上传的文件对象，然后使用`photos.save`将文件保存到指定路径，并使用`photos.url`获取文件的访问URL，最后返回
上传结果。
以上就是使用`
el-
upload`
组件实现图片
上传功能的简单
实现步骤。
本文汇总了el-upload组件的各种功能，包括如何限制上传文件的个数和格式大小，实现点击已上传文件下载，阻止查看时删除文件的操作，以及在查看编辑时如何显示后台保存的文件。
最低0.47元/天 解锁文章
9741
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
