vue上传多张图片
之前在网上看到一个很不错的vue上传图片组件,下面是完整代码。插件链接:http://www.jq22.com/jquery-info15578或者将文件拖到此处选中{{imgList.le
·
<form>
<label class="flex">
<img src="img/icon30.png" alt="..." />
<input type="file" name='pics' accept="image/*" multiple class="hide"
@change="doUpload_click" />
</label>
</form>
data: {
pics: []
}
doUpload_click(e) {
// 上传图片
let that = this;
for (var k = 0; k < e.target.files.length; k++) {
let file_val = e.target.files[k];
let imgFile = new FormData();
imgFile.append('fileType', 'IMAGE')
imgFile.append('file', file_val);
imgFile.append('filename', 'pics');
imgFile.append('pics', file_val);
if (file_val) {
axios({
method: 'post',
url: href_val + '/upload/image',
headers: {
'Authori-zation': 'Bearer ' + token
},
data: imgFile
})
.then(res => {
console.log("上传图片结果", res.data.data)
if (res.data.status == 200) {
if (that.pics.includes(res.data.data.url)) {
that.$toast('图片已存在');
return file_val
} else {
that.pics.push(res.data.data.url)
}
} else {
that.$toast(res.data.msg);
}
}).catch(function(error) {
that.$toast('接口错误');
});
}
}
}
更多推荐
已为社区贡献26条内容
所有评论(0)