我正在使用ngx-image-cropper来裁剪我的图像。我需要从ngx-image-cropper 中检索裁剪后的图像才能上传。但是,我无法通过此检索 File 对象。
这是我用来在用户裁剪图像时触发的代码,
imageCropped(event: ImageCroppedEvent) {
this.croppedImage = event.base64;
this.cropperHeight = event.height;
this.cropperWidth = event.width;
this.croppedEvent =event.file;//This is how i tried to get file
}
Run Code Online (Sandbox Code Playgroud)
当我尝试上传文件时,它有一些错误。所以最好提供一种从 ngx-image-cropper 获取文件对象的方法
使用“ ng build --prod ”部署我的 angular 应用程序后,我尝试打开 index.html 文件并检查我的 web 应用程序。但它在 chrome、firefox 和边缘网络浏览器中不显示任何内容。打开控制台并检查是否有任何错误后,它将显示 6 条错误消息。
我应该提到我的应用程序成功编译并在“ http://localhost:4200/ ”上运行。在我尝试了另一个角度应用程序(新的)之后,但它在构建后出现了同样的错误。
错误:
1) 从源 'null' 访问 'file:///D:/AngularTshirt/module01/moduleapp01/dist/moduleapp01/runtime-es2015.edb2fcf2778e7bf1d426.js' 的脚本已被 CORS 策略阻止:跨源请求仅支持协议方案:http、data、chrome、chrome-extension、https。
2) GET file:///D:/AngularTshirt/module01/moduleapp01/dist/moduleapp01/runtime-es2015.edb2fcf2778e7bf1d426.js net::ERR_FAILED
3) 从源“null”访问“file:///D:/AngularTshirt/module01/moduleapp01/dist/moduleapp01/polyfills-es2015.2987770fde9daa1d8a2e.js”的脚本已被 CORS 政策阻止:仅跨源请求支持协议方案:http、data、chrome、chrome-extension、https。index.html:36
4) GET file:///D:/AngularTshirt/module01/moduleapp01/dist/moduleapp01/polyfills-es2015.2987770fde9daa1d8a2e.js net::ERR_FAILED index.html:1
5)从源“null”访问“file:///D:/AngularTshirt/module01/moduleapp01/dist/moduleapp01/main-es2015.69da1b25d5a7a648b825.js”的脚本已被CORS政策阻止:跨源请求仅支持协议方案:http、data、chrome、chrome-extension、https。index.html:36
6) GET file:///D:/AngularTshirt/module01/moduleapp01/dist/moduleapp01/main-es2015.69da1b25d5a7a648b825.js net::ERR_FAILED