vue-avatar

基于vuejs2.0 + webpack環境使用的上傳組件

支持服務器的域名和接口單獨設置

支持自定義提交字段

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

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

支持自定義回調方法

支持裁減圖片縮放，包括移動端手勢支持

Options

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

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

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

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

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

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

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

:limit (int) 限制大小

:multiple (bool) 多文件上傳

:preview (bool) 預覽圖片

:auto (bool) 是否自動上傳

:crop (bool) 是否開啟裁減

:width (int) 裁減寬度

:height (int) 裁減高度

:quality (float) 裁減質量 (0～1)，默認0.8

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

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

:container (DOM) 包含組件的根dom節點，這個是為了在網頁內容很長的情況下為了顯示正常使用的(移動滾動條)，不設置默認指向document.body。

@success="upsuccess" 成功上傳回調

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: {

// 上傳成功后觸發

upsuccess () {

console.log('success')

}

}

}

Conatct

Author: gggso

Tencent QQ : 28040824

基于 jinzhe 版修改

升級為支持2.0

格式化了js

css 修改為使用 stylus css

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。