使用tinymce将图像上传到服务器

时间:2017-06-30 11:39:32

标签: angularjs node.js express tinymce

上传处理程序

我打算在服务器端为tinemce写一个上传处理程序,经过大量搜索,我用PHP找到了这个例子,

https://www.tinymce.com/docs/advanced/php-upload-handler/

我在NodeJs中需要这个处理程序

我的HTML代码:

CERTS=$(echo -n | openssl s_client -connect $HOST_NAME:$PORT -showcerts | sed -ne '/-BEGIN CERTIFICATE-/,/-END CERTIFICATE-/p')
echo "$CERTS" | awk -v RS="-----BEGIN CERTIFICATE-----" 'NR > 1 { printf RS $0 > "'$SERVER_ROOT_CERTIFICATE'"; close("'$SERVER_ROOT_CERTIFICATE'") }'

在控制器中初始化tinymce:

<textarea ui-tinymce="X.tinymceOptions" ng-model="X.lessonBody"></textarea>
<input name="image" type="file" id="upload" style="display:none;" onchange="">

和我在服务器中的请求处理程序(使用express js):

this.tinymceOptions = {
      plugins: 'advlist autolink lists link image charmap print preview hr anchor pagebreak ' +
      'searchreplace wordcount visualblocks visualchars code fullscreen ' +
      'insertdatetime media nonbreaking save table contextmenu directionality ' +
      'emoticons template paste textcolor colorpicker textpattern imagetools codesample toc',
      toolbar1: 'undo redo | insert | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image',
      toolbar2: 'print preview media | forecolor backcolor emoticons | codesample',
      image_advtab: true,
      image_title: true,
      // enable automatic uploads of images represented by blob or data URIs
      automatic_uploads: true,
      // URL of our upload handler (for more details check: https://www.tinymce.com/docs/configure/file-image-upload/#images_upload_url)
      // here we add custom filepicker only to Image dialog
      file_picker_types: 'image',
      images_upload_url: '/upload',
      file_picker_callback: function (callback, value, meta) {
        if (meta.filetype == 'image') {
          $('#upload').trigger('click');
          $('#upload').on('change', function () {
            var file = this.files[ 0 ];
            var reader = new FileReader();
            reader.onload = function (e) {
              callback(e.target.result, {
                alt: ''
              });
            };
            reader.readAsDataURL(file);
          });
        }
      }
    };

1 个答案:

答案 0 :(得分:0)

我在服务器端添加这些代码行,并且文件已成功上传:

var fileUpload = require('express-fileupload');
var mime = require('mime');
app.use(fileUpload({}));