一個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