VUE+elementUI 实现上传图片

单独封装的上传图片的axios方法

// 上传文件
export function postfile(url, data) {
    let token = sessionStorage.getItem('token')
    return new Promise((resolve, reject) => {
        axios({
                url: baseUrl + url,
                method: 'POST',
                data: data,
                headers: {
                    'JMWYW-TOKEN': token,
                    'Content-Type':'multipart/form-data' 
                }
            })
            .then(res => {
                resolve(res.data);
            })
            .catch(err => {
                reject(err.data)
            })
    });
}

覆盖框架默认的上传方法 :http-request="requestUpload"

上传前对图片格式和大小做校验

// 富文本图片上传前
beforeUpload(file) {
    let types = ['image/jpeg', 'image/jpg', 'image/gif', 'image/bmp', 'image/png'];
    const isImage = types.includes(file.type);
    const isLtSize = file.size / 1024 / 1024 < 10;
    if (!isImage) {
        this.$message.error('上传图片只能是 JPG、JPEG、gif、bmp、PNG 格式!');
        return false;
    }
    if (!isLtSize) {
        this.$message.error('上传图片大小不能超过 10MB!');
        return false;
    }
    return true;
},

上传图片的方法

requestUpload(file) {
    let fd = new FormData()
    fd.append('file', file.file)
    this.$api.bfnews.bffiles(fd).then(res => {
        console.log(res);
        //获取富文本组件实例
        let quill = this.$refs.myQuillEditor.quill;
        let length = quill.getSelection().index;
        // 插入图片  res.url为服务器返回的图片地址
        let url = 'http://beiwei2021.jmwyw.com' + res.msg // 此处多加了一个域名
        quill.insertEmbed(length, "image", url);
        // 调整光标到最后
        quill.setSelection(length + 1);
    })
}