1.首先鸿蒙的js文件上传,设置目录路径为:

构建路径在工程主目录下:

该目录的说明见下面描述:

视图构建如下:

界面代码:

<div class="container">
<div onclick="operatorloadone" class="divone"><text>上传文件</text></div>
</div>

js上传业务逻辑代码:

导入request模块   import request from '@system.request';   执行upload方法:

import request from '@system.request';
import prompt from '@system.prompt';
export default {
data: {
title: 'World'
},
operatorloadone()
{
prompt.showToast({
message:"执行文件上传" })
request.upload({
url: 'http://rwrg2k.natappfree.cc/upload',
method:"POST",
files: [
{
uri: 'internal://cache/path/to/file.txt',
name: 'file',
filename: 'file.txt',
},
],
data:[
{
name: 'file1',
value: '文本文件',
},
],
success: function(data) {
console.log(data);
},
fail: function() {
console.log('upload fail');
}
}); }
}

上传参数说明如下:

域名采用内网穿透工具:

python服务器端的代码如下:

from  flask  import Flask
from flask import jsonify
from flask import request app=Flask(__name__)
'''因为是文件,所以只能是POST方式'''
@app.route("/upload", methods=["POST"])
def uploadFile():
print("获取上传文件信息")
"""接受前端传送来的文件"""
file_obj = request.files.get("file")
filename=request.form.get("file1")
print("获取文件的参数是:"+filename) if file_obj is None:
# 表示没有发送文件
return jsonify("未上传文件") '''
将文件保存到本地(即当前目录)
直接使用上传的文件对象保存
'''
file_obj.save('file.txt') # 和前端上传的文件类型要相同
file_obj.seek(0)
return jsonify("上传成功") if __name__=="__main__":
app.run(debug=True,port=8500)

文件上传到python工程根目录下:

file_obj = request.files.get("file")  获取文件信息

filename=request.form.get("file1")  获取文件上传参数,post请求 request.form,如果是get请求,request.args. 区分get和post请求。

上传文件可能会较慢,耐心等待几秒,检查服务器端python工作台目录,查看日志信息:

还是古语说得好,十八般武艺,样样需精通!我们一起努力吧!

《鸿蒙的js开发模式》系列文章合集

作者:六合李欣

想了解更多内容,请访问51CTO和华为合作共建的鸿蒙社区:https://harmonyos.51cto.com

鸿蒙的js开发部模式18:鸿蒙的文件上传到python服务器端的更多相关文章

  1. Resumable.js – 基于 HTML5 File API 的文件上传

    Resumable.js 是一个 JavaScript 库,通过 HTML5 文件 API 提供,稳定和可恢复的批量上传功能.在上传大文件的时候通过每个文件分割成小块,每块在上传失败的时候,上传会不断 ...

  2. 鸿蒙的js开发部模式16:鸿蒙布局Grid网格布局的应用一

    鸿蒙入门指南,小白速来!从萌新到高手,怎样快速掌握鸿蒙开发?[课程入口]目录:1.Grid简介2.使用Grid布局实现的效果3.grid-row-gap和grid-colunm-gap属性4.< ...

  3. node.js系列(实例):原生node.js+formidable模块实现简单的文件上传

    /** * 原生node.js结合formidable模块实现图片上传改名 * @Author:Ghost * @Date:2016/07/15 * @description: * 1.引入模块htt ...

  4. 使用JS实现页面中动态添加文件上传输入项

    1. 编写JSP <%@ page language="java" import="java.util.*" pageEncoding="UTF ...

  5. js+ajax+springmvc实现无刷新文件上传

    话不多说直接上代码 <%@ page language="java" contentType="text/html; charset=UTF-8" pag ...

  6. 原生JS版和jQuery 版实现文件上传功能

    <!doctype html> <html lang="zh"> <head> <meta charset="utf-8&quo ...

  7. 【JS】ajax 实现无刷新文件上传

    一.摘要 最近在做个东西,需要实现页面无刷新文件上传,目前看到的方法有两种 1) 通过隐藏iframe 实现页面无刷新,适用于不关心上传结果 <form target="hiddenF ...

  8. 文件上传漏洞演示脚本之js验证

    文件上传漏洞演示脚本之js验证 0 0       716   关于文件上传漏洞,想必玩web安全的同学们都有接触,之前本站也发布过一篇文章介绍文件上传漏洞的各种绕过方法,但是只是有文档却没有演示代码 ...

  9. AjaxUpLoad.js使用实现文件上传

    AjaxUpLoad.js的使用实现无刷新文件上传,如图. 图1 文件上传前 图2 文件上传后 1.创建页面并编写HTML [html] view plaincopy   上传文档: <div  ...

随机推荐

  1. 【uva 11093】Just Finish it up(算法效率--贪心)

    题意:环形跑道上有N个加油站,编号为1~N.第 i 个加油站可以加油Ai加仑,从加油站 i 开到下一站需要Bi加仑汽油.问可作为起点走完一圈后回到起点的最小加油站编号. 解法:我们把每个加油站的Ai, ...

  2. 开源RPA软件试用

      优点 缺点 其它 Robot Framework 可视化界面 运行环境搭建复杂,依赖较多 操作复杂 倾向于自动化测试 TagUI 浏览器支持好 官方文档详细 命令行操作 非浏览器程序支持一般   ...

  3. Python小练习批量爬取下载歌曲

    import requests import os headers={ 'Cookie': '_ga=GA1.2.701818100.1612092981; _gid=GA1.2.748589379. ...

  4. Leetcode(32)-最长有效括号

    给定一个只包含 '(' 和 ')' 的字符串,找出最长的包含有效括号的子串的长度. 示例 1: 输入: "(()" 输出: 2 解释: 最长有效括号子串为 "()&quo ...

  5. 牛客多校第三场J LRU management(双向链表)题解

    题意: 给一个长度为\(m\)的队列,现给定以下操作: \(opt=0\),插入一个串,如果不在队里直接插入栈尾,如果超出\(m\)删队首:在队里就拿出来重新放到队尾,返回\(v\)值. \(opt= ...

  6. Apple iOS 触控按钮 自动关闭 bug

    Apple iOS 触控按钮 自动关闭 bug bug 轻点 iPhone 背面可执行操作 您可以轻点两下或轻点三下 iPhone 背面以执行某些操作,如向上或向下滚动.截屏.打开"控制中心 ...

  7. How to get the real screen size(screen resolution) by using js

    How to get the real screen size(screen resolution) by using js 获取用户屏幕的真实像素分辨率, 屏幕实际尺寸 window.deviceP ...

  8. VS Code All in One

    VS Code All in One Visual Studio Code All in One https://github.com/xgqfrms/vscode/ VS Code Shift + ...

  9. gitignore auto generator

    gitignore auto generator .gitignore https://gitignore.io/ https://www.toptal.com/developers/gitignor ...

  10. redux & dispatch & payload

    redux & dispatch & payload react & react-redux & redux-saga // contrast dispatch({ t ...