vue-avatar

基于vuejs2.0 + webpack環(huán)境使用的上傳組件

支持服務(wù)器的域名和接口單獨(dú)設(shè)置

支持自定義提交字段

支持自定義xhr 提交的header字段/表單name/限定上傳格式/文件大小／

支持圖片上傳前預(yù)先裁剪，其中包括裁減按鈕替換、寬高、質(zhì)量(quality)

支持自定義回調(diào)方法

支持裁減圖片縮放，包括移動(dòng)端手勢(shì)支持

Options

:server (string) 服務(wù)器地址 // Server host,like "http://gggso.com"

:api (string) // Server api path,like "/api/v1/getdata/"

:params (object) 額外附加的字段，它是一個(gè)object

:filename (string) 文件表單名稱，默認(rèn)為file

v-model="newavatar" (string) 返回的文件名或地址

:ext (string) 限制文件格式如“jpg,png,zip”

:header (object) 提交服務(wù)端的頭部字段，它是一個(gè)object

:limit (int) 限制大小

:multiple (bool) 多文件上傳

:preview (bool) 預(yù)覽圖片

:auto (bool) 是否自動(dòng)上傳

:crop (bool) 是否開啟裁減

:width (int) 裁減寬度

:height (int) 裁減高度

:quality (float) 裁減質(zhì)量 (0～1)，默認(rèn)0.8

:ok (string) 確定裁減顯示文本

:cancel (string) 取消裁減顯示文本

:container (DOM) 包含組件的根dom節(jié)點(diǎn)，這個(gè)是為了在網(wǎng)頁內(nèi)容很長的情況下為了顯示正常使用的(移動(dòng)滾動(dòng)條)，不設(shè)置默認(rèn)指向document.body。

@success="upsuccess" 成功上傳回調(diào)

How to use?

import upload from './uploadavatar.vue'

export default {

components: { upload },

data () {

return {

// 上傳成功后的URL

newavatar: null,

upload: {

server: '',

api: '',

params: {

token: ''

},

preview: true,

crop: true,

width: 400,

height: 400,

cancel: '取消',

ok: '裁剪',

filename: 'MultiPart File'

}

}

},

methods: {

// 上傳成功后觸發(fā)

upsuccess () {

console.log('success')

}

}

}

Conatct

Author: gggso

Tencent QQ : 28040824

基于 jinzhe 版修改

升級(jí)為支持2.0

格式化了js

css 修改為使用 stylus css

總結(jié)

以上是生活随笔為你收集整理的vue.js上传头像插件_一个基于vue2.0的头像上传组件的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。