Vue Flask mysql图片存储与显示

Thomas_cannon

已于 2023-02-10 11:56:39 修改

阅读量627

点赞数 2

分类专栏： Vue-flask 文章标签： flask vue.js mysql

于 2023-02-10 11:55:28 首次发布

本文链接：https://blog.csdn.net/Thomas_cannon/article/details/128967634

版权

Vue-flask 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

Vue Flask mysql图片存储与显示

解决Flask与Vue跨域请查看别的教程进行解决

前端使用element-ui的文件上传，代码如下：

<div class="userImg">
					<el-avatar :size="size" :src="userInfo.userImgUrl" :fit="fit"></el-avatar>
					<!-- <img :src="imgUrl" alt=""> -->
					<el-upload class="upload-demo" action="" :on-preview="handlePreview"
						:before-upload="beforeAvatarUpload" multiple :limit="1" :on-exceed="handleExceed"
						:file-list="fileList" :http-request="uploadUserImg">
						<el-button size="small" type="primary">点击更换</el-button>
						<div slot="tip" class="el-upload__tip">只能上传jpg/png文件</div>
					</el-upload>
				</div>

el-avatar是element显示图像的一个标签，绑定了data中的userImgUrl,在el-upload标签中需要使用:http-request自定义上传来绑定提交表单时的方法

data() {
	return {
		userInfo: {
			userImgUrl: "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
		}
	}
}

methods: {
	uploadUserImg(param) {
		let fileObj = param.file
		let form = new FormData()
		form.append("filename", fileObj)
		form.append("userID", sessionStorage.getItem('userID'))
		this.$axios.post('/setting/uploadUserImg', form, {responseType: "blob",//一定要加这个更改返回类型,axios传输默认返回json，非常重要！！！！！
		}).then((res) => {
			console.log("res.data", typeof res.data)//一定要查看返回的类型是否是blob,非常重要！！！
			console.log(res.data)
            let blob = new Blob([res.data]);//这里请求接收的一定是Blod类型数据，要变成数组的形式，我也不知道为什么，不然不能生成Blob对象
            let url = window.URL.createObjectURL(blob);
            this.userInfo.userImgUrl = url;
        })
},

flask后端处理

@app_userManager.route('/setting/uploadUserImg', methods=['POST', 'GET'])
def uploadUserImg():
    # 第一种写法，获取上传的图片
    # file2 = request.files['filename']
    # print(file2)
    # 第二种写法，获取上传的图片
    print("请求来了")
    file = request.files.getlist('filename')[0]
    userID = request.form.get('userID')
    fileByte=file.read()
    print("fileByte的类型是：",type(fileByte))
    db.updateUserImg(fileByte,userID) # 这里是自己写的数据库上传的方法，后面会说到
    res=db.userSearchByID(userID) # 通过userID来找到更新好的图片的图片流数据
    userImgUrl=res.get('userImage') # 传回来一个字典，用get方法获得对应键的值
    response = make_response(userImgUrl)
    response.headers['Content-Type'] = 'image/png'  # 返回的内容类型必须修改，非常重要！！！！
    print('头像更新成功')
    return response

讲讲pymysql更新图片流遇到的一些问题

需要将数据库的字段类型设置成blob

MySQL中，Blob是一个二进制大型对象，是一个可以存储大量数据的容器，它能容纳不同大小的数据。
类型单位（字节）
TinyBlod 最大255
Blod 最大65K
MediumBlob 最大16M
LongBlob 最大4G

类型	单位（字节）
TinyBlod	最大255
Blod	最大65K
MediumBlob	最大16M
LongBlob	最大4G

在做update更新图片流的时候总是报语法错误

# 这是原来的写法
def updateUserImg(self,data, userID):
    sql = 'update user set `userImage`=%s where `userID`=%s'
    sql2 = sql.format(data, userID)
    db.update_sql(sql2) #db是专门写的dao层与数据库交互，是一个类
    pass

dao层db代码

    def update_sql(self, sql, params=None): # 因为图format方便传参，所以在上面直接使用format把参数都写进sql2中了
        conn, cursor = self._get_connection()
        try:
            result = cursor.execute(sql, params)
            conn.commit()
            self._close_connection(conn, cursor)
        except Exception as e:
            print(e)
            conn.rollback()
            self._close_connection(conn, cursor)
            logging.error(str(e))
            raise Exception("database commit error")
        return result

这种写法导致经常报出这种语法错误（图床为github看不见图请挂代理或使用流量等方式自行解决）
翻了好久的csdn终于发现，原来不应该直接将参数format进sql中
应该将参数作为一个元组传入dao层的update中，代码如下：

    def updateUserImg(self,data, userID):
        sql = 'update user set `userImage`=%s where `userID`=%s'
        # sql2 = sql.format(data, userID)# 不使用这种方式
        # print(sql2)
        db.update_sql(sql,(data,userID)) # 将参数放入元组中
        pass