图片上传「文件流形式」

预计阅读时间: 3 分钟

业务需求：

文件上传在项目开发过程中是必不可少的一项功能。目前大多数文件上传都是采用文件流的形式进行上传。随着技术的进步，云服务技术的产生，现在上传文件相比原来更迅速、更方便，对上传文件的管理较之前来说方便了许多；
为兼顾原有的项目，上传文件没有采用现在使用比较多的阿里云 oss 文件直传，而是采用的后台辅助存储上传的形式来进行文件的存储。相对来说，文件上传比较慢，等待时间有点长。获取文件不像 oss 直传那样返回一个绝对的地址链接，而是返回的一个文件的 key，通过指定的参数拼接来换取图片地址；
此次简称为‘文件流上传’，前期开发的时候出现了一些错误，现将原有的文件流上传文件的具体实现步骤做相应分析处理，以便日后开发过程中使用。

效果图：

效果图

注：图片上传成功后，会在右侧灰色图片区域内进行展示。

布局代码一：

代码案例

布局代码

基于【 Vue 】
采用 elementUI 的 el-input 标签与 input 文件上传标签相结合的方式；
wtLoading 为 UI 框架的 el-button 按钮 loading 加载状态。

样式代码：

CSS 样式

1// 上传按钮样式布局
2.uploadBtn {
3	display: block;
4	height: 100%;
5	width: 100%;
6	position: relative;
7	overflow: hidden;
8}
9
10.uploadBtn > input[type="file"] {
11	width: 100%;
12	opacity: 0;
13	cursor: pointer;
14	position: absolute;
15	top: 0;
16	right: 0;
17	bottom: 0;
18	left: 0;
19}

实现代码【 vue 】：

实现代码

1// 方式一：基于vue
2uploadImg(file) {
3	// 采用formData格式
4	let fd = new FormData();
5	fd.append("imgData", file);
6	this.$axios
7		.post("图片上传api", fd)
8		.then(res => {
9			let data = res.data;
10			if (data.code == "1") {
11				// 返回生成的图片ID
12				this.imgGid = data.imgGid;
13				// 拼接图片Id，获取绝对地址
14				this.imageUrl = this.pic + data.imgGid;
15				console.log('上传成功！')
16			} else {
17				console.log('上传失败！')
18			}
19		});
20}

布局代码二：

布局代码

基于【 JavaScript 】
借助 jQuery 的 form 表单 提交实现二进制流文件上传；
上传的过程中会动态加载一张 loading.gif 动态图，当图片上传完成或者上传失败时候移除 loading 图。

实现代码【 JavaScript 】：

实现代码

1const saveReport = function () {
2	/* jQuery.form表单提交数据 */
3	$("#addImg").ajaxSubmit({
4		type: "post",
5		url: "上传接口api",
6		data: {
7			picType: "jpg" // 图片格式
8		},
9		dataType: "json",
10		success: function (res) {
11			if (res.code == 1) {
12				/* 生成的图片ID */
13				avatars = res.imgGid;
14				/* 拼接回显图片 */
15				$("#upJPG").prepend('<img src="' + res.imgGid + '" class="imgStyle" />');
16				/* 删除图片 */
17				$(".close").on("click", function (e) {
18					/* 阻止图片跳转 */
19					e.stopPropagation();
20					/* 对dom的操作 */
21				});
22			}
23		},
24		error: function (err) {
25			hintCard("网络错误");
26		}
27	});
28	/* 防止表单自己再次提交，并跳转页面 */
29	return false;
30};

#图片上传「文件流形式」

#业务需求：

#效果图：

#布局代码一：

#样式代码：

#实现代码【 vue 】：

#布局代码二：

#实现代码【 JavaScript 】：

图片上传「文件流形式」

业务需求：

效果图：

布局代码一：

样式代码：

实现代码【 vue 】：

布局代码二：

实现代码【 JavaScript 】：