古建设计素材网站,如何制作网页广告,企业为什么要创新,微芒科技网站建设top前言#xff1a;最近的工作中出现了一个功能点#xff0c;具体写法我在前面的文章中已经阐述过#xff0c;不过之前的情况是上传图片调用后端的一个接口#xff0c;整个表单页面提交的时候调用的是另一个接口#xff0c;我也从中学到了另外的一种方法#xff0c;写到这里…前言最近的工作中出现了一个功能点具体写法我在前面的文章中已经阐述过不过之前的情况是上传图片调用后端的一个接口整个表单页面提交的时候调用的是另一个接口我也从中学到了另外的一种方法写到这里分享给大家。一、需求概述此次的后端接口需要三个参数分别是文章标题和文章内容以及文章中的图片在用户点击保存文章时需要这三个参数的传递。那么这个时候其实就已经完成了图片的上传以及文章的保存。二、相关文档做这个功能的过程中我更加确定了一件事情一定要看文档看文档看文档重要的事情说三遍使用类似uni-app这种api一定要看相关描述的官方文档人家都说了是官方文档就是写给开发人员参考使用的所以就不要去瞎百度找些乱七八糟的方法我就遇到了这个坑后来我还是看了官方文档解决的这个问题这里已经使用uni-app中uploadFIle将本地临时资源提交到服务器中但是请注意app的上传多张图片是必须要循环调用该api的小程序暂时不支持上传多张图片如下图所示三、具体实现方法写到这里我真的想说句fuck为啥呢因为我一直知道这个功能其实很简单但是官方文档看的不仔细又参考了一些乱七八糟的方法最终还是回到了参考官方文档的这个方法所以大家恩记得看文档具体的实现方法和参数说明uni-app提供了uni.uploadFile方法来实现文件上传功能。该方法可以将本地的文件上传到服务器并且可以携带额外的参数。使用uni.uploadFile方法可以方便地实现文件上传功能具体步骤如下首先调用uni.chooseImage或uni.chooseVideo方法选择文件并在成功回调中获取文件的本地路径。然后调用uni.uploadFile方法将文件上传到服务器。该方法需要提供如下参数url上传文件的地址filePath要上传的文件的本地路径name服务器接收文件时对应的参数名formData除了文件之外要上传的数据是一个对象。success上传成功后的回调函数fail上传失败后的回调函数complete上传完成后的回调函数下面是一个简单的文件上传例子 saveArticle(data) {data.fi.forEach(item {uni.uploadFile({url: ${base_url}/basic/pad/ut/article/saveImg,filePath: item,name: fi,formData: {til: data.til,con: data.con},header: {content-type: multipart/form-data},success: (uploadFileRes) {console.log(uploadFileRes, 》》》》》);uni.showToast({title: 上传成功})}})})},
上面的代码中我们选择了一张图片进行上传然后通过uni.uploadFile方法将该图片上传到服务器上。其中your_upload_url是上传文件的地址file对应服务器端接收文件时的参数名formData中包含了上传文件时携带的额外参数。上传成功后可以在success回调函数中获取服务器返回的数据。需要注意的是uni.uploadFile方法在小程序和APP端调用时参数不一样请根据实际情况进行修改。
