Как отправить сгенерированный файл (картинку)?

Question

[yurecitpear]

Я сделал canvas рисунок и мне его надо отправить на сервер, на котором стоит проверка mime type, если загрузить файл и отправить то все гуд, но если сгенерировать самому все, то выдает ошибку: "The image must be a file of type: jpeg, jpg, bmp, png, gif, webp". Мой код:

canvas.toBlob((blob) => {
        const url = URL.createObjectURL(blob)
        image.onload = () => {
          URL.revokeObjectURL(url);
        }
        image.src = url
      })

      const fileImage = new File([image], random()+'.png', {
        type: "image/png"
      })
      form.value.image = fileImage
      form.value.image.__img = image

По данным выходит такой файл в консоли:

Comments

[yurecitpear]

есть второй вариант кода, который идет через кодировк base64 - он тоже не работает:

image.src = canvas.toDataURL("image/png")
      image.crossOrigin = "anonymous"

      const fileImage = new File([image], random()+'.png', {
        type: "image/png"
      })
      form.value.image = fileImage
      form.value.image.__img = image

[Владимир Коротенко]

попробуйте это

в вашем коде я не понял что делает 2 строка

form.value.image = fileImage
      form.value.image.__img = image

var imagefile = document.getElementById('upload_files') as HTMLInputElement;
    if (imagefile == null) this.errors.push('Не найдена форма загрузки');
    if (imagefile.files == null) this.errors.push('Не найдена форма загрузки');
    const files = imagefile.files;
    if(files?.length === 0)  this.errors.push('Выберите файл со штрихкодом');
    if(this.errors.length) return; 
    var formData = new FormData();
    formData.append('lastName', this.lastName);
    formData.append('name', this.name);
    // console.log(formData)
     if(this.middleName !== '')
      formData.append('middleName', this.middleName);
       // console.log(formData)
    formData.append('phone', this.phone);
    if(this.email !== '')
      formData.append('email', this.email);
    formData.append('start', this.startDate[0].toJSON());
    formData.append('end', this.startDate[1].toJSON());
    const resp = (document.getElementsByName('g-recaptcha-response')[0] as HTMLTextAreaElement).value;
    formData.append('captchaResponse', resp);
    if(files === null) return;
    for (let i = 0; i < files.length; i++) {
      formData.append('files', files[i]);
    }
    var result = await axios.post('/api/upload', formData);

[yurecitpear]

Владимир Коротенко, вы немного меня не поняли)) мне надо на лету генерировать канвас и преобразовывать его в file для загрузки на сервер)

[Владимир Коротенко]

yurecitpear, у вас есть файл, мне не понятно зачем вы добавляете 2 строчку?

form.value.image = fileImage
form.value.image.__img = image ??? что это?

[yurecitpear]

https://vk.com/doc552890824_659142267?hash=nYgQ4x1...

Answer 1

[Alexandroppolus]

canvas.toBlob((blob) => {

просто отправь вот этот blob
можно напрямую в fetch, можно запихнуть в FormData и её в fetch
https://learn.javascript.ru/formdata

Comments

[yurecitpear]

я пакую ее в formdata , но ругается на тип файла , хотя если просто через поле загрузить картинку то все гуд

[yurecitpear]

если нужна доп инфа мог прислать, очень нужно выполнить эту задачу, попробую еще на прямую отправить