标签: urlloader

我想要完成的是使用URLLoader类和URLRequest将一些二进制数据,特别是表示PNG图像的ByteArray上传到服务器.

当我将contentTypeURLRequest 的属性设置为'multipart/form-data'而不是默认值时,调用会urlLoader.load()导致安全异常.

当我将该contentType属性保留为默认属性时,它可以正常工作,但需要很长时间(与PNG文件的长度成比例)才能将文件上载到服务器.

所以,我的问题是为什么我得到这个安全例外？我怎么能避免它呢？

请注意,我的SWF是从开发服务器提供的,而不是本地文件系统(准确地说是Google App Engine开发服务器).

这是代码:

var pngFile:ByteArray = PNGEncoder.encode(bitmapData);

var urlRequest:URLRequest = new URLRequest('/API/uploadImage');

// With this line of code, the call to urlLoader.load() throws the following security exception:
// 'SecurityError: Error #2176: Certain actions, such as those that display a pop-up window, may only be invoked upon user interaction, for example by a mouse click or button press.'
urlRequest.contentType = 'multipart/form-data';

urlRequest.method = URLRequestMethod.POST;
urlRequest.data = pngFile;
urlRequest.requestHeaders.push(new URLRequestHeader('Cache-Control', …

我将尽可能具体和冗长,并包括我正在使用的一些代码.我已经进行了搜索,发现了这个问题,看似相似; 但是作者使用的是ActionScript 2而不是3,而我似乎无法有效地应用任何给出我自己情况的答案.

我试图通过Flash/ActionScript 3模拟(以有限的方式)JavaScript的XMLHttpRequest对象的行为,以克服相同的域限制.但我发现ActionScript在这方面有其自身的局限性.我承认我可能会弄错,但据我所知,理论上仍然可以使用ActionScript进行这种跨域脚本编写,只要你获得所有权限.那就是我遇到麻烦的地方.

首先,我为一个名为AjaxRequest的类借用了一些开源代码,我将其保存为/ajax/AjaxRequest.as.然后我创建了一个名为/jsajax.fla导出到最终SWF文件的Flash文件/jsajax.swf.现在,这是包含Flash文件的第一个也是唯一一个框架的ActionScript代码:

import ajax.AjaxRequest;
Security.allowDomain("domainone.com");
Security.allowDomain("domaintwo.com");

function jsAjax(stringURL:String, stringMethod:String, stringData:String):void
{
    var xhr:AjaxRequest = new AjaxRequest(stringURL);
    xhr.contentType = "application/x-www-form-urlencoded";
    xhr.dataFormat = URLLoaderDataFormat.TEXT;

    if ( stringMethod.toUpperCase() == "POST" ) {
        xhr.method = URLRequestMethod.POST;
    } else {
        xhr.method = URLRequestMethod.GET;
    }

    xhr.addEventListener("complete", jsAjaxResponse);
    xhr.send(stringData);
    return;
}

function jsAjaxResponse(evt:Event):void
{
    ExternalInterface.call("jsAjaxResponse", evt.currentTarget.data.toString());
    return;
}

ExternalInterface.addCallback("jsAjax", jsAjax);
ExternalInterface.call("jsAjaxReady");

到现在为止还挺好.我觉得Security.allowDomain不需要这些调用中的一个或多个,但他们试图解决这个问题是我的(不成功)尝试.

在我的JavaScript,我已经得到了定义了三个功能:jsAjax,jsAjaxResponse,和jsAjaxReady.最后一个是一个非常基本的函数,用于指示Flash对象成功加载(仅在加载时立即调用一次),而另外两个用于发送和接收数据.如您所见,它们具有相应的ActionScript对应物.

最后,我创建了一个简单的HTML页面/test.html …

我正在使用multipart将文件上传到服务器URLLoader.我可以上传文件.我试图在URLLoader上侦听progress事件,但它只在上传的最后触发.如何通过上传更加一致地获得进度事件？

我让webapp与在节点服务器上运行的服务器端呈现功能发生反应。我正在使用资产目录中的本地图像（如下所示：

<img src={require('../../../assets/img/image.png')} width="400" />

在客户端运行良好，但在服务器端，节点尝试读取图像文件的内容并抛出以下提到的错误。

(function (exports, require, module, __filename, __dirname) { ?PNG
SyntaxError: Invalid or unexpected token
    at createScript (vm.js:80:10)
    at Object.runInThisContext (vm.js:152:10)
    at Module._compile (module.js:605:28)
    at Object.Module._extensions..js (module.js:652:10)
    at Module.load (module.js:560:32)
    at tryModuleLoad (module.js:503:12)
    at Function.Module._load (module.js:495:3)
    at Module.require (module.js:585:17)
    at require (internal/module.js:11:18)

我试过使用文件加载器，URL加载器，但没有任何效果。用于文件加载器的webpack配置：

module: {
    rules: [
    {
        test: /\.jsx?$/,
        use: 'babel-loader',
        exclude: /node_modules/
    },
    {
        test: /\.(png|jpg|gif)$/,
        use: [
        {
            loader: 'file-loader',
            options: {}
        }
        ]
    }
    ]
},

谁能让我知道这里的问题。或者，除了之外，还有其他任何方法可以使用本地图像吗require()？任何帮助，将不胜感激。

谢谢〜Satish

在我的 scss 文件中，我使用background-image: url("../../../assets/images/home/banner-mobile.png");

应用程序运行成功，但没有显示背景图片：

背景图片 URL 未解析。

webpack/webpack.base.js

const webpack = require("webpack");
const path = require("path");

const utils = require("./utils");

const HtmlWebpackPlugin = require("html-webpack-plugin");

module.exports = {
  entry: "./src/index.jsx",
  resolve: {
    alias: {
      "@": utils.resolve("src")
    },
    extensions: ["*", ".js", ".jsx"],
    fallback: {...},
  },
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader",
        },
      },
      {
        test: /\.(sa|sc|c)ss$/,
        use: [
          {
            loader: "style-loader",
          },
          {
            loader: "css-loader",
          },
          {
            loader: "sass-loader"
          },
          {
            loader: "sass-resources-loader", …

我正在尝试加载.SWF文件旁边的图像文件.像这样的东西:

var loader:URLLoader = new URLLoader();
loader.dataFormat = URLLoaderDataFormat.BINARY;
loader.addEventListener(Event.COMPLETE, function(e:Event):void {
    trace(typeof(loader.data));
    graphic = spritemap = new Spritemap(loader.data, 32, 32);
    ...
}

但这是我得到的输出:

object
[Fault] exception, information=Error: Invalid source image.

事情是loader.data有图像的字节但不是BitmapData实例,这就是Spritemap所期望的.

如何转换为BitmapData？

谢谢

我试图将某些字体内联为base64编码的Data URI，但是Webpack的url-loader却没有运气。这很奇怪，因为url-loader似乎只是针对我的图像和svg文件这样做。我的设置如下：

目录结构

root/
|-src/
|--assets/
|
|----fonts/
|      icon-fonts/
|        fontawesome.woff2
|
|----styles/
|      fonts.css
|
|--components/
|   main.component.js
|...

webpack.config.js

module: {
  loaders: [
    {
      test: /\.(jpg|png|svg|woff2)$/,
      exclude: /node_modules/,
      loader: 'url?limit=100000&name=[name]-[sha512:hash:base64:7].[ext]'
    },
  ]
}

fonts.css

@font-face {
  font-family: FontAwesome;
  font-weight: normal;
  font-style: normal;
  src: url('../fonts/icon-fonts/fontawesome.woff2') format('woff2');
}

main.component.js

import fonts from '../assets/styles/fonts.css'
import React from 'react'

export class App extends React.Component {
  ...
}

输出

我正在使用 webpack 的 url-loader 插件并将其配置如下：

module.exports = {
    entry: './src/admin.planningview.js',
    output: {
        filename: 'bundle.js',
        path: path.resolve(__dirname, 'dist'),
        publicPath: 'http://poc.local/dist/'
    },
    module: {
        rules: [
            {
                test: /\.(png|woff|woff2|eot|ttf|svg)$/,
                loader: 'url-loader?limit=100000'
            }
        ]
    }
};

在我的 base.css 中有以下行：

@font-face {
    font-family: 'open_sansregular';
    src: url('fonts/opensans-regular-webfont.eot');
    src: url('fonts/opensans-regular-webfont.eot?#iefix') format('embedded-opentype'), url('fonts/opensans-regular-webfont.woff') format('woff'), url('fonts/opensans-regular-webfont.ttf') format('truetype'), url('fonts/opensans-regular-webfont.svg#open_sansregular') format('svg');
    font-weight: normal;
    font-style: normal;
}

该文件位于子文件夹“字体”中。

我的 dist 文件夹如下所示：

现在，我正在尝试根据块和资产的动态 publicPath 变量（因此覆盖http://poc.local/dist/ url）加载所有这些文件。

我添加了这是我的入口点文件：

__webpack_public_path__ = window.cdnURL;

window.cdnURL 包含如下内容：http://cdn.local/dist/

现在我的问题是块被正确加载，但字体/woff 文件不是..我认为这似乎与 url-loader 有关。

当我在调试模式下检查 bundle.js 时，我看到以下内容，它是旧 URL： …

我在 Next.js 应用程序中从本地目录加载图像时收到以下错误

编译失败\n./pages/components/image.png 1:0\n模块解析失败: 意外字符 \'\xef\xbf\xbd\' (1:0)\n您可能需要适当的加载程序来处理此文件类型，当前没有配置加载程序来处理此文件。请参阅https://webpack.js.org/concepts#loaders \n（此二进制文件省略源代码）

我安装了这个加载器

$ npm install file-loader --save-dev\n

我的 webpack.config.js

module.exports = {\nmodule: {\n  rules: [\n    {\n      test: /\\.(png|jpe?g|gif)$/i,\n      use: [\n        {\n          loader: \'file-loader\',\n        },\n      ],\n    },\n  ],\n},\n

};

我的 next.js 代码

import homeBG from \'./image.png\'\n<Image src={homeBG} alt="Picture of the author" />\n

我有一个带有以下代码的URL加载器:

public function getUploadURL():void {   
    var request:URLRequest = new URLRequest();

    var url:String = getPath();
    // Adds time to prevent caching
    url += "&time=" + new Date().getTime(); 

    request.url = url;
    request.method = URLRequestMethod.GET;

    _loader = new URLLoader();
    _loader.dataFormat = URLLoaderDataFormat.TEXT;
    _loader.addEventListener(Event.COMPLETE, getBaseURL);
    _loader.addEventListener(IOErrorEvent.IO_ERROR, onGetUploadURLError);
    _loader.addEventListener(HTTPStatusEvent.HTTP_STATUS, getHttpStatus);

    _loader.load(request);
}

我的问题是这个请求可能是错误的,所以服务器会给我一个400 Bad Request,并提供一条消息来解释错误.如果是Event.COMPLETE,我可以在Event的"data"字段中看到服务器返回的一些消息(响应),但是如果调用了onGetUploadURLError或getHttpStatus,它只是说错误代码是400但是没有显示我与之相关的信息.

"data"字段在getHttpStatus中未定义,在onGetUploadURLError中为"".相反,在getBaseURL中,我得到:{"ResponseMetadata":{...}}我检查过,我在浏览器中得到了类似的错误请求,但我看不到它.

知道我怎么可以得到消息？

非常感谢,鲁迪