【uniapp】uview1.x使用upload上传图片

这篇具有很好参考价值的文章主要介绍了【uniapp】uview1.x使用upload上传图片。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

和2.x不同的是,要用 action 来配置后端上传图片的接口地址;
再来一些配置项的命名有所不同,一般1.x的命名用 -,2.x的命名使用小驼峰;
1.x 的上传会自带删除时的提示框,2.x 没有;

重要的几个配置项有:

<u-upload 
	:file-list="picList" 
    :action="baseUrl" 
    :before-upload="beforeUpload"
    :before-remove="beforeRemove"
></u-upload>

picList 初始化为一个空数组,是用来保存图片的列表
baseUrl 为后端上传图片的接口
beforeUpload 为图片上传之前的回调
beforeRemove 为图片删除之前的回调

这两个回调函数的参数皆为:indexlist,指当前的图片的下标和已有图片的列表
图片上传:

beforeUpload(index, list) {
      this.picList = []
      // console.log('list',list);
      list.map(async item => {
        this.picList.push({
          url: item.url
        })
        let result = await this.uploadFilePromise(item.url);
        console.log(result);
      })
      console.log('照片列表',this.picList);
    },

// 上传图片
    uploadFilePromise(url) {
      return new Promise((resolve, reject) => {
        uni.uploadFile({
          // 仅为示例,非真实的接口地址
          url: `${BASE_URL}/api/pic/upload`,
          filePath: url,
          name: "file",
          formData: {
            typeEnum: "IMAGE",
          },
          success: (res) => {
            resolve(res.data);
            console.log(res);
          },
        });
      });
    },

照片列表打印结果:
【uniapp】uview1.x使用upload上传图片,Vue,uniapp,uni-app,vue.js,前端,javascript
上传成功的返回结果:
【uniapp】uview1.x使用upload上传图片,Vue,uniapp,uni-app,vue.js,前端,javascript
补充比较常用的:
max-count="9":用来设置最大可上传图片数量
:max-size="5 * 1024 * 1024" :用来单张图片可上传的大小文章来源地址https://www.toymoban.com/news/detail-734126.html

到了这里,关于【uniapp】uview1.x使用upload上传图片的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • uniapp、uview——图片上传(单图上传、多图上传、多组照片上传、图片回显)

    uView组件的上传功能,单图上传、多图上传等。 官方文档地址: https://www.uviewui.com/components/upload.html (一)单图上传 1.效果演示: 只能上传一张,选完之后,上传的按钮消失,当然,如果图片不合适,删掉再换一张,但就是只能上传一张。 2.代码: (二)多图上传 1.效果演

    2024年02月07日
    浏览(40)
  • 【uniapp upload】 上传图片和视频

    2024年02月13日
    浏览(35)
  • vue 2.0+element ui 使用el-upload图片上传

    ** ** 使用el-upload将图片加载成Base64格式,通过form统一上传给后端 1、创建通用component ImgComponent.vue 2、在父组件中使用 3、最后通过form统一submit到后端,图片参数传base64即可。 ps:起初在数据库中,将存图片的字段类型设置为BLOB,以二进制的形势存储,后面发现会将“:”转

    2024年02月12日
    浏览(57)
  • Vue中使用的el-upload时批量上传图片时报错问题处理

    项目场景:项目中有一个文件上传的场景,使用el-upload组件进行上传,单图上传是正常,但是在进行批量上传时报了错。 使用el-upload在进行多图批量上传时系统提示报错。 报错提示: Uncaught TypeError: Cannot set properties of null (setting \\\'status\\\')     at VueComponent.handleProgress (element-ui

    2024年02月06日
    浏览(92)
  • uniApp 封装Upload组件实现图片和视频上传,解决官方api单一上传问题

     uniapp 官方api没有同时上传图片和视频的组件,所以就只能自己做了,在此记录下! 这里之所以循环一个一个上传是因为,我是用于小程序端的,目前uniapp不支持微信小程序以文件列表形式上传, filePath: item, //改为files可实现一次上传多个文件,仅App、H5( 2.6.15+)支持 具体

    2024年02月14日
    浏览(42)
  • 前端vue uni-app多图片上传组件,支持单个文件,多个文件上传 步骤条step使用

    快速实现多图片上传组件,支持单个文件,多个文件上传 步骤条step使用; 阅读全文下载完整代码请关注微信公众号: 前端组件开发 效果图如下: 使用方法   使用方法 HTML代码部分   html JS代码 (引入组件 填充数据)   javascript

    2024年02月08日
    浏览(92)
  • vue el-upload实现图片和文字上传

    一、需求: 在表单中使用图片上传,每一张上传的图片都可以加上文字说明通过表单一起传到后台,最后再其他需要的地方展示出来。  二、实现: 后端表单提交时,图片需要的格式是:imageList[ { fileUrl:\\\' \\\', imageExplain:\\\' \\\' } ] 界面代码 v-model=\\\"form.imageUrl\\\" :action=\\\"fileUrl\\\" 调用接

    2024年02月10日
    浏览(53)
  • springboot + vue + elementui — upload解决跨域、实现图片上传

    今日记录通过elementui上传时得到的问题。 我们在本地部署的服务,前端服务请求后端接口,存在跨域问题, 跨域问题确实是由 Web浏览器的同源策略 引起的。同源策略是浏览器的一项安全机制,它限制了从一个源加载的文档或脚本如何与来自其他源的资源进行交互。 同源策略要

    2024年02月10日
    浏览(43)
  • van-uploader上传图片报错Invalid handler for event “load“(在uniapp编译)

    原因 :主要原因这里使用的vant版本是2.13.0的,在Hbuild里面运行的项目,vant插件在这里会有部分组件有兼容问题,(van-image,van-uploader等)。 解决 :主要是要实现图片上传功能,可以使用uniapp自带的上传组件( uni.uploadFile ) 官网地址 示例:

    2024年02月08日
    浏览(50)
  • ant-design-vue中upload上传图片、视频实现预览功能

    有没有小伙伴在使用ant-design-vue的upload组件时,发现api文档在图片预览功能的介绍寥寥无几,而且也没提供视频预览的demo,在实际开发中碰到相应的需求直挠头~~~~,别急,下面来给大家分享一个我自己封装的upload组件,符合需求可以直接在项目中放到组件目录调用。 templat

    2024年02月12日
    浏览(45)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包