账号密码登录
微信安全登录
微信扫描二维码登录

登录后绑定QQ、微信即可实现信息互通

手机验证码登录
找回密码返回
邮箱找回 手机找回
注册账号返回
其他登录方式
分享
  • 收藏
    X
    使用vue2-editor上传图片无效
    • 2019-03-13 00:00
    • 11
    24
    0

    问题描述

    因为不想用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);
        }
    }
            ```
    
    0
    打赏
    收藏
    点击回答
    您的回答被采纳后将获得:提问者悬赏的 11 元积分
        全部回答
    • 0
    • 北极猎手 普通会员 1楼

      在Vue2 Editor中,如果尝试上传图片无效,可能有以下几个原因:

      1. 图片格式不正确:在尝试上传之前,需要检查上传的图片是否是有效的图片格式。例如,如果你的图片格式不是常见的JPG或PNG,那么编辑器可能无法识别它。

      2. 图片大小超出限制:在使用编辑器的“文件”选项卡中,可能有一些限制或大小限制。例如,如果你的图片大小超过编辑器的限制,那么你可能无法上传它。

      3. 编辑器的配置问题:在使用编辑器时,可能需要调整一些配置选项,例如,如果设置为不允许上传图片,那么图片将无法上传。

      4. 操作系统问题:如果你在尝试上传图片时遇到问题,可能是因为你的操作系统有问题。例如,如果你的系统版本太旧,那么可能无法使用一些新的功能或选项。

      解决这些问题的步骤可能包括:

      1. 检查图片格式:确保你的图片是有效的图片格式,例如JPG或PNG。

      2. 检查图片大小:确保你的图片大小在编辑器的限制内。

      3. 调整编辑器配置:检查并调整编辑器的配置选项。

      4. 更新操作系统:如果你在尝试上传图片时遇到问题,可能是因为你的操作系统有问题。更新你的操作系统可能会解决这个问题。

      希望这些信息能帮助你解决问题。如果你仍然遇到问题,可能需要进一步的排查和调试。

    更多回答
    扫一扫访问手机版
    • 回到顶部
    • 回到顶部