Flask项目上传图片的接口

1.在settings.py文件中定义好：可以允许的图片格式，上传图片保存的路径

    # 允许上传图片的格式
    ALLOWED_IMG = {'bmp', 'png', 'jpg', 'jpeg', 'gif'}
    # 保存的路径
    BASE_DIR = os.path.dirname(os.path.abspath(__file__))
    SERVER_IMG_UPLOADS = os.path.join(BASE_DIR, 'flask_shop/static', 'img')

2.在项目文件下新建static/img文件夹，以用来保存图片

3.创建路由，并完成逻辑

# 上传图片的路由
@goods.route('/upload', methods=['POST'])
def upload_img():
    # 获取图片文件
    img_file = request.files.get('file')
    if not img_file:
        # 如果没有文件则返回错误
        return to_dict_msg(10000)
    # 调用方法查看是否是允许的文件格式
    if allowed_img(img_file.filename):
        # 图片的地址
        floder = current_app.config.get('SERVER_IMG_UPLOADS')
        # 图片的后缀，如jpg、gif等格式
        end_prefix = img_file.filename.split('.', 1)[1]
        # 图片的存在文件夹中的名字，这里调用了md5，以保证每个图片的名字都不一样
        file_name = md5_file()
        # 保存图片
        # 将图片的地址、名字、后缀拼接在一起
        img_file.save(f'{floder}/{file_name}.{end_prefix}')
        # 返回前端，图片的路径、图片的url
        data = {
            'path': f'static/{file_name}.{end_prefix}',
            'url': f'http://127.0.0.1:5000/static/img/{file_name}.{end_prefix}'
        }
        return to_dict_msg(200, data=data, msg='上传文件成功！')
    else:
        return to_dict_msg(10020, msg="文件格式错误！")


# 允许通过的图片格式
def allowed_img(file_name):
    # 对文件名进行分割，并查看文件名是否包含在settings中的ALLOWED_IMG里
    return '.' in file_name and file_name.split('.', 1)[1] in current_app.config['ALLOWED_IMG']


# 给文件名赋予不同的文件名
def md5_file():
    md5_obj = hashlib.md5()
    md5_obj.update(str(time()).encode())
    file_name = md5_obj.hexdigest()
    return file_name

 4.结果如下

5.此时返回的url无法被访问到一直会显示为404，在flask官网中提供了一种视图函数为已上传成功的文件提供访问服务

@goods_blue.route('/uploads/<filename>')
def download_file(filename):
    try:
        response = make_response(
            send_from_directory(current_app.config["SERVER_IMG_UPLOADS"], filename))
        return response
    except Exception as e:
        return f"文件读取异常{e}"

 这样就可以访问到了

6. 前端部分

    // 点击已经上传文件的回调
    async handlePreview(file) {
      this.imgVisible = true
      const filename = await file.response.data.path.split('/').pop()
      try {
        const result = await this.imageCode(filename)
        const blob = new Blob([result.data], { type: result.data.type })
        const imageUrl = URL.createObjectURL(blob) // 创建 URL 对象
        this.imgUrl = imageUrl // 将url配置给img标签
      } catch (error) {
        console.error('显示图片预览失败:', error)
      }
    },
    // 获取图片的接口
    async imageCode(filename) {
      try {
        const response = await axios.get(`/goods/uploads/${filename}`, { responseType: 'blob' })
        return response // 返回 Blob 对象
      } catch (error) {
        console.error('获取图片失败:', error)
        throw error
      }
    },