一个Vue图片上传剪裁压缩组件

大佬赏个star吧

github : github.com/Storm4542/v…

文档&&示例地址

storm4542.github.io/vue-picture…

示例

 <g-uploader
                height="80"
                width="80"
                :action=URL
                :imageCut="true"
                name="file"
                method="POST"
                :parseResponse="parseResponse"
                @addFile=addFile
                :file-list.sync="fileList"
        >
</g-uploader>
复制代码

 export default {
        data() {
            return {
                fileList: [],
                URL: 'https://image-server-gulu.herokuapp.com/upload',
            };
        },
        methods: {
            parseResponse(response) {
              	//对response做处理
               	// ...
                return response;
            },
            addFile(file) { 
              //固定写入
                this.fileList.push(file);
            }
        }
    };
复制代码

API

名称	描述	默认值	是否必须	数据类型
action	上传图片地址	-	是	String
imageCut	是否开启剪裁模式(注:开启剪裁模式后，每次只能上传一张图片)	true	否	Boolean
name	传给后台的 name	-	是	String
method	方法	POST	否	String
parseResponse	响应处理函数	-	是	Function
fileList	文件列表	[ ]	否	Array
addFile	更新文件列表函数(按照示例写在项目中即可)	-	是	Function
height	图片和添加图片按钮的高度	80	否	String||Number
width	图片和添加图片按钮的宽度	80	否	String||Number

转载于:https://juejin.im/post/5c99c4b05188251d7d025f45