1.限制图片
<!-- 图片 -->
<div>
<input
style="display: none"
type="file"
id="uploadInputone"
accept="image/*" //限制图片
@change="handleChange($event)"
/>
</div>
2.限制文件
<div>
<input
style="display: none"
type="file"
id="uploadInput"
accept="application/msword,text/plain,application/vnd.ms-excel,application/vnd.openxmlformats-officedocument.spreadsheetml.sheet,application/vnd.ms-powerpoint,application/vnd.openxmlformats-officedocument.wordprocessingml.document"
//限制文件标识
multiple="multiplt"
@change="handleChange($event)"
/>
</div>
3.都可以上传
<div>
<input
style="display: none"
type="file"
id="uploadInput"
multiple="multiplt"
@change="handleChange($event)"
/>
</div>
在需要的地方调取方法
scwenjian(val) {
this.tupianfalg = val;
let fileDom = document.querySelector("#uploadInput");
//切记标签id保持一致
fileDom.click();
},
// 上传文件
handleChange(e) {
// this.chuandi.title = e.target.files[0].name;
//转成了formdata格式,//上传给后台。下面代码根据需求
var formData = new FormData();
formData.append("side", "front");
formData.append("file", e.target.files[0]);
shangchuanfali(formData).then((res) => {
if (this.tupianfalg == 0) {
this.zhanxian.pictureurls.push(res);
this.chuandi.pictureurl = this.zhanxian.pictureurls.join(",");
} else {
this.zhanxian.urls.push(res);
this.chuandi.url = this.zhanxian.urls.join(",");
}
});
},