代码编织梦想

前言:最近的工作中出现了一个功能点,具体写法我在前面的文章中已经阐述过,不过之前的情况是上传图片调用后端的一个接口,整个表单页面提交的时候调用的是另一个接口,我也从中学到了另外的一种方法,写到这里分享给大家。

一、需求概述

此次的后端接口需要三个参数,分别是文章标题和文章内容以及文章中的图片,在用户点击保存文章时需要这三个参数的传递。那么这个时候其实就已经完成了图片的上传以及文章的保存。

二、相关文档

做这个功能的过程中我更加确定了一件事情,一定要看文档,看文档,看文档!!!重要的事情

说三遍,使用类似uni-app这种api一定要看相关描述的官方文档,人家都说了是官方文档,就是写给开发人员参考使用的,所以就不要去瞎百度,找些乱七八糟的方法,我就遇到了这个坑,后来我还是看了官方文档解决的这个问题

这里已经使用uni-app中uploadFIle将本地临时资源提交到服务器中,但是请注意!!!!app的上传多张图片是必须要循环调用该api的,小程序暂时不支持上传多张图片,如下图所示:

a7ccf1ee3e7255e1165d9c67bd5d27c8.png

三、具体实现方法

写到这里我真的想说句fuck为啥呢,因为我一直知道这个功能其实很简单,但是官方文档看的不仔细,又参考了一些乱七八糟的方法,最终还是回到了参考官方文档的这个方法,所以大家,恩,记得看文档!

具体的实现方法和参数说明

uni-app提供了uni.uploadFile方法来实现文件上传功能。该方法可以将本地的文件上传到服务器,并且可以携带额外的参数。使用uni.uploadFile方法可以方便地实现文件上传功能,具体步骤如下:

  1. 首先,调用uni.chooseImage或uni.chooseVideo方法选择文件,并在成功回调中获取文件的本地路径。

  1. 然后,调用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: '上传成功!'
                            })
                        }
                    })
                })
            },
454b9648c61c04e7c65ed5aeb7808b6d.png

上面的代码中,我们选择了一张图片进行上传,然后通过uni.uploadFile方法将该图片上传到服务器上。其中,'your_upload_url'是上传文件的地址,'file'对应服务器端接收文件时的参数名,formData中包含了上传文件时携带的额外参数。上传成功后,可以在success回调函数中获取服务器返回的数据。

需要注意的是,uni.uploadFile方法在小程序和APP端调用时参数不一样,请根据实际情况进行修改。

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/Bonsoir777/article/details/129615005

uniapp发布动态——文字图片地区-爱代码爱编程

页面 <template> <view class=""> <view class="ptb-30"> <view class="plr"> <textarea v-model="message" maxlength="1000" placeholder="输入内容(最多100

uniapp-爱代码爱编程

uniapp介绍 什么是uniapp uniapp是一个使用Vue.js开发所有前端应用的框架,开发者编写一套代码,可发布到iOS、Android、H5、以及各种小程序(微信/支付宝/百度/头条/QQ/钉钉/淘宝)、快应用等多个平台。 uniapp已经支持一套代码打包到 Android、IOS、H5、微信小程序、支付宝小程序、百度小程序、字节跳动小程

uniapp 发布文章app 富文本框的使用——添加图文功能-爱代码爱编程

uniapp 富文本框的使用 uniapp中是有富文本框组件的。 uniapp中的富文本框组件的使用官网链接:https://uniapp.dcloud.io/component/editor?id=editor 官网富文本框的展示部分:(下面红框框住的菜单含义如下:) B 加粗 I 斜体 U 下划线 居中 靠右 字体 撤回 反撤回 添加横线 图片

uni-app做多端小程序开发的基本项目搭建(二) ——云函数和文件上传的使用-爱代码爱编程

1.前言 通过上一篇文章,用uni-app的uniCloud云开发实现了简单的增删查改的操作,要做一个app项目,目前我可能还需要用到的功能有:选择图片上传到云存储,使用云函数封装等,本文主要介绍这两个功能的简单实现,其他更强大的API需要去查看官方文档再练习使用。本文还将简单的介绍使用HbuilderX的打包功能和将程序转为微信小程序的实现过程。 2

uniapp选择图片压缩并上传_chen-hui的博客-爱代码爱编程

首先呢!需要知道上传图片的一个实现逻辑是怎样的。 选择图片——获取图路径——压缩图片——上传获取图片链接 图片上传使用的是view图片上传: Upload 上传 | uView 2.0 - 全面兼容nvue的uni-app生态框架 - uni-app UI框架 图片压缩使用的是插件库的(支持h5): 图片压缩 - DCloud 插件市场 选择图

uniapp中使用网页录音并上传声音文件(发语音)——js-audio-recorder的使用【伸手党福利】_三个人工作室的博客-爱代码爱编程

uniapp中上传音频只能在app或小程序当中实现,如何使用网页完成语音的录制和上传则成为了困扰前端童鞋的重点。 本文着重解决: js-audio-recorder报 error:浏览器不支持getUserMedia ! 的

uniapp、uview——图片上传(单图上传、多图上传、多组照片上传)_耶啵奶膘的博客-爱代码爱编程

一、简介 uView组件的上传功能,单图上传、多图上传等。 官方文档地址: https://www.uviewui.com/components/upload.html 二、步骤 (一)单图上传 1.效果演示:

uniapp 生成微信小程序图片上传提示 fail url not in domain list 的解决方法_赖龙的博客-爱代码爱编程

问题表现: uniApp 生成微信小程序,获取内容程序不报错,但是图片上传提示 fail url not in domain list 错误。 问题分析: 微信小程序:服务器域名配置 每个微信小程序需要事先设置通讯域名

uniapp——常用逻辑实现_coooodery的博客-爱代码爱编程

1.上拉加载数据(数据分页) 视图结构: <view class="list"> <view v-for="(item,index) in list" :key="index"></view> </view> 全局变量: data() { return { //数据列表

uni-app——小程序实现本地图片的上传以及身份证的智能识别-爱代码爱编程

文章目录 前言一、示例图二、实现过程 1.完成提交图片的api地址2.获取本地图片3.将本地图片上传至开发者服务器三、具体实现代码四、身份证的智能识别总结 前言 上传本地图片的功能很常见,那么具体该如何实现呢? 一、示例图 二、实现过程 1.完成提交图片的api地址 提交图片同样也需要调用

uni——组件上传单张图片uni.chooseimage-爱代码爱编程

案例演示 案例代码 <view class="four" @click="uploadImg"> <block v-if="!succImg"> <view class="xian

阿里云oss上传请求403问题的完美解决方案及uni.uploadfile h5上传文件失败完美解决方案_加载oss的pdf文件 403 (forbidden)_liu__software的博客-爱代码爱编程

 在使用阿里云OSS服务时,会用到跨域AJAX上传,上传时报403错误,之前遇到过此类问题并成功解决了,但时间长了遗忘,因此记录下来以备后续学习了解ajax跨域上传OSS。 ajax跨域上传首先会发送options请求,成功后再进行上传,那么,如何解决阿里云OSS跨域AJAX上传OPTIONS请求403问题?只需简单设置,流程如下: 进入存储空

uniapp开发小技巧_uniapp 开发技巧-爱代码爱编程

uniapp开发小技巧 记录一下uniapp开发常用的小技巧 1. view沾满屏幕剩余空间 onReady() { // 获取可视区域的高度 uni.getSystemInfo({ suc

uniapp头像上传功能_uniapp上传头像-爱代码爱编程

问题:第一次做头像上传,使用普通的uni.request方法请求接口会报跨域 解决:实际上uni-app官方有头像上传的API,我也翻看了很多博主的文章,最后自己按照人家的思路敲出来了,方法如下: ​ ​ <u-avatar :src="avatarUrl" @click="updateAvatar" :size="140" mode="circ

若依移动端ruoyi-爱代码爱编程

本文使用uView2的upload组件实现从手机相册上传,也可以拍照上传。此组件可以再小程序,h5,App端上传图片,使用方便。 1. 前端代码 <template> <view class="u-page"> <view class="u-demo-block"> <view class=

小程序 | uniapp | formdata | 类型 | 无法使用formdata问题解决_uniapp formdata-爱代码爱编程

formData的引用 和使用 import FormData from './FormData/index.js' // 上传图片 export function uploadFile(newUrl){ // newU