本篇文章为大家展示了vue中实现图片和文件上传功能，内容简明扼要并且容易理解，绝对能使你眼前一亮，通过这篇文章的详细介绍希望你能有所收获。
html页面
<input type="file" value="" id="file" @change='onUpload'>//注意不能带括号
js代码
methods: {
//上传图片
onUpload(e){
var formData = new FormData();
f ormData.append('file', e.target.files[0]);
formData.append('type', 'test');
$.ajax({
url: '/ShopApi/util/upload.weixun'，//这里是后台接口需要换掉
type: 'POST',
dataType: 'json',
cache: false,
data: formData,
processData: false,
contentType: false,
success: (res) => {
if (res.code === 200) {
var img_tpl ='<div class="picture" ><img id="preview" src="'+后台返回的tu'pian路径+'" /><span class="r-span"
onclick = "onDeletePicture()" >删除</span></div>';
$("#refund_img").after(img_tpl);
}
},
error: function(err) {
alert("网络错误");
}
});
}
}上述内容就是vue中实现图片和文件上传功能，你们学到知识或技能了吗？如果还想学到更多技能或者丰富自己的知识储备，欢迎关注亿速云行业资讯频道。
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
