Vue element 删除已上传文件

最新推荐文章于 2025-04-25 16:01:18 发布

原创最新推荐文章于 2025-04-25 16:01:18 发布 · 2.8k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#vue #element

Python学习专栏收录该内容

22 篇文章

订阅专栏

本文介绍如何在Vue Element的上传组件中实现删除文件的功能。通过前端使用axios发送POST请求来传递文件名，并在后端接收到请求后，从指定路径删除对应的文件。

问题描述

Vue elment中提供了upload 但是未能给出删除错误文件的方法。因此为解决该问题，采用axios 进行删除。

前端代码

handleRemove(file, fileList) {
        console.log(file.name, fileList);
        this.$axios.post('/api/delete',file.name ) //请求头要为表单
          .then(response=>{
            console.log(response.data);
          })
          .catch(function (error) {
            console.log(error);
          })
      },

后端代码

@app.route('/delete',methods=["POST"])
def delete():
    # test
    # ESRpath = app.config['ESR']+"//123123"
    img_stream = ''
    file_obj = request.get_data(as_text=True)
    print (file_obj)
    if file_obj is None:
        # 表示没有发送文件
        return "未上传文件"
    # filename = secure_filename(file_obj.filename)
    
    '''
        将文件保存到本地（即当前目录）
        直接使用上传的文件对象保存
    '''

    file_path = os.path.join(ESRpath, file_obj)
    os.remove(file_path)
    # blend_pic = blend_two_images(file_obj)

    # img_stream = base64.b64encode(blend_pic)
    print ("Delete done")
    return "Delete done"