uniapp生成图片分享,uniapp上传多张图片
本文为大家带来一些关于uniapp的知识，主要包括如何上传图片。下面就来看看怎么做，希望对你有帮助。
UNI-APP开发(仿饿)开发课程：进入学习
推荐：《uniapp教程》
一、前言
在应用uni-app开发跨平台的app项目时，上传图片、文档等资源是很常见的：点击相框按钮选择图片上传，点击每张图片预览，点击每张图片删除图标删除对应的图片。基本功能点如下：
选择本地相册中的图片或通过相机拍照上传图片；您可以预览您选择上传的图片；删除错误或未选中的图片；
二、项目实战
在研究了uni-app portal之后，官网推荐使用uni.chooseImage(OBJECT)接口从本地相册中选择图片或者用相机拍照。
对于提到的门户
大部分照片都是选择上传的。uni ui封装了更完整的uni-file-picker组件，文件被选中上传到uniCloud的免费存储和cdn，实现一站式集成。强烈推荐。
我不同意。通过实践得知，该接口只能使客户端将图片资源上传到uniCloud的后台服务器，而不支持本地服务器，不符合功能要求，需要谨慎使用。
项目实施页面的一般逻辑如下，完整的页面实施逻辑可从《Uni-app 实现图片上传、删除、预览、压缩》下载。
视图渲染
模板
视图class=center
！-上传图片-
视图class=uploadClass
view class= img class v-for=(item，I)in imgList :key= I @ click= vieimage(I，img list)
image style= width:100%；高度：100%；:src=item/image
view @click.stop=delImg(i，imgList，imgsID) style= display:inline；
uni-icons type= close empty class= close class size= 20 /uni-icons
/查看
/查看
view v-show= curt otal 3 class= camera class @ tap= upload
image style= width:48 rpx；高度：38rpxsrc= @/static/app center/zhaoxiang Ji @ 2x . png /image
/查看
！-关于图片数量的提示-
view class= total class { { curt otal } }/3/view
/视图/模板JS逻辑层-图片上传
//图片选择上传(){
var _ self=this
//图像选择，一次只能选择一张图像。
uni.chooseImage({
计数：1，
大小类型：[原始，压缩]，//可以指定是原始图像还是压缩图像。默认情况下，两者都有。
源类型：[相册，相机]，//从相册和相机中选择
成功：函数(res) {
console.log(res:，res)
_ self.curTotal
_ self . img list . push(RES . tempfile paths[0])；
const tempfile paths=RES . tempfile paths[0]；
//图像上传
const upload task=uni . upload file({
URL: 335822 . 189 . 25 . 91:9988/admin/sys-file/upload ，//发布请求地址
filePath: tempFilePaths，
名称：“文件”，//待确认
标题：{
“内容类型”:“多部分/形式数据”，
authorization :getApp(). global data . token Basic YXBwOmFwcA==
},
成功：函数(uploadFileRes) {
console.log(Success:，uploadFileRes)；
_ self . img sid . push(JSON . parse(upload fileres . data). data . fileid)；
console.log(_self.imgsID:，_self.imgsID)
},
失败：函数(上传文件失败){
console.log(Error:，uploadfile fail . data)；
},
完成：()={
console . log( Complete:“)；
}
});
},
错误：函数(e){
console . log(e)；
}
});}JS逻辑层-图片预览
/**
*图片预览
* @param {Object}我选择的图片索引
* @param {Object} imgList自包装图片数组
*/viewImage(i，imgList) {
让imgurl=[]
img list . foreach(item=imgurl . push(item))
uni.previewImage({
URL:imgurl，
当前：imgList[i]
});}JS逻辑层-图片删除
/* *图像删除
* @param {Object}我删除图片的索引。
* @param {Object} imgList自包装图片数组
*/delImg(i，imgList，imgsID) {
uni.showModal({
标题：“提示”，
内容：“您确定要删除照片吗？”,
CancelText:取消，
确认文本：好，
成功：res={
if(res.confirm) {
imgList.splice(i，1)；
imgsID.splice(i，1)；
this . curt otal-；
}
}
})}}JS逻辑层-图片压缩
//src:压缩转换原始图片的路径//_this: current this。如果不想传这个，可以把这个函数改成箭头函数。//回调：回调函数。有关详细信息，请选择Image方法函数压缩图像(src，_ this，callback) {
var dstname=_doc/IMG-(新日期())。valueOf()”。jpg ；//设置压缩图片的路径
不同宽度、高度、质量；
宽度= 80% ；
高度= 80% ；
质量=80；
//详见html 5 document==http://www.html5plus.org/doc/zh _ cn/zip . html # plus . zip . compress image。
plus.zip.compressImage({
src: src，
dst: dstname，
覆盖：真，
质量：质量，
宽度：宽度，
身高：身高}，
功能(事件){
回调(event.target，dstname，_ this)；
},
功能(错误){
返回src
});}注意：上传前先压缩图片。因为图片压缩时间太长，所以在上传图片之前应该使用await对图片进行压缩，否则会在压缩之前进行上传。
应用效果如下：拍照或从相册选择图片/上传一张图片上传3张图片/删除图片
三、知识点总结
3.1 实现原理
客户端通过uni.chooseImage()方法选择本地相册图片或拍照，获取本地资源的临时文件路径，然后在POST请求中通过uni.uploadFile()方法将本地资源上传到开发者服务器，其中内容类型为multipart/form-data。
3.2 注意事项
图像选择由uni.chooseImage()实现。请谨慎使用uni ui封装的所谓更完善的uni-file-picker组件，该组件选择并上传资源文件到uniCloud和cdn的免费存储。它是一站式集成的，个人无法修改。强烈建议不要用！
Uni.uploadFile()用于上传图片，上传成功后回调函数返回的uploadFileRes.data为字符串类型。解析对象需要JSON.parse()。
JSON . parse(uploadfileres . data). data . fileid){
data: {\code\:0，\msg\:null，\ data \ :{ \ bucket name \ :\ CICC \ ，\ fileName \ :\ 5aa 39d 669224 FFB 869 b 60d 245 b 0751 a . jpg \ ，\ original \ :\ 1644999553865 _ mmexport 1644913914292 . jpg \ ，\url\ :
statusCode: 200，
errmsg : UploadFile:OK } uni的参数描述部分的name属性。UploadFile()对象是与要上传的文件相对应的键。开发者可以在服务器端通过这个密钥获取文件的二进制内容，前后端要和这个密钥一致，否则无法请求服务。
图片预览是通过uni.previewImage()实现的，没有坑。你可以根据自己的需求，按照门户参数来使用。
推荐：《uniapp学习教程》以上是分析uni-app如何一起上传图片的细节。更多请关注我们的其他相关文章！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。