解决小程序webview中无法上传图片问题

Posted 2023-04-08

参考技术A 最近被支付宝小程序内嵌H5无法上传图片折磨到没脾气，H5本身上传图片没问题，但是嵌套在小程序中就无法上传。

在调试过程中发现可能是formData参数无法传送给后台造成的，试了很多解决方法都不行，最后只能利用web view通信方法以及与支付宝API相结合来解决。

首先，在H5上传图片时调用my.chooseImage方法：

由于在H5中无法使用my.uploadFile方法，所以上传至后台操作需要在支付宝小程序中进行
支付宝小程序接收到路径后，调用my.uploadFile方法进行图片上传

最后，在H5 my.onMessage函数中接收小程序传来的图片地址，进行页面渲染

Android，无法使用WebView上传图像

我正在为我的问题寻找一些解决方案，但我找不到一个好的解决方案。所以我想在开始为Android开发本机应用程序之前再问这里，因为我无法解决这个问题。

正如标题所说，我正在尝试使用webview将图像上传到html内容，而NORMALLY正在选择图像，在页面上显示它并允许用户裁剪它。我制作了完整的应用程序，并在我的手机的普通浏览器上进行了测试，所以我不知道这不起作用。这就是为什么它令人沮丧。

我在互联网上找到的那些解决方案对我的Android不起作用，我读到它已经不可能了。

有谁知道这是否可能？如果我能得到更多关于此的信息（即使它可能与否，这将是一个很大的帮助？）感谢Adavnce ...

答案

尝试添加这些权限。

<uses-permission android:name="android.permission.INTERNET" /> 
<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" /> 
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />

Android 6.0 Marshmallow引入了一种处理权限的新模型，简化了用户在安装和升级应用程序时的流程。如果您使用的是版本8.1或更高版本的Google Play服务，则可以将应用配置为定位Android 6.0 Marshmallow SDK并使用新的权限模型。

如果您的应用支持新的权限模型，则用户在安装或升级应用时不必授予任何权限。相反，应用程序必须在运行时需要权限时才会请求权限，系统会向用户显示一个对话框，要求获得权限。

要了解更多信息，请参阅Android 6.0 Marshmallow的文档以及您必须对new permissions model的应用程序所做的更改。

谷歌已添加WebChromeClient.onShowFileChooser。它们甚至提供了一种自动生成文件选择器意图的方法，以便它使用输入接受mime类型。

以这种方式实现它（来自an answer by weiyin）：

public class MyWebChromeClient extends WebChromeClient {
        // reference to activity instance. May be unnecessary if your web chrome client is member class.
    private MyActivity myActivity;

    public boolean onShowFileChooser(WebView webView, ValueCallback<Uri[]> filePathCallback, FileChooserParams fileChooserParams) {
        // make sure there is no existing message
        if (myActivity.uploadMessage != null) {
            myActivity.uploadMessage.onReceiveValue(null);
            myActivity.uploadMessage = null;
        }

        myActivity.uploadMessage = filePathCallback;

        Intent intent = fileChooserParams.createIntent();
        try {
            myActivity.startActivityForResult(intent, MyActivity.REQUEST_SELECT_FILE);
        } catch (ActivityNotFoundException e) {
            myActivity.uploadMessage = null;
            Toast.makeText(myActivity, "Cannot open file chooser", Toast.LENGTH_LONG).show();
            return false;
        }

        return true;
    }
}


public class MyActivity extends ... {
    public static final int REQUEST_SELECT_FILE = 100;
    public ValueCallback<Uri[]> uploadMessage;

    protected void onActivityResult(int requestCode, int resultCode, Intent data){
        if (requestCode == REQUEST_SELECT_FILE) {
                if (uploadMessage == null) return;
                uploadMessage.onReceiveValue(WebChromeClient.FileChooserParams.parseResult(resultCode, data));
                uploadMessage = null;
            }
        }
    }
}

确保使用API​​ 21+编译应用程序。当你在gradle上提到时，这将适用于所有平台。

另一答案

没有答案在这里解决这个问题..一些专家的android人正在为构建图像上传到android代码提供解决方案..这不是这个问题要求..我有同样的问题打扰我..我们要问的是HTML /加载到webview应用程序的PHP页面没有触发图库或相机应用程序，因为它触发了在Mozilla或Chrome中的桌面计算机/笔记本电脑上的“从PC上传文件”..这就像是iframe中的web类似的东西..但是里面Android应用程序的Web视图..我想我已经说清楚..我们不是Android程序员我们是Web开发人员。

<form method="post" action="" enctype="multipart/form-data" name="form1">
<!-- this following input is not working in webview -->
<input size="25" name="file" type="file">
<input name="submit" type="submit" value="submit">
</form> 

另一答案

这是API 11至23的工作方法

static WebView mWebView;
private ValueCallback<Uri> mUploadMessage;
public ValueCallback<Uri[]> uploadMessage;
public static final int REQUEST_SELECT_FILE = 100;
private final static int FILECHOOSER_RESULTCODE = 1;

现在修改或覆盖onActivityResult方法

@Override
public void onActivityResult(int requestCode, int resultCode, Intent intent)
{
    if(Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP)
    {
        if (requestCode == REQUEST_SELECT_FILE)
        {
            if (uploadMessage == null)
                return;
                uploadMessage.onReceiveValue(WebChromeClient.FileChooserParams.parseResult(resultCode, intent));
        uploadMessage = null;
    }
}
else if (requestCode == FILECHOOSER_RESULTCODE)
{
    if (null == mUploadMessage)
        return;
// Use MainActivity.RESULT_OK if you're implementing WebView inside Fragment
// Use RESULT_OK only if you're implementing WebView inside an Activity
    Uri result = intent == null || resultCode != MainActivity.RESULT_OK ? null : intent.getData();
    mUploadMessage.onReceiveValue(result);
    mUploadMessage = null;
}
else
    Toast.makeText(getActivity().getApplicationContext(), "Failed to Upload Image", Toast.LENGTH_LONG).show();

}

现在在onCreate方法中粘贴以下代码

mWebView.setWebChromeClient(new WebChromeClient()
{
// For 3.0+ Devices (Start)
// onActivityResult attached before constructor
protected void openFileChooser(ValueCallback uploadMsg, String acceptType)
{
    mUploadMessage = uploadMsg;
    Intent i = new Intent(Intent.ACTION_GET_CONTENT);
    i.addCategory(Intent.CATEGORY_OPENABLE);
    i.setType("image/*");
    startActivityForResult(Intent.createChooser(i, "File Browser"), FILECHOOSER_RESULTCODE);
}


// For Lollipop 5.0+ Devices
public boolean onShowFileChooser(WebView mWebView, ValueCallback<Uri[]> filePathCallback, WebChromeClient.FileChooserParams fileChooserParams)
{
    if (uploadMessage != null) {
        uploadMessage.onReceiveValue(null);
        uploadMessage = null;
    }

    uploadMessage = filePathCallback;

    Intent intent = fileChooserParams.createIntent();
    try
    {
        startActivityForResult(intent, REQUEST_SELECT_FILE);
    } catch (ActivityNotFoundException e)
    {
        uploadMessage = null;
        Toast.makeText(getActivity().getApplicationContext(), "Cannot Open File Chooser", Toast.LENGTH_LONG).show();
        return false;
    }
    return true;
}

//For Android 4.1 only
protected void openFileChooser(ValueCallback<Uri> uploadMsg, String acceptType, String capture)
{
    mUploadMessage = uploadMsg;
    Intent intent = new Intent(Intent.ACTION_GET_CONTENT);
    intent.addCategory(Intent.CATEGORY_OPENABLE);
    intent.setType("image/*");
    startActivityForResult(Intent.createChooser(intent, "File Browser"), FILECHOOSER_RESULTCODE);
}

protected void openFileChooser(ValueCallback<Uri> uploadMsg)
{
    mUploadMessage = uploadMsg;
    Intent i = new Intent(Intent.ACTION_GET_CONTENT);
    i.addCategory(Intent.CATEGORY_OPENABLE);
    i.setType("image/*");
    startActivityForResult(Intent.createChooser(i, "File Chooser"), FILECHOOSER_RESULTCODE);
}
});