HarmonyOS JS实现图片上传后端并调用
前言
鸿蒙中能实现图片上传的方法有很多,调用Java端实现的效果更好。本次是使用纯JS将图片转成base64编码并存储后端,之后转成图片保存调用路径下。
正文
1.创建鸿蒙JS端空项目
2.添加权限
"reqPermissions": [ { "name": "ohos.permission.DISTRIBUTED_DATASYNC" }, { "name": "ohos.permission.GET_NETWORK_INFO" }, { "name": "ohos.permission.SET_NETWORK_INFO" }, { "name": "ohos.permission.INTERNET" }, { "name": "ohos.permission.GET_WIFI_INFO" },]
"deviceConfig": { "default": { "network": { "cleartextTraffic": true } } },
3.创建页面文件并书写图片转换代码
我们主要使用的是canvas画布组件来完成图片转换的,该部分和JavaScript中的canvas差不多,只不过鸿蒙中已经为我们封装好了,我们只需调用,无需在赋值了。之后使用image对象对图片进行编辑并展示在canvas画布中,方便我们调用;最后我们使用toDataURL方法来获取图片的base64编码("data:image/png;base64,xxxxxxxx...")
onShow(){ var that = this var el =this.$refs.canvas; var ctx =el.getContext('2d'); var img = new Image(); img.src = 'common/images/bg-tv.jpg'; img.onload = function() { console.log('Image load success'); ctx.drawImage(img, 0, 0, 120, 100); that.dataURL = el.toDataURL(); console.log(that.dataURL); that.title = that.dataURL; }; img.onerror = function() { console.log('Image load fail'); }; },
4.base64编码传入python后端
所使用的是fetch数据请求以及querystring来进行数据传输。需要注意的是鸿蒙JS端是没有配备querystring的,我们需要在项目目录下进行下载。(npm install querystring)另外大家也需要准备云端服务器来进行base64编码的接收,因为鸿蒙真机是无法进行本地数据的相互存入的。
reFresh(){ fetch.fetch({ url:`http://xxx.xx.xxx.xxx:8000/personal_info/getBase/`,//路径 // data:JSON.stringify({'id':'1'}), data: qs.stringify({"title":this.dataURL}), //验证,转为字符串发给后台 responseType:"json", //请求的参数类型 method: "POST", success:(resp)=> { this.winfo = resp.data; //令获取到的数据赋给winfo console.log("返回的数据:"+this.winfo)//打印出数据 }, fail:(resp)=> { this.winfo = resp.data; console.log("获取数据失败:"+this.winfo) } }); }
5.hml文件
{{title}}
6.后端部署django项目
分别使用 django-admin startproject + 项目名称 和 django-admin startapp + app名称 来搭建项目。之后在项目以及app url下创建路径,并在views中书写python后端接收代码。
项目url
path('personal_info/', include(personal_info_urls, namespace='personal_info')),
app url
path('getBase/',getBase.as_view())
views代码
class getBase(APIView): def post(self, request): title = request.data.get("title") #接收前段传递的字符串 print(title[22:]) #截取字符串中base64编码部分 print("chenggong") print(title) with open("C:\\Users\\Administrator\\Desktop\\1.txt", 'w') as f: #将编码保存进文本中 f.write(title[22:]) f.close() with open("C:\\Users\\Administrator\\Desktop\\1.txt", 'r') as f: #编码转成图片并保存到指定路径下 imgdata = base64.b64decode(f.read()) file = open('C:\\pic\\upload\\8.png', 'wb') file.write(imgdata) file.close() with open("C:\\Users\\Administrator\\Desktop\\1.txt", 'r+') as file: #文本清空,方便下次使用 file.truncate(0) try: return HttpResponse("信息录入成功") except pymysql.Error as e: print("信息录入失败" + e)
在命令行中启动django
python manage.py runserver 0.0.0.0:8000
7.后端部署tomcat
我们需要在云服务器中下载tomcat,之后我们打开tomcat文件目录下的conf -> server.xml,将最后一行中Context修改为图片调用路径
我们启动bin目录下的startup.bat,若可以出现下图中的编码块,则证明可以访问tomcat,在IE中输入http://localhost:8080,若出现下面网页,则部署成功。
8.在鸿蒙真机操作
指定路径下会有相同图片,并可以使用tomcat来调用图片
例:8.png (300×200)