标签代码:
<el-upload accept="image/*"
class="upload-demo"
ref="uploadImgs"
:on-success="handleCoverSuccess"
multiple
:limit="9"
:file-list="fileList"
:on-change="changeFile"
:on-remove="removeFile"
:auto-upload="false"
list-type="picture-card">
<i class="el-icon-plus"></i>
<div slot="tip" class="el-upload__tip">只能上传jpg/png文件,且不超过500kb</div>
</el-upload>
vue js 代码
changeFile(file, fileList) {
this.fileList = fileList; // 再一次赋值
},
removeFile(file, fileList) {
this.fileList = fileList; // 再一次赋值
},
submitUpload(id) {
let formData = new FormData()
for (let i = 0; i < this.fileList.length; i++) {
formData.append("files", this.fileList[i].raw) // formdata 添加数组的独特方式
}
formData.append("id", id)
formData.append("type", 'image')
formData.append("typeClass", "sourceCode")
let self = this
this.$axios({
method: 'post',
url: '/upload', // 后端接口地址
headers: {'Content-Type': 'multipart/form-data'},
data: formData
}).then((res) => {
debugger
if (res.data == "success") {
self.$message({
showClose: true,
message: "项目截图上传成功",
type: "success",
duration: 5000,
});
}
}).catch(function (ex) {
console.error(ex)
self.$message({
showClose: true,
message: "上传失败",
type: "error",
duration: 5000,
});
});
}
python 代码:
@app.route('/file/upload', methods=['POST'])
def fileUpload():
data = request.form
base = app.config['IMG_ROOT']
for f in request.files.getlist("files"):
fi = File()
t = time.time()
...
return 'success'