vue.js php 上传图片,H5 利用vue实现图片上传功能。

任务系统

accept="image/png,image/jpeg,image/gif,image/jpg" />

提交任务

返回

newVue({

el:'#app',

data: {

formData:newFormData(),

imgs: {},

imgLen:0,

txtVal:0,

desc:"",

},

created() {

},

methods: {

descInput() {//this.txtVal = this.desc.length;

},

addImg(event) {

let inputDOM= this.$refs.inputer;//通过DOM取文件数据

this.fil =inputDOM.files;

console.log(inputDOM.files)

let oldLen= this.imgLen;for (let i = 0; i < this.fil.length; i++) {

let size= Math.floor(this.fil[i].size / 1024);if (size > 5 * 1024 * 1024) {

alert('请选择5M以内的图片！');return false}this.imgLen++;this.$set(this.imgs, this.fil[i].name + '?' + new Date().getTime() + i, this.fil[i]);

console.log(this.imgs);

}

},

getObjectURL(file) {var url = null;if (window.createObjectURL != undefined) { //basic

url =window.createObjectURL(file);

}else if (window.URL != undefined) { //mozilla(firefox)

url =window.URL.createObjectURL(file);

}else if (window.webkitURL != undefined) { //webkit or chrome

url =window.webkitURL.createObjectURL(file);

}returnurl;

},

delImg(key) {this.$delete(this.imgs, key);this.imgLen--;

},//提交上传图片

submit() {

console.log(this.imgs)

console.log(11)for (let key in this.imgs) {

let name= key.split('?')[0];

console.log(this.imgs[key]);this.formData.append(name, this.imgs[key]);

}//$.ajax({

//url: '/material/uploadFile',

//type: 'POST',

//cache: false, //上传文件不需要缓存

//data: this.formData,

//processData: false, // 告诉jQuery不要去处理发送的数据

//contentType: false, // 告诉jQuery不要去设置Content-Type请求头

//success: function (data) {

//},

//error: function (data) {

//}

//})

},

}

});