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文件

<div style="flex-direction: column;">
    <canvas ref="canvas" style="width: 500px; height: 300px; "></canvas>
    <button onclick="reFresh">点击</button>
    <text style="font-size: 1px;">{{title}}</text>
 
</div>

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修改为图片调用路径

        <Context docBase="D:\pic\upload" reloadable="true" path="/pic" />

我们启动bin目录下的startup.bat，若可以出现下图中的编码块，则证明可以访问tomcat，在IE中输入http://localhost:8080，若出现下面网页，则部署成功。

 

 8.在鸿蒙真机操作

 指定路径下会有相同图片，并可以使用tomcat来调用图片 

例：8.png (300×200)