vue+原生js的文件上传流程

<div id="el-android-con-a">
          <input type="file" id="filePic"  ref="filePic" multiple="multiple" @change="getFile($event)" value="" name="upload" accept="image/*">
</div>


#el-android-con-a {
position: relative;
input {
opacity: 0;
width: 100%;
height: 100%;
z-index: 9999;
font-size: 40px;
}
width: 180px;
line-height: 48px;
height: 48px;
background-color: #2BA245;
color: #ffffff;
border: none;
-webkit-box-sizing: border-box;
box-sizing: border-box;
vertical-align: top;
margin: 0;
border-radius: 10px;
margin-bottom: 24px;
margin-right: 22px;

&:before {
content: "上传照片";
width: 130px;
height: 24px;
line-height: 24px;
/*position: relative;*/
/*top: 5px;*/
display: inline-block;
background: url("../../images/app/icon-phone.png") no-repeat;
margin-right: 8px;
position: absolute;
top: 11px;
left: 43px;
}
}

样式需要设置input的字体大小用于控制按钮可以操作,外层图标及文字使用伪类before 及content属性进行控制。

accept="image/*" 该属性可能会影响到安卓手机的照片功能的启动,导致无法响应照片提交功能组件。

以下,数据更新函数及文件提交函数

      async getFile(event) {//更新文件提交的函数
var file = event.target.files;
for (let i = 0; i < file.length; i++) {
// 上传类型判断
var imgName = file[i].name;
var idx = imgName.lastIndexOf(".");
if (idx != -1) {
var ext = imgName.substr(idx + 1).toUpperCase();
ext = ext.toLowerCase();
this.filePic.push(file[i]);
} else {
}
}
console.error(this.filePic)
console.info(event.target.files)
if(this.filePic.length > 0){
this.submitAddFile();//提交文件
this.$refs.filePic.value = ‘‘; // 清空file文件,防止前一次将后一次的文件遮挡
this.filePic= [];//清除已经提交过的数据
}

},
submitAddFile() {//文件提交函数
if (0 == this.filePic.length) {
this.$message({
type: ‘info‘,
message: ‘请选择要上传的文件‘
});
return;
}

let formData = new FormData();
// formData.append(‘num‘, this.addType);
// formData.append(‘linkId‘,this.addId);
formData.append("attachGroupIds", this.attachGroupIds);
for (let i = 0; i < this.filePic.length; i++) {
formData.append(‘file‘, this.filePic[i]);
}
// formFile.append("action", "UploadVMKImagePath");
// formFile.append("file", fileObj); //加入文件对象
let data = formData;
let _this = this;
$.ajax({
url: this.fileUrl,
data: data,
type: "POST",
dataType: "json",
cache: false,//上传文件无需缓存
processData: false,//用于对data参数进行序列化处理 这里必须false
contentType: false, //必须
success: function (result) {
// layer.msg(‘数据导入完成‘);
// layer.close(index)
console.error(result)
this.filePic =[];
_this.handleAvatarSuccess(result);//完成列表刷新进行显示
},
})
},

 

vue+原生js的文件上传流程

上一篇:通用JS六


下一篇:一篇文章带你了解CSS 分页实例