作者:永远在等一个人--嘉儿 | 来源:互联网 | 2023-01-31 20:32
本文实例为大家分享了Vue+Flask实现图片传输功能的具体代码,供大家参考,具体内容如下
完整流程:
1.图片转为formdata 传输到后端
2.后端接收后,确定文件后缀名无误,修改文件名并保存到固定的路径中
3.前端请求图片
4.后端根据图片名字返回图片数据流
5.前端将数据流处理,转为图片
1.Vue上传
2.Flask接收
#请求中获取到上传的图片
a = request.files.get("file")
#限制文件后缀名必须为图片的类型
allowed_filename = set(["png", "jpg", "JPG", "PNG"])
isallowed = "." in filename and filename.rsplit(".", 1)[1] in allowed_filename
path = basedir + "/image/" #这里的image是自己创建的保存图片文件夹路径
img_name = change_file_name(a.filename,ImgID)#这是我自己定义的一个方法 为了修改图片的名字为随机生成的唯一ID,同时不修改后缀名
file_path = path + img_name#完整的保存路径加图片名
a.save(file_path)#保存
3.Vue请求图片并转换返回的数据流为图片展示
//封装的图片请求
export const getImg = (imgID) => {
return request({
url: "/api/ferchoosen/getFerImg",
method: "get",
responseType:"blob",
params: {
imgID
}
})
}
4.Flask接收前端请求返回图片数据流
imgID = request.args["imgID"]
if imgID == None:
return output(msg="该图片不存在")
path = basedir + "/image/"
image_data = open(os.path.join(path, "%s" % imgID), "rb").read()
respOnse= make_response(image_data)
response.headers["Content-Type"] = "image/png"#返回的内容类型必须修改
return response
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持编程笔记。