<div >
    <span class="inputBtn">
        <span>选择文件</span>
        <input type="file" @change="handleImageUpload" class="inputFile">
        </span>
    <span id="fileName"></span>

    <audio :src="voiceUrl" controls="controls" loop="loop" autoplay="autoplay"></audio>
    
</div>

			handleImageUpload(event) {
                    var that = this
                    var file = event.target.files[0];
                    that.uploadedImage = event.target.files[0];
                    // 在这里处理图像上传逻辑
                    that.voiceUrl = URL.createObjectURL(file)
                    var formData = new FormData();
                    var that = this;
                    if (that.uploadedImage!=null) {
                        formData.append('uploadImage', that.uploadedImage);
                        /* axios实现
                        axios({
                            method: "post",
                            url: "/imageSeg",
                            data: formData,
                            headers: {
                                'Content-Type': 'multipart/form-data'
                            }
                        }).then(res=>{
                            that.resText=res.data['speechSegRes'];
                        })*/

                        fetch('/imageSeg', {
                                method: 'POST',
                                body: formData
                            })
                            .then((data)=>{
                                return data.json();
                            }).then((ret)=>{

                                that.resText = ret['speechSegRes'];
                            });

                    } else {
                        showMessage('Please select a file first.', true);
                    }

                },

.inputBtn {  
            position: relative;  
            display: inline-block;  
            padding: 6px 10px;  
            border: 1px solid #1E9FFF;  
            border-radius: 3px;  
            background-color: #1E9FFF;  
            cursor: pointer;  
            font-size: 12px;  
            color: #fff;  
        }  
        .inputBtn:hover{  
            border: 1px solid #3aa9fb;  
            background-color: #3aa9fb;  
        }  
        .inputFile {  
            position: absolute;  
            left: 0;  
            top: 0;  
            width: 100%;  
            height: 100%;  
            opacity: 0;  
            filter: alpha(opacity=0);  
        }  

@app.route('/imageSeg', methods=['POST','GET']) 
def imageSeg():
        requestImg = request.files['uploadImage']
        filename = secure_filename(requestImg.filename)
        file_path = os.path.join(app.config['UPLOAD_FOLDER'], filename)
        requestImg.save(file_path)

        segRes = SpeechRecognition.recog(file_path)
        # 将 segRes 转换为字节流
        # 返回图像数据给前端
        return jsonify(speechSegRes=segRes,message="Segmentation successfully"), 200