autojs-webview上传文件-阿里云开发者社区

autojs-webview上传文件

2022-06-27 296

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： 牙叔教程简单易懂

牙叔教程简单易懂

思路

上传文件, 自然有服务器和客户端, 恰好autojs支持nodejs, 又支持webview, 所以下面的代码都可以在autojs中直接运行.

环境

手机: Mi 11 Pro

Android版本: 11

Autojs版本: 9.0.14

服务端

使用的koa, 依赖如下, 执行npm i 安装依赖

  "dependencies": {
    "koa": "^2.13.4",
    "koa-body": "^4.2.0",
    "koa-router": "^10.1.1"
  }

1. 导入依赖

"nodejs";
const koa = require("koa");
const router = require("koa-router")();
const koaBody = require("koa-body");
var fs = require("fs");

2. 实例化koa, 并加载中间件koa-body

koa-body 是一个可以帮助解析 http 中 body 的部分的中间件，包括 json、表单、文本、文件等。

const app = new koa();
app.use(
  koaBody({
    multipart: true,
  })
);

3. 匹配路由

Koa-router是 koa 的一个路由中间件，它可以将请求的URL和方法（如：GET 、 POST 、 PUT 、 DELETE 等）匹配到对应的响应程序或页面。

下面的代码意思是: 把上传的文件保存到upload文件夹, 文件名随机生成;

响应是一个h1标签, 显示上传成功.

router.post("/upload", (ctx) => {
  const file = ctx.request.files.file;
  const reader = fs.createReadStream(file.path);
  const ext = file.name.split(".").pop(); // 获取上传文件扩展名
  const upStream = fs.createWriteStream(`upload/${Math.random().toString()}.${ext}`);
  reader.pipe(upStream);
  ctx.body =`
  <h1 style="font-size: 188px" >上传成功</h1>
  `;
});

4. 加载路由中间件

// 调用router.routes()来组装匹配好的路由，返回一个合并好的中间件
// 调用router.allowedMethods()获得一个中间件，当发送了不符合的请求时，会返回 `405 Method Not Allowed` 或 `501 Not Implemented`
app.use(router.routes());
app.use(router.allowedMethods({ 
    throw: true, // 抛出错误，代替设置响应头状态
    notImplemented: () => '不支持当前请求所需要的功能',
    methodNotAllowed: () => '不支持的请求方式'
}));

5. 监听端口

IP就是手机本身的IP

app.listen(3000, () => {
  console.log("启动成功");
  console.log("http://192.168.101.31:3000/");
});

客户端

1. webview加载的网页内容

form 标签用于为用户输入创建 HTML 表单。

下面的代码指定上传的文件后缀: jpg和png, 点击提交按钮之后, 访问网址http://192.168.101.31:3000/upload/, 服务器就会收到文件

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Title</title>
  </head>
  <body>
    <form action="http://192.168.101.31:3000/upload/" method="post" enctype="multipart/form-data">
      <p>
        <input
          type="file"
          name="file"
          accept=".jpg,.png"
        />
      </p>
      <p><input type="submit" value="确定上传" /></p>
    </form>
  </body>
</html>

在浏览器上直接打开上面的代码, 就可以上传文件了.

但是在安卓上, 还有重写方法onShowFileChooser, 用来选择文件.

2. onShowFileChooser

  onShowFileChooser: function (webview, filePathCallback, fileChooserParams) {
    selectFile(filePathCallback);
    return true;
  },

3. 打开文件选择界面

function startChooseFile(mimeType, oFilePathCallback, FILE_CHOOSER_RESULT_CODE) {
  filePathCallback = oFilePathCallback;
  var i = new android.content.Intent(android.content.Intent.ACTION_GET_CONTENT);
  i.setType(mimeType);
  i.addCategory(Intent.CATEGORY_OPENABLE);
  activity.startActivityForResult(Intent.createChooser(i, "Image Chooser"), FILE_CHOOSER_RESULT_CODE);
}

4. 监听文件选择结果

ui.emitter.on("activity_result", (requestCode, resultCode, data) => {
  if (requestCode != FILE_CHOOSER_RESULT_CODE) {
    return false;
  }
  var uri = data.getData();
  let uriArr = java.lang.reflect.Array.newInstance(java.lang.Class.forName("android.net.Uri"), 1);
  uriArr[0] = uri;
  filePathCallback.onReceiveValue(uriArr);
  filePathCallback = null;
});

5. UI界面

ui.layout(
  <vertical id="main" padding="10 10 10 30" bg="#ff1e90ff">
    <scroll>
      <webview id="webView" />
    </scroll>
  </vertical>
);

6. webview加载html文件

webView.loadUrl("file://" + files.join(files.cwd(), "index.html"));

关键代码介绍完成, 下面就可以开始测试了,

名人名言

思路是最重要的, 其他的百度, bing, stackoverflow, github, 安卓文档, autojs文档, 最后才是群里问问
--- 牙叔教程

声明

部分内容来自网络
本教程仅用于学习, 禁止用于其他用途