本文由腾讯云+社区自动同步,原文地址 https://stackoverflow.club/article/elementui_upload_custom/
ElementUI中的upload组件使用固然很简便,但是我们可能有更复杂的应用。
比如要开发一个手写数字识别的前端,上传到的服务器的是一张手写数字的图片,返回识别的结果,这个应用无法直接由upload组件实现。
当然,我们也可以先上传,维护一个图片的token,然后后台根据这个token去取相应的数据。但这样不仅要维护一个token,还要和文件系统(磁盘)交互,要考虑上传到哪里、如何删除等问题。不如直接传递方便。
绑定http-request
到自定义函数即可
<el-upload
class="upload-demo"
:http-request="uploadSectionFile"
ref="upload"
action=""
:on-preview="handlePreview"
:on-remove="handleRemove"
:before-remove="beforeRemove"
:limit="1"
:on-exceed="handleExceed"
:auto-upload="false"
:file-list="fileList">
<el-button type="primary" icon="el-icon-upload">点击上传</el-button>
<div slot="tip" class="el-upload__tip">只能上传wav文件,且不超过500kb</div>
</el-upload>
该函数只有一个参数param
, 并且param.file
就是我们要上传的文件对象。
function uploadSectionFile(param){
var fileObj = param.file
var form = new FormData()
form.append("file", fileObj)
// other code ....
}
上传用axios实现,进度条由axios和uploadSectionFile的param
参数配合实现。
param.file.percent
和param.onProjress
用来显示进度条。
let config = {
onUploadProgress: progressEvent => {
var complete = (progressEvent.loaded / progressEvent.total * 100 | 0)
param.file.percent = complete
param.onProgress(param.file)
},
headers: {
'Content-Type': 'multipart/form-data'
}
}
依旧是param
参数。
param.onSuccess('文件上传成功')
vue
<template>
<div class="home">
<h1>Hello</h1>
<el-row>
<el-col :span="8">
<el-upload
class="upload-demo"
:http-request="uploadSectionFile"
ref="upload"
action=""
:on-preview="handlePreview"
:on-remove="handleRemove"
:before-remove="beforeRemove"
:limit="1"
:on-exceed="handleExceed"
:auto-upload="false"
:file-list="fileList">
<el-button type="primary" icon="el-icon-upload">点击上传</el-button>
<div slot="tip" class="el-upload__tip">只能上传wav文件,且不超过500kb</div>
</el-upload>
</el-col>
<el-col :span="8">
<el-button type="primary" @click="handleButton('upload-model')" icon="el-icon-upload">加载模型</el-button>
</el-col>
<el-col :span="8">
<el-button type="primary" @click="handleButton('begin-analyse')" icon="el-icon-video-play">开始分析</el-button>
</el-col>
</el-row>
<el-row>
<el-col :span="12">
<div class="row-softmax">
<h2>模型原始输出</h2>
<el-table
:data="softmax_output"
:max-height = "330"
border
style="width: 100%">
<el-table-column
prop="label"
label="标签"
width="148">
</el-table-column>
<el-table-column
prop="probability"
label="概率"
width="148">
</el-table-column>
</el-table>
</div>
</el-col>
<el-col :span="12">
<el-row>
<el-col :span="24">
<div class="time-frequency">
<img class="base64Img" :src="time_frequency_pic_base64">
</div>
</el-col>
</el-row>
<el-row>
<el-col :span="24">
<div class="final-result">
<h2>归类</h2>
<p> final_result }} </p>
</div>
</el-col>
</el-row>
<el-row>
<el-col :span="24">
<div class="save-result">
<el-button type="primary"><i class="el-icon-upload el-icon--right"></i>保存结果</el-button>
</div>
</el-col>
</el-row>
</el-col>
</el-row>
</div>
</template>
<script>
import { predict } from '@/api/tensorflow'
export default {
name: 'HelloWorld',
data () {
return {
fileList: [],
fileObj: '',
time_frequency_pic_base64:'',
readable_labels: [],
final_result: '',
softmax_output: [
{
'label' : '类别1',
'probability' : 0.1
},
{
'label' : '类别1',
'probability' : 0.1
},
{
'label' : '类别1',
'probability' : 0.1
},
{
'label' : '类别1',
'probability' : 0.1
},
{
'label' : '类别1',
'probability' : 0.1
}
]
}
},
methods: {
handleRemove(file, fileList) {
console.log(file, fileList);
},
handlePreview(file) {
console.log(file);
},
handleExceed(files, fileList) {
this.$message.warning(`当前限制选择 1 个文件,本次选择了 ${files.length} 个文件,共选择了 ${files.length + fileList.length} 个文件`);
},
beforeRemove(file, fileList) {
return this.$confirm(`确定移除 ${ file.name }?`);
},
uploadSectionFile(param){
console.log(param)
let config = {
onUploadProgress: progressEvent => {
var complete = (progressEvent.loaded / progressEvent.total * 100 | 0)
param.file.percent = complete
param.onProgress(param.file)
},
headers: {
'Content-Type': 'multipart/form-data'
}
}
var fileObj = param.file
var form = new FormData()
form.append("file", fileObj)
predict(form, config)
.then( (data) => {
console.log(data)
this.time_frequency_pic_base64 = 'data:image/jpg;base64,' + data.data.time_frequency_pic_base64
this.final_result = data.data.final_result
this.softmax_output = data.data.softmax_output
param.onSuccess('文件上传成功')
})
},
handleButton(type){
if(type == 'upload-model'){
console.log('Not implement yet. Upload model')
}
else if(type == 'begin-analyse'){
console.log('Begin anaylyse')
this.$refs.upload.submit()
}
},
handleChange(type){
if(type == 'file'){
this.fileObj = document.getElementById("upfile").files[0]
}else if(type == 'model'){
}
}
}
}
</script>
axios
import axios from 'axios'
export function predict(data, config) {
return axios.post('your_address',data,config)
}