如何在 Trumbowyg 中添加云参数以上传插件

Posted 2023-03-25

【中文标题】如何在 Trumbowyg 中添加云参数以上传插件

【英文标题】：how to add cloudinary parameters to upload plugin in Trumbowyg

【发布时间】：2019-05-24 03:25:27

【问题描述】：

我在我的项目中使用 trumbowyg 编辑器。从文档中知道可以使用下面的代码来设置编辑器的图片上传内容。

$('#editor')
.trumbowyg(
    btns: ['upload'],
    plugins: 
        // Add imagur parameters to upload plugin for demo purposes
        upload: 
            serverPath: 'https://api.imgur.com/3/image',
            fileFieldName: 'image',
            headers: 
                'Authorization': 'Client-ID xxxxxxxxxxxx'
            ,
            urlPropertyName: 'data.link'
        
    
);

这适用于imgur，但我想使用cloudinary 服务器而不是imgur。

在使用cloudinary 时，谁能指导我如何处理plugins:？

我也使用dropzone.js 和cloudinary 来上传图片，这也可以正常工作。 这是dropzone功能代码：

Dropzone.autoDiscover = true;
var myDropzone = new Dropzone(document.getElementById('image-upload'), 
  clickable: "#image-upload #btn-add",
  uploadMultiple: false,
  autoProcessQueue: true,
  acceptedFiles:'.jpg,.png,.jpeg,.gif',
  parallelUploads: 10,
  maxFilesize: 9,
  maxFiles: 10,
  url: 'https://api.cloudinary.com/v1_1/demo_project/image/upload',
  addedfile: function(file) 
    // console.log(file);
    new Noty(
      type: 'success',
      text: "Uploading...",
      timeout: false
    ).show();
    // myDropzone.processQueue();
  ,
  success: function(file, response)
    new Noty(
      type: 'success',
      text: "Uploaded!",
      killer: true
    ).show();
    newImageArray.push(
      public_id: response.public_id,
      url: response.url,
      secure_url: response.secure_url
    );
    newImageArrayJSON = JSON.stringify(newImageArray);
    $imageStorage.val(newImageArrayJSON)
    $("#image-upload .image").html('<img src="' + response.secure_url + '">')
    $("#image-upload #btn-add").hide();
    $("#image-upload #btn-remove").show();
  
);
myDropzone.on('sending', function (file, xhr, formData) 
  formData.append('api_key', 112233445566778);
  formData.append('timestamp', Date.now() / 1000 | 0);
  formData.append('upload_preset', 'mypreset');
);

提前致谢！

【参考方案1】：

我建议从以下我测试并为我工作的基本实现开始：

$('#editor').trumbowyg(
    btns: ['upload'],
    plugins: 
        upload: 
            serverPath: 'https://api.cloudinary.com/v1_1/demo_project/image/upload',
            fileFieldName: 'file',
            urlPropertyName: 'data.secure_url',
            data: [
                name: 'api_key', value: '112233445566778',
                name: 'timestamp', value: Date.now() / 1000 | 0,
                name: 'upload_preset', value: 'mypreset'
            ],
            success: function (data) 
                console.log(data);
            ,
            error: function (error) 
                console.log(error.responseText);
            
        
    
);

您可以登录您的 Cloudinary 帐户并修改您的上传预设，以根据不同的条件限制上传，就像您使用 dropzone.js 一样，例如只允许上传特定格式等。

【讨论】：

这工作几乎 80% 完美，但上传后没有显示图像，因为文档说。它必须保存此图像，然后返回如下 JSON 响应： success: true, // 如果上传失败 url: 'example.com/myimage.jpg' 必须为 false 但我的响应是： bytes: 73201 format: "png" secure_url : "res.cloudinary.com/demo_project/image/upload/v1545768672/…" 标签: [] url: "res.cloudinary.com/demo_project/image/upload/v1545768672/…"