文档

Appearance

图片编辑 ​

示例 ​

​

版本说明 ​

时间修改人备注版本
2023-03-10LZJ初始化文档1.0.0

项目示例 ​

svn://39.107.13.238:12580/base_digi

位置：/src/pages/demo/ossUpload/index

使用说明 ​

1. 使用插件 tui-image-editor ​

npm安装

npm install --save tui-image-editor

2. 使用示例 ​

（1. 引入组件

import imgEditor from "@/components/imgEditor/index.vue"

（2. 使用组件

template ​

<img-editor :show="imgEditorConf.show"  :img-url="imgEditorConf.picUrl" :uploadType="1" @onFinish="imgEditorConf.onFinish" @onClose="imgEditorConf.onClose"></img-editor>

js ​

components: {
    imgEditor,
},
const imgEditorConf = reactive({
    show: false,
    editorKey: '', //对应表单字段
    picUrl: '',
    openEdit(file, key) {
        imgEditorConf.editorKey = key;
        let reader = new FileReader();
        reader.readAsDataURL(file);
        reader.onload = () => {
            imgEditorConf.picUrl = String(reader.result)
            // 显示裁切弹窗
            imgEditorConf.show = true;
        }
    },
    onFinish(res){
        let fileList = formConf.objForm[imgEditorConf.editorKey];
        fileList[fileList.length - 1].thumbUrl = res.filename_url;
        //name为图片短链接，保存时用
        fileList[fileList.length - 1].filename = res.filename;
        imgEditorConf.show = false;
    },
    onClose() {
        imgEditorConf.show = false;
        if (!formConf.objForm[imgEditorConf.editorKey]) return;
        //注意这里只处理了一张图片的情况
        formConf.objForm[imgEditorConf.editorKey].splice(-1, 1)
    }
})

（3 组件说明 props

参数说明类型默认值版本
show控制图片编辑弹框展示Booleanfalse1.0.0
imgUrl图片路径String--1.0.0
uploadType图片上传的方式Number31.0.0
ossCongfigoss配置，uploadType为2时生效Object{}1.0.0
  • imgUrl: 可以为base64和网络图片（注意网络图片需要在同一域名下）；
  • uploadType: 1-base64上传、2-oss上传、3-不做上传、返回file对象；
  • ossCongfig: 同objOss.init方法的options;