工作中遇到的需求 和大家分享下
- 以下代碼演示完成圖片上傳組件
- 注意 使用VUE1框架 VUE2 已經(jīng)廢棄 DISPATCH
主要用到以下特性
原始地址
1. 上傳組件 upload.vue
html
<div class="imgBox" v-bdstyle="compentstyle">
</div>
<div class="btnBox">
<input type="file" class="hidden" v-bindimgid="compentid" @change="sendFile">
<div class="btn" @click="checkFile" >上傳</div>
<div class="perBar" v-binduploadper="picUploadPer"></div>
</div>
js
import { fileImage } from "../js/picUpload.js" // 上傳接口
export default {
props:['compentstyle','compentid'], // 父組件中 傳遞給圖片上傳組件的樣式和ID ID為了出來一個頁面需要多個上傳情況
data(){
return {
info: { //服務器返回的圖片信息 需要自己修改
imgName:'',
imgPath:'./pic.jpg', // 默認圖 需要自己修改
imgPreviewPath:''
},
picUploadPer:"",//進度條
isFinish:false,
}
},
watch:{
'info':function(now,old){ //監(jiān)聽info 當圖片信息更新時 子組件像父組件發(fā)送自定義事件
this.$dispatch('imgFormChild',now,this.compentid)
}
},
computed:{
},
methods:{
checkFile(){
//let DOM = document.querySelector(`#${this.compentid}`)
let DOM = this.els[this.compentid]
DOM.click()
},
sendFile(e){ //頭像
this.picUploadPer = ''
this.isFinish = false
let image = e.target,
file = image.files[0]
this.fileInfo(file) //獲取上傳圖片的本地信息
this.uploadImg(file) //進行上傳
},
postImagePath(imgObj){ //通過對 this.info 的監(jiān)聽 獲得服務器返回信息后 才像父組件派發(fā)
this.$dispatch('imgFormChild',imgObj)
},
fileInfo(file){
this.fileName = file.name
this.fileSize = parseInt(file.size / 1000) + "KB"
},
uploadImg(file){
let _this = this
function getData(data){
let img = data.files[0]
_this.info = img
}
function getPer(per){
_this.picUploadPer = per
_this.isFinish = per == "100" ? true : false
}
fileImage(file,getData,getPer)
}
},
ready(){
}
}
2. 父頁面引用方法
html
<imgupload :compentstyle="imgStyle0" :compentid="fileComponents[0]"> </imgupload>
<imgupload :compentstyle="imgStyle1" :compentid="fileComponents[1]"> </imgupload>
<imgupload :compentstyle="imgStyle2" :compentid="fileComponents[2]"> </imgupload>
js
import imgupload from '../componets/upload.vue' //引入組件
export default{
data () {
return {
fileComponents:['file0','flie1','file2'], //為組件傳入三個ID
imgStyle0:{ // 組件樣式
width:'100px',
height:'100px',
backgroundColor: '#eee'
},
imgStyle1:{
width:'150px',
height:'150px',
backgroundColor: '#eee'
},
imgStyle2:{
width:'200px',
height:'200px',
backgroundColor: '#eee'
},
imgAll:{} //
/**
imgAll.file0{}
imgAll.file1{}
imgAll.file2{}
*/
}
},
components:{
imgupload //使用前聲明
},
events:{ // 此處接收子組件派發(fā)的事件
'imgFormChild':function(obj,id){
this.imgAll[id]=obj
console.log('info parent:',JSON.stringify(this.imgAll))
}
},
methods:{
},
ready(){
}
}
3. 自定義指令
directive.js
export const imgUploadObj = {
update(val) {
this.el.id = val
console.log('bind id', this.el.id)
}
}
export const imgUploadPer = {
update(val) {
let domStyle = this.el.style
domStyle.width = val + 'px'
domStyle.backgroundColor = `#0${val*2.55}0px`
}
}
export const style = {
update(val) {
let domStyle = this.el.style
for (let key in val) {
domStyle[key] = val[key]
}
}
}
main.js
import { imgUploadObj, imgUploadPer, style } from './directive'
Vue.directive('bindimgid', imgUploadObj) // 自定義指令
Vue.directive('binduploadper', imgUploadPer) // 自定義指令
Vue.directive('bdstyle', style) // 自定義指令