使用vue2-editor上传图片无效

Question

问题描述

因为不想用base64格式直接存数据库，所以开启vue2-editor下的useCustomImageHandler，却上传图片无效。后端是用php接口接受，测试过没有问题

问题出现的环境背景及自己尝试过哪些方法

相关代码

// 请把代码文本粘贴到下方（请勿用图片代替代码）
前端代码

                                    <!--useCustomImageHandler：处理图像上传，不使用则默认转换成Base64格式-->
                                    <!--imageAdded：当useCustomImageHandler为true且正在将照片添加到编辑器时发出-->
                                    <vue-editor id="editor"
                                                useCustomImageHandler
                                                @imageAdded="handleImageAdded"
                                                v-model="formItem.content"
                                    >
                                    </vue-editor>
                                    <div align="center" class="button-group">
                                        <Button @click="">保存</Button>
                                        <Button type="ghost" @click="">清空内容</Button>
                                    </div>

            /**
             * vue2Editor 内图片上传处理(获取图片服务器地址，并以image插入到光标位置)
             * @param file
             * @param Editor
             * @param cursorLocation
             * return  src
             */
            handleImageAdded (file, Editor, cursorLocation, resetUploader) {
                let formData = new FormData();
                formData.append('image', file);

                this.$http.post(this.$store.state.apiUrl+'images',[
                    formData,
                ]).then(function (response){
                    let url = response.data.data;
                    console.log(response);
                    console.log(response.body);
                    /*插入路径*/
                    Editor.insertEmbed(cursorLocation, 'image', url);
                },function (response){
                    console.log(response);
                });
            },

        
        后端代码
        
        ```
        public function images()
{
    $file = request()->file();
    // 移动到框架应用根目录/public/uploads/ 目录下
    if ($file) {
        //ajaxmsg('123');
        $info = $file['file']->move(ROOT_PATH . 'public' . DS . 'uploads');
        if ($info) {
            // 成功上传后 获取上传信息
            // 输出 jpg
            $data['extension'] = $info->getExtension();
            // 输出 20160820/42a79759f284b767dfcb2a0197904287.jpg
            $data['saveName'] = $info->getSaveName();
            // 输出 42a79759f284b767dfcb2a0197904287.jpg
            $data['filename'] = $info->getFilename();
            ajaxmsg($data);
        } else {
            // 上传失败获取错误信息
            ajaxmsg($file->getError(), 400);
        }
    }else{
        ajaxmsg($file, 400);
    }
}
        ```

Answer 1

原来只是前端发送fromData时，加了[],去掉就好了

Answer 2

碰到同样问题，@imageAdded
点击上传根本就没触发函数，查看源码是用的@image-added，才解决问题

Answer 3

上传无效是怎么个无效法？前端没有将文件对象通过表单对象传给后台，还是后台没有接收到传来的表单对象所包含的文件对象？

Answer 4

    <vue-editor
      id="editor"
      useCustomImageHandler
      @image-added="handleImageAdded"
      v-model="model.body"
    ></vue-editor>