vue-quill
vue-quill copied to clipboard
vueup
Upload images to server instead of using base64
I'm reading on the official quill.js repo this issue about image uploading in quill. I need to avoid that the images are added to the DOM in base64 format but I need to have images uploaded and then inserted into the dom.
Is this possible in this vue version of quill?
https://vueup.github.io/vue-quill/guide/modules.html#quill-modules I have the same problem and am trying to solve it. And found out that the documentation has this module to solve the upload server problem（quill-image-uploader）. But the documentation is rather sketchy
haha
After I verified that the documentation was fine, my code changes are as follows：
<QuillEditor ref="myTextEditor" v-model:content="form.content.content" contentType="html" :options="editorOption" />
import ImageUploader from "quill-image-uploader";
Quill.register("modules/imageUploader", ImageUploader);
const editorOption = { modules: { toolbar: {……}, imageUploader: { upload: (file) => { return new Promise((resolve, reject) => { setTimeout(() => { resolve( "https://upload.wikimedia.org/wikipedia/commons/thumb/6/6a/JavaScript-logo.png/480px-JavaScript-logo.png" ); }, 3500); }); } }, }, };
This image link may be problematic and can be replaced with another valid image link.
This is just the starting project, I haven't started designing the code to upload the images to the server.
@e274426380 Please did you finish designing the code, cos I am trying to configure it but I keep getting this error from the image uploader module. "missing config: upload function that returns a promise is required. This is my code:
const modules = [ { name: 'blotFormatter', module: BlotFormatter, }, { name: 'imageUploader', module: ImageUploader, upload: file => { return new Promise((resolve, reject) => { axios.get('/sanctum/csrf-cookie') .then(() => { axios.post('/upload-image', file) .then(res => { console.log(res) resolve(res) }) .catch(err => { reject("Upload failed"); console.log(err) }) }) }) } } ]
@realrecordzLab the docs has been updated to fix this issue, you can close it now