当前位置: 首页 > news >正文

uView1.0的Upload组件上传图片

<template><u-uploadref="uUpload":file-list="fileList"accept="image/jpeg,image/png"    //允许选择图片文件:sizeType="sizeType":max-size="2 * 1024 * 1024"    //限制上传的图片文件最大为 2M@oversize="oversize"@on-remove="deleteImgs"    //移除:auto-upload="false"    //禁止自动上传选择的图片文max-count="9"     //限制最多只能选择几个图片文件       :show-progress="false"     //不显示文件上传进度条multiple    //多图:previewFullImage="true"    //预览图片时显示完整的原图@on-choose-complete="onChooseComplete">
</u-upload>
</template>
<script>export default {data() {return {fileList: [], //文件列表}},methods: {// 文件超出大小限制oversize() {uni.showToast({title: "图片最大不能超过2M",icon: 'none'})},onChooseComplete(event) {this.multipleUpload(this.$refs.uUpload.lists, 2)},// 多张图片上传multipleUpload(event, type) {let num = 9;event.map(item => {if (num === event.length) {uni.showToast({title: '最多上传9张图片',icon: 'none'})return}num += 1this.uploadDo(item, type)})},uploadDo(event, type) {uni.uploadFile({url: "http://192.168.2.105:18100/file/uploadFile",//仅为示例,非真实的接口地址filePath: event.file.path,name: "file",header: {Authorization: `Bearer  +uni.getStorageSync("token")`,},success: (res) => {let resp = JSON.parse(res.data);this.form.voucherPictureUrls.push(resp.data);},});},//删除图片deleteImgs(index, lists, name) {},}
</script>

uploadDo(event, type) {

   console.log(event, "event");        //上传图片事件
      uni.uploadFile({
        url: "http://192.168.2.105:18100/file/uploadFile",//仅为示例,非真实的接口地址
        filePath: event.file.path,
        name: "file",
        header: {
          Authorization: `Bearer  +uni.getStorageSync("token")`, //要添加header否则接口不能调用
        },
        success: (res) => {

         console.log(res, "res");

          //如果上传成功打印下res,看有没有调用接口以及图片上传回显
          let resp = JSON.parse(res.data);
          this.form.voucherPictureUrls.push(resp.data);
        },
      });
    },

http://www.lryc.cn/news/150179.html

相关文章:

  • 【LeetCode题目详解】第九章 动态规划part03 343. 整数拆分 96.不同的二叉搜索树 (day41补)
  • 半导体制造常用软件工具总结
  • 基于Python的IOS自动化测试环境搭建
  • 技术领导力实战笔记25
  • 设计模式-职责链+反射
  • Middleware ❀ Kafka功能与使用详解
  • python3.11教程1:python基础语法、程序控制、函数
  • 【C++】关于using namepace xxx 使用命名空间和冲突
  • Linux常用命令——cupsenable命令
  • 基于Stable Diffusion的AIGC服饰穿搭实践
  • 【 ARMv9 Cluster BUS QoS 配置】
  • 简单了解网络基本概念
  • 网络安全知识库
  • 无涯教程-JavaScript - FLOOR函数
  • 【LeetCode-中等题】146. LRU 缓存
  • 表白墙程序
  • git 本地仓库关联到远程仓库
  • Introducing Language Guidance in Prompt-based Continual Learning
  • Matlab(数值微积分)
  • 【数据结构回顾】
  • QT创建可移动点类
  • Flutter启动页
  • 读word模板批量生成制式文件
  • Node.js crypto模块 加密算法
  • Win11 避坑安装WSL2 Ubuntu22.04
  • ESP8266+继电器+MQTT+VUE 实现远程开关灯
  • Android中级——四大组件工作过程
  • 【RabbitMQ】RabbitMQ 服务无法启动。系统出错。发生系统错误 1067。进程意外终止。
  • 如何理解attention中的Q、K、V?
  • Redis----取代RabbitMq 和 Kafka的解决方案