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)