Vue与 Django 关于图片的那些事

问题一：Vue向后台传送图片

可能方法由很多，我试了很多，后来发现了“base64.b64decode”这个神奇的编码，可以完美的实现字符串和图片之间的转换，在前端可以直接用<img :src="https://img-blog.csdnimg.cn/2022010616574976357.jpeg"+b64decode>显示图片，无论后台传前台还是前台传后台都十分方便。

 

这次后台用了python-opencv处理图片，  下面的代码就是b64decode 到cv2.IMREAD_COLOR的转换。

#b64decode转opencv mat
imgData = base64.b64decode(file)
nparr = np.fromstring(imgData, np.uint8)
img_np = cv2.imdecode(nparr, cv2.IMREAD_COLOR)

#opencv mat转b64decode
image = cv2.imencode('.jpg', img)[1]
base64_data = str(base64.b64encode(image))[2:-1]


#读文件转b64decode
with open("appfront/src/components/file2.jpg", "rb") as f:
    base64_data = base64.b64encode(f.read())

使用起来接收处理都很方便。

问题二：Vue 与Django语法冲突，‘{ {xxx}}’即是django又是vue的语法，如果只是简单引用vue.js的话，解决办法比较简单，直接在Vue对象里将‘{