image-upload 相关问题

有关将图像上传到在线存储服务（如Cloud Firestone，Amazon AWS）的问题，请使用此标记

我在注册时遇到了麻烦，并且在使用我的express.js应用程序中的multer上载图像文件时会出现问题。我遇到了一个错误” MulterError：意外字段＆...

express multipartform-data multer image-upload zustand

回答 1 投票 0

如何使自定义图像上传适配器在php laravel for CK编辑器5Ckeditor5 - 经典编辑

Ckeditor5 - 经典编辑 <pre><code><html lang="en"> <head> <meta charset="utf-8"> <title>CKEditor 5 – Classic editor</title> <script src="{{adminAssets('plugins/ckeditor5-build-classic/ckeditor.js')}}"></script> </head> <body> <h1>Classic editor</h1> <textarea id="editor" rows="4"> </textarea> <script> ClassicEditor .create( document.querySelector( '#editor' ) ) .catch( error => { console.error( error ); } ); </script> </body> </html> </code></pre> <p>这是我初始化CK编辑器5的方式，这不是上传图像，因此我尝试了从Stack中尝试一些摘要以获取自定义图像上传适配器。 <strong>在这里是</strong></p> <pre><code><html lang="en"> <head> <meta charset="utf-8"> <title>CKEditor 5 – Classic editor</title> <script src="{{adminAssets('plugins/jquery/jquery.min.js')}}"></script> <script src="{{adminAssets('plugins/parsley/parsley.min.js')}}"></script> <script src="{{adminAssets('plugins/ckeditor5-build-classic/ckeditor.js')}}"></script> </head> <body> <h1>Classic editor</h1> <textarea id="editor" rows="4"> </textarea> <input type="hidden" value="{{url('/')}}" id="url" name="url"> <script> var base_path = $('#url').val(); var uploadPath = "/storage/app/public"; var uploadUrl = base_path + uploadPath; console.log(uploadUrl); class MyUploadAdapter { constructor(loader) { // CKEditor 5's FileLoader instance. this.loader = loader; // URL where to send files. this.url = uploadUrl } // Starts the upload process. upload() { return new Promise((resolve, reject) => { this._initRequest(); this._initListeners(resolve, reject); this._sendRequest(); }); } // Aborts the upload process. abort() { if (this.xhr) { this.xhr.abort(); } } // Example implementation using XMLHttpRequest. _initRequest() { const xhr = this.xhr = new XMLHttpRequest(); xhr.open('POST', this.url, true); xhr.responseType = 'json'; } // Initializes XMLHttpRequest listeners. _initListeners(resolve, reject) { const xhr = this.xhr; const loader = this.loader; const genericErrorText = 'Couldn\'t upload file:' + ` ${ loader.file.name }.`; xhr.addEventListener('error', () => reject(genericErrorText)); xhr.addEventListener('abort', () => reject()); xhr.addEventListener('load', () => { const response = xhr.response; if (!response || response.error) { return reject(response && response.error ? response.error.message : genericErrorText); } // If the upload is successful, resolve the upload promise with an object containing // at least the "default" URL, pointing to the image on the server. resolve({ default: response.url }); }); if (xhr.upload) { xhr.upload.addEventListener('progress', evt => { if (evt.lengthComputable) { loader.uploadTotal = evt.total; loader.uploaded = evt.loaded; } }); } } // Prepares the data and sends the request. _sendRequest() { const data = new FormData(); data.append('upload', this.loader.file); this.xhr.send(data); } } function MyCustomUploadAdapterPlugin(editor) { editor.plugins.get('FileRepository').createUploadAdapter = (loader) => { return new MyUploadAdapter(loader); }; } ClassicEditor .create(document.querySelector('#editor'), { extraPlugins: [MyCustomUploadAdapterPlugin], // ... }) .catch(error => { console.log(error); }); </script> </body> </html> </code></pre> <p>它给了我一秒钟的图像预览，但否认上传。我自己没有自己做这个适配器。我从Stack复制了。请建议我如何使用php<strong>进行CK Editor</strong>进行图像适配器的任何好方法 </p> </question> <answer tick="false" vote="0">尝试这个解决方案。您也可以遵循本教程，对我有帮助：<p>https：//www.youtube.com/watch？v =hufhhf2mshu<a href="https://www.youtube.com/watch?v=hufhhf2MSHU" rel="nofollow noreferrer"></a> </p><p></p> <div data-babel-preset-ts="false" data-lang="js" data-hide="false" data-console="false" data-babel="false" data-babel-preset-react="false"> <div><code>class MyUploadAdapter { constructor(loader) { // The file loader instance to use during the upload. this.loader = loader; } // Starts the upload process. upload() { return this.loader.file .then(file => new Promise((resolve, reject) => { this._initRequest(); this._initListeners(resolve, reject, file); this._sendRequest(file); })); } // Aborts the upload process. abort() { if (this.xhr) { this.xhr.abort(); } } // Initializes the XMLHttpRequest object using the URL passed to the constructor. _initRequest() { const xhr = this.xhr = new XMLHttpRequest(); xhr.open('POST', '{{route("image-upload")}}', true); xhr.setRequestHeader('x-csrf-token', '{{ csrf_token() }}'); xhr.responseType = 'json'; } // Initializes XMLHttpRequest listeners. _initListeners(resolve, reject, file) { const xhr = this.xhr; const loader = this.loader; const genericErrorText = `Couldn't upload file: ${ file.name }.`; xhr.addEventListener('error', () => reject(genericErrorText)); xhr.addEventListener('abort', () => reject()); xhr.addEventListener('load', () => { const response = xhr.response; if (!response || response.error) { return reject(response && response.error ? response.error.message : genericErrorText); } resolve({ default: response.url }); }); if (xhr.upload) { xhr.upload.addEventListener('progress', evt => { if (evt.lengthComputable) { loader.uploadTotal = evt.total; loader.uploaded = evt.loaded; } }); } } // Prepares the data and sends the request. _sendRequest(file) { // Prepare the form data. const data = new FormData(); data.append('upload', file); // Send the request. this.xhr.send(data); } } function SimpleUploadAdapterPlugin(editor) { editor.plugins.get('FileRepository').createUploadAdapter = (loader) => { // Configure the URL to the upload script in your backend here! return new MyUploadAdapter(loader); }; } ClassicEditor.create(document.querySelector('#description_editor'), { extraPlugins: [SimpleUploadAdapterPlugin] }) .then(editor => { editor.setData(document.querySelector('#description').value); editor.model.document.on('change:data', () => { document.querySelector('#description').value = editor.getData(); }) }).catch(error => { console.error(error); });</code><pre> </pre><code><div class="mb-3"> <label for="description" class="form-label">{{__('strings.description')}} <span class="text-danger">*</span></label> <div class="ck-editor" id="description_editor"></div> <textarea name="description" class="form-control @error('description') border-red-500 @enderror mt-1 rounded-md ms-2" id="description" aria-describedby="descriptionHelp" placeholder="" required hidden></textarea> @error('description') <div id="descriptionHelp" class="form-text">{{ $message }}</div> @enderror </div></code><pre> </pre> </div> </div><p> </p> </answer></body>

javascript php laravel ckeditor image-upload

回答 0 投票 0

从用户提交的表单将图像上传到 S3 已完成，但已损坏

在 Remix 应用程序中，我有一个用于选择和上传图像的表单，只是一个简单的表单 POST 到 Remix 处理程序，然后...

javascript amazon-s3 image-upload uint8array

回答 1 投票 0

如何使用express和reactjs在Uploadthing上上传图片

我厌倦了在Uploadthing 上上传图像，但我不能。我提供这些如何解决这个问题我的服务器文件夹索引.js 文件索引.js 上传东西.js 上传东西.js 我的前端文件夹 app.jsx 何...

reactjs express upload mern image-upload

回答 1 投票 0

flutter 中未找到图像异常

我也将图像添加到 asset 文件夹和 pubspec.yaml 中。早期它显示得很好，但几天后，文件夹中的所有图像都会出现异常。异常消息是这样的 ═...