富文本编辑框中实现 图片 附件上传 功能 回显

重点： 1 富文本编辑器使用 vue-quill-editor npm install vue-quill-editor --save 2 quill-editor 自带图片上传功能；但是是把图片以base64 格式上传到服务器；base64字符串字节太长；对于数据库存贮不好；消耗性能；文件也是相同原理 3 解决方法：可以采用 elemment-ui 中的el-upload组件；组件里面的 action可以绑定接受图片和文件的服务器地址； 4 解决方法：但是提交图片想要用接口上传；不是固定的服务器地址； 可以用原生的input元素；

    <div id="pict">
        <div class="icon-po" v-for="(item,index) in img">
            <img  :src="item" >
            <div class="icon-close" @click="imgclose(index)">×</div>
        </div>
        <input type="file" name="file" @change="onRead" accept="image/jpg, image/jpeg" multiple class="img-add">
        </input>
    </div>

5 在vue中监听@change 事件

   data(){
        return{
            img:[],
        }
    },
methods:{
        onRead(e){
            //注意，我们这里没有使用form表单提交文件，所以需要用new FormData来进行提交
            let fd= new FormData();
            fd.append("upfile", e.file);//第一个参数字符串可以填任意命名，第二个根据对象属性来找到file
            
            axios.post(url, {params:fd}) //url是服务器的提交地址
                //成功回调
                .then(res => {this.img.push(res.data.imgpath); }) //将服务器返回的图片链接添加进img数组，进行预览展示
                //失败回调
                .catch(err => {alert(err);});
                };
        },
        //删除预览图片按钮
        imgclose(e){
            this.img.splice(e,1);
        }
}