vue图片上传

最新推荐文章于 2023-12-27 14:35:55 发布

hangGe0111

最新推荐文章于 2023-12-27 14:35:55 发布

阅读量322

点赞数

分类专栏： html 文章标签： vue图片上传

本文链接：https://blog.csdn.net/hangGe0111/article/details/85293420

版权

本文介绍了使用Vue进行图片上传的实现方法，包括通过input[type='file']获取图片信息，后台生成网络资源，保存时传递图片URL，以及如何预览和限制只显示一张预览图。并推荐了三个相关博客资源。

摘要由CSDN通过智能技术生成

1.思路：通过input[type="file"],将图片信息传给后台，后台生成网络图片资源，点击保存，再把该网络图片地址传给后台；

2.代码

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			* {
				margin: 0;
				padding: 0;
			}
			.clearfix:before, .clearfix:after { content: '.'; display: block; visibility: hidden; font-size: 0; line-height: 0; width: 0; height: 0; }  .clearfix:after { clear: both; }  .clearfix { zoom: 1; }  .mt10 { margin-top: 10px; }  .w400 { width: 400px; } .fl { float: left; }  .fr { float: right; } .imgBox { text-align: center; }  .imgBox .img { width: 200px; height: 300px; }
			
			.btn-style {
				width: 100px;
				height: 50px;
				line-height: 50px;
				text-align: center;
				background-color: deepskyblue;
				color: #fff;
				font-size: 16px;
				border-radius: 5px;
				position: relative;