跨平台应用开发进阶(四) ：uni-app 实现上传图片(1)

var _self = this;
// 图片选择，只支持一次选择一张图片
uni.chooseImage({
	count: 1,
	sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
	sourceType: ['album', 'camera'], //从相册、相机选择
	success: function (res) {
		console.log('res:', res)
		_self.curTotal++;
		_self.imgList.push(res.tempFilePaths[0]);
		const tempFilePaths = res.tempFilePaths[0];
		// 图片上传
		const uploadTask = uni.uploadFile({
			url : 'http://22.189.25.91:9988/admin/sys-file/upload', // post请求地址
		    filePath: tempFilePaths,
		    name: 'file',  // 待确认
		    header: {
				'Content-Type': 'multipart/form-data',
				'Authorization': getApp().globalData.token || 'Basic YXBwOmFwcA=='
			},
			success: function (uploadFileRes) {
				console.log('Success:', uploadFileRes);
				_self.imgsID.push(JSON.parse(uploadFileRes.data).data.fileId);
				console.log('\_self.imgsID:', _self.imgsID)
			},
			fail: function (uploadFileFail) {
				console.log('Error:', uploadFileFail.data);
			},
			complete: ()=> {
				console.log('Complete:');
			}
		});
	},
	error : function(e){
		console.log(e);
	}

});
}

**JS逻辑层-图片预览**

/**
* 图片预览
* @param {Object} i 选择的图片索引
* @param {Object} imgList 自行封装的图片数组
*/
viewImage(i, imgList) {
let imgurl = []
imgList.forEach(item => imgurl.push(item))
uni.previewImage({
urls: imgurl,
current: imgList[i]
});
}

**JS逻辑层-图片删除**

/** 图片删除
* @param {Object} i 删除图片的索引
* @param {Object} imgList 自行封装的图片数组
*/
delImg(i, imgList, imgsID) {
uni.showModal({
title: ‘提示’,
content: ‘确定要删除照片吗？’,
cancelText: ‘取消’,
confirmText: ‘确定’,
success: res => {
if(res.confirm) {
imgList.splice(i, 1);
imgsID.splice(i, 1);
this.curTotal–;
}
}
})
}
}

**JS逻辑层-图片压缩**

// src: 压缩转换原始图片的路径
// _this: 当前的this，如果不想传递this可将该函数改为箭头函数
// callback: 回调函数，详情chooseImage方法
function compressImage(src, _this, callback) {
var dstname = “_doc/IMG-” + (new Date()).valueOf() + “.jpg”; //设置压缩后图片的路径
var width, height, quality;
width = “80%”;
height = “80%”;
quality = 80;
// 具体情况可查看HTML5+文档 ===> http://www.html5plus.org/doc/zh_cn/zip.html#plus.zip.compressImage
plus.zip.compressImage({
src: src,
dst: dstname,
overwrite: true,
quality: quality,
width: width,
height: height
},
function(event) {
callback(event.target, dstname, _this);
},
function(error) {
return src;
});
}

> 
> 注意⚠️：在图片上传之前进行图片压缩，由于图片压缩时间过长，应采用`await`上传图片之前先压缩，否则上传会比压缩先执行。
> 
> 
> 


应用实现效果如下：  
 **拍照或从相册选择图片/上传一张图片**  
 ![在这里插入图片描述](https://img-blog.csdnimg.cn/fdada5b13b1c431ab3e467dd3609ccd2.png) ![在这里插入图片描述](https://img-blog.csdnimg.cn/6066b46e99a6490ab22b25eeea5bcc6b.png)  
 **上传3张图片/删除图片**  
 ![在这里插入图片描述](https://img-blog.csdnimg.cn/b7df4144a778409c84f4c1bedbf1d9ab.png) ![在这里插入图片描述](https://img-blog.csdnimg.cn/96be5037045344c4b7004361e18290f1.png)


### 三、知识点总结


#### 3.1 实现原理


客户端通过`uni.chooseImage()`方法选择本地相册图片或者拍照，获取到一个本地资源的临时文件路径后，然后以 `POST` 请求方式通过`uni.uploadFile()`方法将本地资源上传到开发者服务器，`POST` 请求中 `content-type` 为 `multipart/form-data`。


#### 3.2 注意事项


* ⚠️图片选择应用`uni.chooseImage()`实现，请谨慎使用`uni ui`封装的所谓更完善的`uni-file-picker`组件，其将资源文件选择、上传到`uniCloud`的免费存储和`cdn`中，一站式集成，个人无法修改。强烈推荐不使用！
* ⚠️图片上传应用`uni.uploadFile()`实现，上传成功后回调函数返回的`uploadFileRes.data`是个`String`类型，转对象的时候需要应用`JSON.parse()`解析。

 

JSON.parse(uploadFileRes.data).data.fileId)

{
“data”: “{“code”:0,“msg”:null,“data”:{“bucketName”:“cicc”,“fileName”:“5aaa39d669224ffb869b60d245b0751a.jpg”,“original”:“1644999553865_mmexport1644913914292.jpg”,“url”:”/admin/sys-file/cicc/5aaa39d669224ffb869b60d245b0751a.jpg",“fileId”:“172”}}",
“statusCode”: 200,
“errMsg”: “uploadFile:ok”
}

* `uni.uploadFile()` OBJECT 参数说明部分中`name`属性为待上传文件对应的 `key` , 开发者在服务器端通过这个 `key` 可以获取到文件二进制内容，前后端对于该key应保持一致，否则会导致服务无法请求。  
 ![在这里插入图片描述](https://img-blog.csdnimg.cn/273ee19aaabb4d338b9baac51b7622b3.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBATm8gU2lsdmVyIEJ1bGxldA==,size_20,color_FFFFFF,t_70,g_se,x_16)
* 图片预览应用`uni.previewImage()`实现，没遇到坑，大家可根据需求按照门户参数使用。
#### 总结一下



面试前要精心做好准备，简历上写的知识点和原理都需要准备好，项目上多想想难点和亮点，这是面试时能和别人不一样的地方。

还有就是表现出自己的谦虚好学，以及对于未来持续进阶的规划，企业招人更偏爱稳定的人。

**[开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】](https://bbs.csdn.net/topics/618166371)**

万事开头难，但是程序员这一条路坚持几年后发展空间还是非常大的，一切重在坚持。



为了帮助大家更好更高效的准备面试，特别整理了《前端工程师面试手册》电子稿文件。

![](https://img-blog.csdnimg.cn/img_convert/621960a57eb42479e02d6d64c0c81891.png)



![](https://img-blog.csdnimg.cn/img_convert/5230c48fd0fcb265f3401a21603bda2b.png)



**前端面试题汇总**



![](https://img-blog.csdnimg.cn/img_convert/42728594459506983a38ca2b86545fc6.png)

**JavaScript**



![](https://img-blog.csdnimg.cn/img_convert/7796de226b373d068d8f5bef31e668ce.png)



**性能**

![](https://img-blog.csdnimg.cn/img_convert/d7f6750332c78eb27cc606540cdce3b4.png)



**linux**



![](https://img-blog.csdnimg.cn/img_convert/ed368cc25284edda453a4c6cb49916ef.png)



**前端资料汇总**

![](https://img-blog.csdnimg.cn/img_convert/6e0ba223f65e063db5b1b4b6aa26129a.png)

前端工程师岗位缺口一直很大，符合岗位要求的人越来越少，所以学习前端的小伙伴要注意了，一定要把技能学到扎实，做有含金量的项目，这样在找工作的时候无论遇到什么情况，问题都不会大。